Home > OS >  Adding an Item to a ListView Using alert dialog textfield in Flutter
Adding an Item to a ListView Using alert dialog textfield in Flutter

Time:01-02

So I'm trying to have a page that you click on the floating action button and a popup dialog/ alert dialog appears with an text field which you enter the name and it creates an item in the list view, also I want that item to be clickable and goes to another page with that name as the new app bar name.

This is my code, but it doesn't create anything:

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

class lists extends StatefulWidget {
  const lists({super.key});

  @override
  State<lists> createState() => _listsState();
}

class _listsState extends State<lists> {
  @override
  Widget build(BuildContext context) {
    String _newItemName = '';
    final List<String> _items = [];
    final textController = TextEditingController();
    int _currentIndex = 0;

    return Scaffold(
      body: _items.length > 0
          ? ListView.builder(
              itemCount: _items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('${_items[index]}'),
                );
              },
            )
          : const Center(
              child: Text("You currently have no classes. Add from below."),
            ),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_arrow,
        spacing: 6,
        spaceBetweenChildren: 6,
        backgroundColor: const Color.fromARGB(255, 22, 37, 50),
        foregroundColor: const Color.fromARGB(255, 255, 255, 255),
        children: [
          SpeedDialChild(
              child: const Icon(Icons.group_add), label: "add student"),
          SpeedDialChild(
            child: const Icon(Icons.school),
            label: "add class",
            onTap: () {
              showDialog(
                context: context,
                builder: (context) {
                  return AlertDialog(
                    title: const Text('Add a new class'),
                    content: TextField(
                      controller: textController,
                      autofocus: true,
                      decoration: const InputDecoration(
                          hintText: "Enter the name of the class."),
                    ),
                    actions: [
                      TextButton(
                        child: Text('Cancel'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                      TextButton(
                        child: Text('Add'),
                        onPressed: () {
                          Navigator.pop(context, textController.text);
                        },
                      ),
                    ],
                  );
                },
              );
            },
          )
        ],
      ),
    );
  }
}

CodePudding user response:

In the Add action update the value of _list to contain the item using setState

return AlertDialog(
         title: const Text('Add a new class'),
         content: TextField(
                    controller: textController,
                    autofocus: true,
                    decoration: const InputDecoration(
                          hintText: "Enter the name of the class."),
                    ),
                    actions: [
                      TextButton(
                        child: Text('Cancel'),
                        onPressed: () {
                          Navigator.pop(context);
                        },
                      ),
                      TextButton(
                        child: Text('Add'),
                        onPressed: () {
                          setState((){
                             _items.add(textController.text)  //            
  • Related