buttons_demo.dart 11.6 KB
Newer Older
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
import '../../gallery/demo.dart';
8 9

const String _raisedText =
10 11
    'Raised buttons add dimension to mostly flat layouts. They emphasize '
    'functions on busy or wide spaces.';
12

13
const String _raisedCode = 'buttons_raised';
14

15 16 17
const String _flatText = 'A flat button displays an ink splash on press '
    'but does not lift. Use flat buttons on toolbars, in dialogs and '
    'inline with padding';
18

19
const String _flatCode = 'buttons_flat';
20

21 22 23 24 25 26
const String _outlineText =
    'Outline buttons become opaque and elevate when pressed. They are often '
    'paired with raised buttons to indicate an alternative, secondary action.';

const String _outlineCode = 'buttons_outline';

27
const String _dropdownText =
28 29 30
    'A dropdown button displays a menu that\'s used to select a value from a '
    'small set of values. The button displays the current value and a down '
    'arrow.';
31

32
const String _dropdownCode = 'buttons_dropdown';
33

34
const String _iconText =
35 36
    'IconButtons are appropriate for toggle buttons that allow a single choice '
    'to be selected or deselected, such as adding or removing an item\'s star.';
37

38
const String _iconCode = 'buttons_icon';
39 40

const String _actionText =
41 42 43 44
    'Floating action buttons are used for a promoted action. They are '
    'distinguished by a circled icon floating above the UI and can have motion '
    'behaviors that include morphing, launching, and a transferring anchor '
    'point.';
45

46
const String _actionCode = 'buttons_action';
47

48
class ButtonsDemo extends StatefulWidget {
49
  static const String routeName = '/material/buttons';
50

51
  @override
52
  _ButtonsDemoState createState() => _ButtonsDemoState();
53 54 55
}

class _ButtonsDemoState extends State<ButtonsDemo> {
56 57
  ShapeBorder _buttonShape;

58
  @override
59
  Widget build(BuildContext context) {
60 61 62 63
    final ButtonThemeData buttonTheme = ButtonTheme.of(context).copyWith(
      shape: _buttonShape
    );

64
    final List<ComponentDemoTabData> demos = <ComponentDemoTabData>[
65
      ComponentDemoTabData(
66 67
        tabName: 'RAISED',
        description: _raisedText,
68
        demoWidget: ButtonTheme.fromButtonThemeData(
69 70 71
          data: buttonTheme,
          child: buildRaisedButton(),
        ),
72
        exampleCodeTag: _raisedCode,
73
        documentationUrl: 'https://docs.flutter.io/flutter/material/RaisedButton-class.html',
74
      ),
75
      ComponentDemoTabData(
76 77
        tabName: 'FLAT',
        description: _flatText,
78
        demoWidget: ButtonTheme.fromButtonThemeData(
79 80 81
          data: buttonTheme,
          child: buildFlatButton(),
        ),
82
        exampleCodeTag: _flatCode,
83
        documentationUrl: 'https://docs.flutter.io/flutter/material/FlatButton-class.html',
84
      ),
85
      ComponentDemoTabData(
86 87
        tabName: 'OUTLINE',
        description: _outlineText,
88
        demoWidget: ButtonTheme.fromButtonThemeData(
89 90 91
          data: buttonTheme,
          child: buildOutlineButton(),
        ),
92
        exampleCodeTag: _outlineCode,
93
        documentationUrl: 'https://docs.flutter.io/flutter/material/OutlineButton-class.html',
94
      ),
95
      ComponentDemoTabData(
96 97
        tabName: 'DROPDOWN',
        description: _dropdownText,
98
        demoWidget: buildDropdownButton(),
99
        exampleCodeTag: _dropdownCode,
100
        documentationUrl: 'https://docs.flutter.io/flutter/material/DropdownButton-class.html',
101
      ),
102
      ComponentDemoTabData(
103 104
        tabName: 'ICON',
        description: _iconText,
105
        demoWidget: buildIconButton(),
106
        exampleCodeTag: _iconCode,
107
        documentationUrl: 'https://docs.flutter.io/flutter/material/IconButton-class.html',
108
      ),
109
      ComponentDemoTabData(
110 111
        tabName: 'ACTION',
        description: _actionText,
112
        demoWidget: buildActionButton(),
113
        exampleCodeTag: _actionCode,
114
        documentationUrl: 'https://docs.flutter.io/flutter/material/FloatingActionButton-class.html',
115
      ),
116 117
    ];

118
    return TabbedComponentDemoScaffold(
119
      title: 'Buttons',
120
      demos: demos,
121
      actions: <Widget>[
122
        IconButton(
123 124 125 126 127 128 129 130
          icon: const Icon(Icons.sentiment_very_satisfied),
          onPressed: () {
            setState(() {
              _buttonShape = _buttonShape == null ? const StadiumBorder() : null;
            });
          },
        ),
      ],
131 132 133
    );
  }

134
  Widget buildRaisedButton() {
135
    return Align(
136
      alignment: const Alignment(0.0, -0.2),
137
      child: Column(
138
        mainAxisSize: MainAxisSize.min,
139
        children: <Widget>[
140
          ButtonBar(
141 142
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
143
              RaisedButton(
144 145 146 147 148 149
                child: const Text('RAISED BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
              const RaisedButton(
150
                child: Text('DISABLED'),
151 152 153 154
                onPressed: null,
              ),
            ],
          ),
155
          ButtonBar(
156 157
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
158
              RaisedButton.icon(
159 160 161 162 163 164
                icon: const Icon(Icons.add, size: 18.0),
                label: const Text('RAISED BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
165
              RaisedButton.icon(
166 167 168 169 170
                icon: const Icon(Icons.add, size: 18.0),
                label: const Text('DISABLED'),
                onPressed: null,
              ),
            ],
171
          ),
172 173
        ],
      ),
174 175 176
    );
  }

177
  Widget buildFlatButton() {
178
    return Align(
179
      alignment: const Alignment(0.0, -0.2),
180
      child: Column(
181 182
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
183
          ButtonBar(
184 185
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
186
              FlatButton(
187 188 189 190 191 192
                child: const Text('FLAT BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
              const FlatButton(
193
                child: Text('DISABLED'),
194 195 196 197
                onPressed: null,
              ),
            ],
          ),
198
          ButtonBar(
199 200
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
201
              FlatButton.icon(
202 203 204 205 206 207
                icon: const Icon(Icons.add_circle_outline, size: 18.0),
                label: const Text('FLAT BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
208
              FlatButton.icon(
209 210 211 212 213 214 215 216 217 218 219 220
                icon: const Icon(Icons.add_circle_outline, size: 18.0),
                label: const Text('DISABLED'),
                onPressed: null,
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildOutlineButton() {
221
    return Align(
222
      alignment: const Alignment(0.0, -0.2),
223
      child: Column(
224
        mainAxisSize: MainAxisSize.min,
225
        children: <Widget>[
226
          ButtonBar(
227 228
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
229
              OutlineButton(
230 231 232 233 234
                child: const Text('OUTLINE BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
235
              const OutlineButton(
236
                child: Text('DISABLED'),
237 238 239 240
                onPressed: null,
              ),
            ],
          ),
241
          ButtonBar(
242 243
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
244
              OutlineButton.icon(
245 246 247 248 249 250
                icon: const Icon(Icons.add, size: 18.0),
                label: const Text('OUTLINE BUTTON'),
                onPressed: () {
                  // Perform some action
                },
              ),
251
              OutlineButton.icon(
252 253 254 255 256
                icon: const Icon(Icons.add, size: 18.0),
                label: const Text('DISABLED'),
                onPressed: null,
              ),
            ],
257
          ),
258 259
        ],
      ),
260 261 262
    );
  }

263 264
  // https://en.wikipedia.org/wiki/Free_Four
  String dropdown1Value = 'Free';
265 266
  String dropdown2Value;
  String dropdown3Value = 'Four';
267 268

  Widget buildDropdownButton() {
269
    return Padding(
270
      padding: const EdgeInsets.all(24.0),
271
      child: Column(
272 273
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
274
          ListTile(
275
            title: const Text('Simple dropdown:'),
276
            trailing: DropdownButton<String>(
277 278 279
              value: dropdown1Value,
              onChanged: (String newValue) {
                setState(() {
280
                  dropdown1Value = newValue;
281 282
                });
              },
283
              items: <String>['One', 'Two', 'Free', 'Four'].map<DropdownMenuItem<String>>((String value) {
284
                return DropdownMenuItem<String>(
285
                  value: value,
286
                  child: Text(value),
287 288 289
                );
              }).toList(),
            ),
290
          ),
291
          const SizedBox(
292
            height: 24.0,
293
          ),
294
          ListTile(
295
            title: const Text('Dropdown with a hint:'),
296
            trailing: DropdownButton<String>(
297
              value: dropdown2Value,
298
              hint: const Text('Choose'),
299 300
              onChanged: (String newValue) {
                setState(() {
301
                  dropdown2Value = newValue;
302 303
                });
              },
304
              items: <String>['One', 'Two', 'Free', 'Four'].map<DropdownMenuItem<String>>((String value) {
305
                return DropdownMenuItem<String>(
306
                  value: value,
307
                  child: Text(value),
308 309 310
                );
              }).toList(),
            ),
311
          ),
312
          const SizedBox(
313 314
            height: 24.0,
          ),
315
          ListTile(
316
            title: const Text('Scrollable dropdown:'),
317
            trailing: DropdownButton<String>(
318 319 320 321 322 323 324 325 326 327
              value: dropdown3Value,
              onChanged: (String newValue) {
                setState(() {
                  dropdown3Value = newValue;
                });
              },
              items: <String>[
                  'One', 'Two', 'Free', 'Four', 'Can', 'I', 'Have', 'A', 'Little',
                  'Bit', 'More', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'
                 ]
328
                .map<DropdownMenuItem<String>>((String value) {
329
                  return DropdownMenuItem<String>(
330
                    value: value,
331
                    child: Text(value),
332 333 334 335 336
                  );
                })
                .toList(),
             ),
          ),
337 338
        ],
      ),
339 340 341
    );
  }

342 343 344
  bool iconButtonToggle = false;

  Widget buildIconButton() {
345
    return Align(
346
      alignment: const Alignment(0.0, -0.2),
347
      child: Row(
348
        mainAxisSize: MainAxisSize.min,
349
        children: <Widget>[
350
          IconButton(
351 352 353 354
            icon: const Icon(
              Icons.thumb_up,
              semanticLabel: 'Thumbs up',
            ),
355 356 357
            onPressed: () {
              setState(() => iconButtonToggle = !iconButtonToggle);
            },
358
            color: iconButtonToggle ? Theme.of(context).primaryColor : null,
359
          ),
360
          const IconButton(
361
            icon: Icon(
362 363 364
              Icons.thumb_up,
              semanticLabel: 'Thumbs up',
            ),
365
            onPressed: null,
366 367
          )
        ]
368
        .map<Widget>((Widget button) => SizedBox(width: 64.0, height: 64.0, child: button))
369 370
        .toList(),
      ),
371 372 373
    );
  }

374
  Widget buildActionButton() {
375
    return Align(
376
      alignment: const Alignment(0.0, -0.2),
377
      child: FloatingActionButton(
378
        child: const Icon(Icons.add),
379 380
        onPressed: () {
          // Perform some action
381 382
        },
      ),
383 384 385
    );
  }
}