Morning Code- Add new items to list via floating action button

 So I have been told that my text field on the shopping list page of my app can be difficult to see. I made it a little transparent so that it went well with the background of the lists. But today I am going to change how people enter items into the list. I will take away the text field and just have a floating action button visible. Once the button is pressed an alert dialog will appear and that will have a text field, add button, cancel button, and an add more button. 

So I replaced the text field with a Floating Action Button. I made it blue with a white plus sign in it. When it is taped it flashes a light blue color. Without the Stack or Align Widget, the button appeared at the bottom center. With the align widget I made it appear at the bottom right with some padding on the bottom and right side. 

Align(
  alignment: Alignment.bottomRight,
  child: Padding(
    padding: const EdgeInsets.only(bottom: 18.0, right: 10),
    child: FloatingActionButton(
      onPressed: () {},
      child: Icon(
        Icons.add,
        color: Colors.white,
        size: 35,
      ),
      backgroundColor: Colors.blue,
      splashColor: Colors.lightBlueAccent,
      elevation: 15,

Now when the floating action button is pressed an alert dialog appears. It contains the textField and three buttons: Add, Add another, and cancel.

onPressed: () {
  showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(
            "Add an Item to list",
            textAlign: TextAlign.center,
          ),
          content: SingleChildScrollView(
            child: Column(
              children: [
                TextField(
                  autofocus: false,
                  controller: addItemController,
                  onChanged: (value) {
                    additionToList = value;
                  },
                  decoration: InputDecoration(
                      hintText: "Enter new item",
                      fillColor: Colors.white70,
                      filled: true),
                ),
              ],
            ),
          ),
          actions: [
            MaterialButton(
              onPressed: () {},
              child: Text("Add"),
            ),
            MaterialButton(
                onPressed: () {},
                child: Text('Add Another')),
            MaterialButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: Text("Cancel")),
          ],
        );
      });
},

For the add button, I copied the code I had used previously and pasted it into the onPressed parameter of the Add Material Button. The only thing I had to add was the Navigator.pop(context). At first, it did not work but I figured it was because of the focus.of(context) code that I had above it. I place that code below it and it worked. I was able to add some items to the list and it went back to the main screen when I was done. 

MaterialButton(
  onPressed: () {
    additionToList == null
        ? showDialog(
            context: context,
            builder:
                (BuildContext context) {
              return AlertDialog(
                content: Text(
                    'Please enter an item. The text field cannot be empty.'),
                actions: [
                  OutlineButton(
                    onPressed: () {
                      Navigator.pop(
                          context);
                    },
                    child: Text("OK"),
                  )
                ],
              );
            })
        : FirebaseFirestore.instance
            .collection(userIdentification)
            .doc(nameOfList)
            .collection(nameOfList)
            .add({
            'item': additionToList,
            'timeStamp': DateTime.now()
          });

    addItemController.clear();
    setState(() {
      additionToList = null;
    });
    Navigator.pop(context);
    FocusScope.of(context).unfocus();
  },
  child: Text("Add"),
),

Now the only issue that I am facing is that the alert that is supposed to appear when the text field is empty but the add button is pressed is not appearing. But I did notice that the blank items were not appearing in the list anymore.