menu_demo.dart 7.53 KB
Newer Older
Hans Muller's avatar
Hans Muller committed
1 2 3 4 5 6
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

7 8
import '../../gallery/demo.dart';

9
class MenuDemo extends StatefulWidget {
10
  const MenuDemo({ Key key }) : super(key: key);
Hans Muller's avatar
Hans Muller committed
11

12
  static const String routeName = '/material/menu';
13

14
  @override
15
  MenuDemoState createState() => MenuDemoState();
Hans Muller's avatar
Hans Muller committed
16 17 18
}

class MenuDemoState extends State<MenuDemo> {
19
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
Hans Muller's avatar
Hans Muller committed
20 21 22 23 24 25 26 27 28 29 30 31

  final String _simpleValue1 = 'Menu item value one';
  final String _simpleValue2 = 'Menu item value two';
  final String _simpleValue3 = 'Menu item value three';
  String _simpleValue;

  final String _checkedValue1 = 'One';
  final String _checkedValue2 = 'Two';
  final String _checkedValue3 = 'Free';
  final String _checkedValue4 = 'Four';
  List<String> _checkedValues;

32
  @override
Hans Muller's avatar
Hans Muller committed
33 34 35 36 37 38 39
  void initState() {
    super.initState();
    _simpleValue = _simpleValue2;
    _checkedValues = <String>[_checkedValue3];
  }

  void showInSnackBar(String value) {
40
    _scaffoldKey.currentState.showSnackBar(SnackBar(
41
     content: Text(value),
Hans Muller's avatar
Hans Muller committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
    ));
  }

  void showMenuSelection(String value) {
    if (<String>[_simpleValue1, _simpleValue2, _simpleValue3].contains(value))
      _simpleValue = value;
    showInSnackBar('You selected: $value');
  }

  void showCheckedMenuSelections(String value) {
    if (_checkedValues.contains(value))
      _checkedValues.remove(value);
    else
      _checkedValues.add(value);

    showInSnackBar('Checked $_checkedValues');
  }

  bool isChecked(String value) => _checkedValues.contains(value);

62
  @override
Hans Muller's avatar
Hans Muller committed
63
  Widget build(BuildContext context) {
64
    return Scaffold(
Hans Muller's avatar
Hans Muller committed
65
      key: _scaffoldKey,
66
      appBar: AppBar(
67
        title: const Text('Menus'),
68
        actions: <Widget>[
69
          MaterialDemoDocumentationButton(MenuDemo.routeName),
70
          PopupMenuButton<String>(
Hans Muller's avatar
Hans Muller committed
71
            onSelected: showMenuSelection,
72
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
73
              const PopupMenuItem<String>(
74
                value: 'Toolbar menu',
75
                child: Text('Toolbar menu'),
Hans Muller's avatar
Hans Muller committed
76
              ),
77
              const PopupMenuItem<String>(
78
                value: 'Right here',
79
                child: Text('Right here'),
Hans Muller's avatar
Hans Muller committed
80
              ),
81
              const PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
82
                value: 'Hooray!',
83
                child: Text('Hooray!'),
Hans Muller's avatar
Hans Muller committed
84
              ),
Ian Hickson's avatar
Ian Hickson committed
85 86 87
            ],
          ),
        ],
Hans Muller's avatar
Hans Muller committed
88
      ),
89
      body: ListView(
90
        padding: kMaterialListPadding,
Hans Muller's avatar
Hans Muller committed
91 92 93 94
        children: <Widget>[
          // Pressing the PopupMenuButton on the right of this item shows
          // a simple menu with one disabled item. Typically the contents
          // of this "contextual menu" would reflect the app's state.
95
          ListTile(
96
            title: const Text('An item with a context menu button'),
97
            trailing: PopupMenuButton<String>(
98
              padding: EdgeInsets.zero,
Hans Muller's avatar
Hans Muller committed
99
              onSelected: showMenuSelection,
100
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
101
                PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
102
                  value: _simpleValue1,
103
                  child: const Text('Context menu item one'),
Hans Muller's avatar
Hans Muller committed
104
                ),
105
                const PopupMenuItem<String>(
106
                  enabled: false,
107
                  child: Text('A disabled menu item'),
Hans Muller's avatar
Hans Muller committed
108
                ),
109
                PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
110
                  value: _simpleValue3,
111
                  child: const Text('Context menu item three'),
Hans Muller's avatar
Hans Muller committed
112
                ),
113 114
              ],
            ),
Hans Muller's avatar
Hans Muller committed
115 116 117 118
          ),
          // Pressing the PopupMenuButton on the right of this item shows
          // a menu whose items have text labels and icons and a divider
          // That separates the first three items from the last one.
119
          ListTile(
120
            title: const Text('An item with a sectioned menu'),
121
            trailing: PopupMenuButton<String>(
122
              padding: EdgeInsets.zero,
Hans Muller's avatar
Hans Muller committed
123
              onSelected: showMenuSelection,
124
              itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
125
                const PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
126
                  value: 'Preview',
127 128
                  child: ListTile(
                    leading: Icon(Icons.visibility),
129 130
                    title: Text('Preview'),
                  ),
Hans Muller's avatar
Hans Muller committed
131
                ),
132
                const PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
133
                  value: 'Share',
134 135
                  child: ListTile(
                    leading: Icon(Icons.person_add),
136 137
                    title: Text('Share'),
                  ),
Hans Muller's avatar
Hans Muller committed
138
                ),
139
                const PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
140
                  value: 'Get Link',
141 142
                  child: ListTile(
                    leading: Icon(Icons.link),
143 144
                    title: Text('Get link'),
                  ),
Hans Muller's avatar
Hans Muller committed
145
                ),
146
                const PopupMenuDivider(),
147
                const PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
148
                  value: 'Remove',
149 150
                  child: ListTile(
                    leading: Icon(Icons.delete),
151 152 153 154 155
                    title: Text('Remove'),
                  ),
                ),
              ],
            ),
Hans Muller's avatar
Hans Muller committed
156 157 158 159
          ),
          // This entire list item is a PopupMenuButton. Tapping anywhere shows
          // a menu whose current value is highlighted and aligned over the
          // list item's center line.
160
          PopupMenuButton<String>(
161
            padding: EdgeInsets.zero,
Hans Muller's avatar
Hans Muller committed
162 163
            initialValue: _simpleValue,
            onSelected: showMenuSelection,
164
            child: ListTile(
165
              title: const Text('An item with a simple menu'),
166
              subtitle: Text(_simpleValue),
Hans Muller's avatar
Hans Muller committed
167
            ),
168
            itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
169
              PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
170
                value: _simpleValue1,
171
                child: Text(_simpleValue1),
Hans Muller's avatar
Hans Muller committed
172
              ),
173
              PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
174
                value: _simpleValue2,
175
                child: Text(_simpleValue2),
Hans Muller's avatar
Hans Muller committed
176
              ),
177
              PopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
178
                value: _simpleValue3,
179 180 181
                child: Text(_simpleValue3),
              ),
            ],
Hans Muller's avatar
Hans Muller committed
182 183 184
          ),
          // Pressing the PopupMenuButton on the right of this item shows a menu
          // whose items have checked icons that reflect this app's state.
185
          ListTile(
186
            title: const Text('An item with a checklist menu'),
187
            trailing: PopupMenuButton<String>(
188
              padding: EdgeInsets.zero,
Hans Muller's avatar
Hans Muller committed
189
              onSelected: showCheckedMenuSelections,
190
              itemBuilder: (BuildContext context) => <PopupMenuItem<String>>[
191
                CheckedPopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
192
                  value: _checkedValue1,
193
                  checked: isChecked(_checkedValue1),
194
                  child: Text(_checkedValue1),
Hans Muller's avatar
Hans Muller committed
195
                ),
196
                CheckedPopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
197
                  value: _checkedValue2,
198 199
                  enabled: false,
                  checked: isChecked(_checkedValue2),
200
                  child: Text(_checkedValue2),
Hans Muller's avatar
Hans Muller committed
201
                ),
202
                CheckedPopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
203
                  value: _checkedValue3,
204
                  checked: isChecked(_checkedValue3),
205
                  child: Text(_checkedValue3),
Hans Muller's avatar
Hans Muller committed
206
                ),
207
                CheckedPopupMenuItem<String>(
Hans Muller's avatar
Hans Muller committed
208
                  value: _checkedValue4,
209
                  checked: isChecked(_checkedValue4),
210 211 212 213 214 215 216
                  child: Text(_checkedValue4),
                ),
              ],
            ),
          ),
        ],
      ),
Hans Muller's avatar
Hans Muller committed
217 218 219
    );
  }
}