state_examples: flutter command page

flutter_command.page.dart

class FlutterCommandPage extends StatefulWidget {
  const FlutterCommandPage({Key key}) : super(key: key);

  @override
  _FlutterCommandPageState createState() => _FlutterCommandPageState();
}

class _FlutterCommandPageState extends State<FlutterCommandPage> {
  final _notesViewModel = NotesViewModel();
  TextEditingController _controller;

  @override
  void initState() {
    super.initState();

    _controller = TextEditingController();
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My notes app')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            FlatButton(
                onPressed: () {                  
                  // Execute updateNotesCommand
                  // to add a note.
                  _notesViewModel.updateNotesCommand
                      .execute(_notesViewModel.inputChangedCommand.value);
                  _controller.clear();
                },
                child: Text('Create Note')),
            TextField(
              controller: _controller,         
              // Execute inputChangedCommand
              // to update the input value.
              onChanged: _notesViewModel.inputChangedCommand,
              decoration: InputDecoration.collapsed(hintText: 'Add a note'),
            ),
            Divider(),    
            // Use ValueListenableBuilder
            // to subscribe to state.
            ValueListenableBuilder<NotesState>(
              valueListenable: _notesViewModel.updateNotesCommand,
              builder: (context, state, _) => Expanded(
                child: ListView.builder(
                  itemBuilder: (context, index) =>
                      Note(text: state.notes[index]),
                  itemCount: state.notes.length,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}