我們新增一個全螢幕的彈跳視窗，然後做些表單，目前就先這樣了。

明天再把新增存起來。

import 'package:flutter/material.dart';

class DialogAddGroup extends StatefulWidget {
  @override
  _DialogAddGroupState createState() => _DialogAddGroupState();
}

class _DialogAddGroupState extends State<DialogAddGroup> {
  bool _canSave = false;
  Map<String, dynamic> _group = {
    'name': '',
    'icon': null,
    'color': null,
  };

  List<Map<String, dynamic>> _icons = [
    {
      'name': 'Work',
      'icon': Icons.work,
    },
    {
      'name': 'Home',
      'icon': Icons.home,
    },
  ];

  List<Map<String, dynamic>> _colors = [
    {
      'name': 'Black',
      'color': Colors.black,
    },
    {
      'name': 'Red',
      'color': Colors.red,
    },
    {
      'name': 'Green',
      'color': Colors.green,
    },
    {
      'name': 'Yellow',
      'color': Colors.yellow,
    }
  ];

  void _setCanSave() {
    if (_group['name'] != '' &&
        _group['icon'] != null &&
        _group['color'] != null) {
      setState(() => _canSave = true);
    }
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return new Scaffold(
      appBar: new AppBar(title: const Text('Add New Group'), actions: <Widget>[
        new FlatButton(
            child: new Text('ADD',
                style: theme.textTheme.body1.copyWith(
                    color: _canSave
                        ? Colors.white
                        : new Color.fromRGBO(255, 255, 255, 0.5))),
            onPressed: _canSave
                ? () {
                    Navigator.of(context).pop(_group);
                  }
                : null)
      ]),
      body: new Form(
        child: new ListView(
          padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 16.0),
          children: <Widget>[
            new TextField(
              decoration: const InputDecoration(
                labelText: "Text",
              ),
              onChanged: (String value) {
                _group['name'] = value;
                _setCanSave();
              },
            ),
            new FormField(
              builder: (FormFieldState state) {
                return InputDecorator(
                  decoration: InputDecoration(
                    icon: const Icon(Icons.color_lens),
                    labelText: 'Color',
                  ),
                  // isEmpty: _group['color'] == Colors.black,
                  child: new DropdownButtonHideUnderline(
                    child: new DropdownButton(
                      value: _group['color'],
                      isDense: true,
                      onChanged: (newValue) {
                        setState(() {
                          _group['color'] = newValue;
                          _setCanSave();
                          state.didChange(newValue);
                        });
                      },
                      items: _colors.map((color) {
                        return new DropdownMenuItem(
                          value: color['color'],
                          child: new Text(color['name']),
                        );
                      }).toList(),
                    ),
                  ),
                );
              },
            ),
            new FormField(
              builder: (FormFieldState state) {
                return InputDecorator(
                  decoration: InputDecoration(
                    icon: const Icon(Icons.lens),
                    labelText: 'Icon',
                  ),
                  // isEmpty: _group['icon'] == '',
                  child: new DropdownButtonHideUnderline(
                    child: new DropdownButton(
                      value: _group['icon'],
                      isDense: true,
                      onChanged: (newValue) {
                        setState(() {
                          _group['icon'] = newValue;
                          _setCanSave();
                          state.didChange(newValue);
                        });
                      },
                      items: _icons.map((icon) {
                        return new DropdownMenuItem(
                          value: icon['icon'],
                          child: new Text(icon['name']),
                        );
                      }).toList(),
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}