Easy Split – Add alert dialog – Flutter – Day 3

Today I am planning to make the following changes.

1. Show alert dialog on tapping the + sign.
2. Add input field in the alert dialog and accept the User name.
3. Refresh User List View with the new entry.

Showing an alert dialog on tap of a button was straight forward but the challenge was to add an input text field in the alert dialog and passing that information to refresh the ListView. Also to add a new user to list and refresh the list view the UserPage has been modified from extending StatelessWidget to StatefulWidget. Here is the modified userPage.dart.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';

class UserPage extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<UserPage> {
  TextEditingController _textController;
  List<String> _users = ['Ravi', 'Ganesh', 'Prabhu', 'Venkatesh'];

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(text: '');
  }

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Users'),
        trailing: CupertinoButton(
            padding: EdgeInsets.zero,
            child: Icon(
              CupertinoIcons.add,
              size: 35,
            ),
            onPressed: () {
              _textController = TextEditingController(text: '');
              _openDialog(context);
            }),
      ),
      child: ListView(
        children: _users
            .map(
              (w) => Container(
                padding: EdgeInsets.all(16),
                child: Text(w),
              ),
            )
            .toList(),
      ),
    );
  }

  void _openDialog(ctx) {
    showCupertinoDialog(
        context: ctx,
        builder: (_) => CupertinoAlertDialog(
              title: Text('Add User'),
              content: CupertinoTextField(controller: _textController),
              actions: [
                // Close the dialog
                // You can use the CupertinoDialogAction widget instead
                CupertinoButton(
                    child: Text('Cancel'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                    child: Text('Save'),
                    onPressed: () {
                      setState(() => _users.add(_textController.text));
                      Navigator.of(ctx).pop();
                    })
              ],
            ));
  }
}

I have not provided detail explanation about the code snippet, function and argument used, will explain that more detail in future posts.