buttons_demo.dart 11.1 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 53 54 55
  _ButtonsDemoState createState() => new _ButtonsDemoState();
}

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 66 67
      new ComponentDemoTabData(
        tabName: 'RAISED',
        description: _raisedText,
68 69 70 71
        demoWidget: new ButtonTheme.fromButtonThemeData(
          data: buttonTheme,
          child: buildRaisedButton(),
        ),
72
        exampleCodeTag: _raisedCode,
73 74 75 76
      ),
      new ComponentDemoTabData(
        tabName: 'FLAT',
        description: _flatText,
77 78 79 80
        demoWidget: new ButtonTheme.fromButtonThemeData(
          data: buttonTheme,
          child: buildFlatButton(),
        ),
81
        exampleCodeTag: _flatCode,
82
      ),
83 84 85
      new ComponentDemoTabData(
        tabName: 'OUTLINE',
        description: _outlineText,
86 87 88 89
        demoWidget: new ButtonTheme.fromButtonThemeData(
          data: buttonTheme,
          child: buildOutlineButton(),
        ),
90 91
        exampleCodeTag: _outlineCode,
      ),
92 93 94
      new ComponentDemoTabData(
        tabName: 'DROPDOWN',
        description: _dropdownText,
95
        demoWidget: buildDropdownButton(),
96
        exampleCodeTag: _dropdownCode,
97 98 99 100
      ),
      new ComponentDemoTabData(
        tabName: 'ICON',
        description: _iconText,
101
        demoWidget: buildIconButton(),
102
        exampleCodeTag: _iconCode,
103 104 105 106
      ),
      new ComponentDemoTabData(
        tabName: 'ACTION',
        description: _actionText,
107
        demoWidget: buildActionButton(),
108
        exampleCodeTag: _actionCode,
109
      ),
110 111
    ];

112 113
    return new TabbedComponentDemoScaffold(
      title: 'Buttons',
114
      demos: demos,
115 116 117 118 119 120 121 122 123 124
      actions: <Widget>[
        new IconButton(
          icon: const Icon(Icons.sentiment_very_satisfied),
          onPressed: () {
            setState(() {
              _buttonShape = _buttonShape == null ? const StadiumBorder() : null;
            });
          },
        ),
      ],
125 126 127
    );
  }

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

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

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

257 258
  // https://en.wikipedia.org/wiki/Free_Four
  String dropdown1Value = 'Free';
259 260
  String dropdown2Value;
  String dropdown3Value = 'Four';
261 262

  Widget buildDropdownButton() {
263 264 265 266 267
    return new Padding(
      padding: const EdgeInsets.all(24.0),
      child: new Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
268
          new ListTile(
269
            title: const Text('Simple dropdown:'),
270
            trailing: new DropdownButton<String>(
271 272 273
              value: dropdown1Value,
              onChanged: (String newValue) {
                setState(() {
274
                  dropdown1Value = newValue;
275 276
                });
              },
277 278 279 280 281 282 283
              items: <String>['One', 'Two', 'Free', 'Four'].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              }).toList(),
            ),
284
          ),
285
          const SizedBox(
286
            height: 24.0,
287
          ),
288
          new ListTile(
289
            title: const Text('Dropdown with a hint:'),
290
            trailing: new DropdownButton<String>(
291
              value: dropdown2Value,
292
              hint: const Text('Choose'),
293 294
              onChanged: (String newValue) {
                setState(() {
295
                  dropdown2Value = newValue;
296 297
                });
              },
298 299 300 301 302 303 304
              items: <String>['One', 'Two', 'Free', 'Four'].map((String value) {
                return new DropdownMenuItem<String>(
                  value: value,
                  child: new Text(value),
                );
              }).toList(),
            ),
305
          ),
306
          const SizedBox(
307 308
            height: 24.0,
          ),
309
          new ListTile(
310
            title: const Text('Scrollable dropdown:'),
311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330
            trailing: new DropdownButton<String>(
              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'
                 ]
                .map((String value) {
                  return new DropdownMenuItem<String>(
                    value: value,
                    child: new Text(value),
                  );
                })
                .toList(),
             ),
          ),
331 332
        ],
      ),
333 334 335
    );
  }

336 337 338 339
  bool iconButtonToggle = false;

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

368 369
  Widget buildActionButton() {
    return new Align(
370
      alignment: const Alignment(0.0, -0.2),
371
      child: new FloatingActionButton(
372
        child: const Icon(Icons.add),
373 374
        onPressed: () {
          // Perform some action
375 376
        },
      ),
377 378 379
    );
  }
}