• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1// Copyright 2017 The Chromium Authors. All rights reserved.
2// Use of this source code is governed by a BSD-style license that can be
3// found in the LICENSE file.
4
5import 'package:flutter/material.dart';
6
7// This app is a stateful, it tracks the user's current choice.
8class BasicAppBarSample extends StatefulWidget {
9  @override
10  _BasicAppBarSampleState createState() => _BasicAppBarSampleState();
11}
12
13class _BasicAppBarSampleState extends State<BasicAppBarSample> {
14  Choice _selectedChoice = choices[0]; // The app's "state".
15
16  void _select(Choice choice) {
17    setState(() { // Causes the app to rebuild with the new _selectedChoice.
18      _selectedChoice = choice;
19    });
20  }
21
22  @override
23  Widget build(BuildContext context) {
24    return MaterialApp(
25      home: Scaffold(
26        appBar: AppBar(
27          title: const Text('Basic AppBar'),
28          actions: <Widget>[
29            IconButton( // action button
30              icon: Icon(choices[0].icon),
31              onPressed: () { _select(choices[0]); },
32            ),
33            IconButton( // action button
34              icon: Icon(choices[1].icon),
35              onPressed: () { _select(choices[1]); },
36            ),
37            PopupMenuButton<Choice>( // overflow menu
38              onSelected: _select,
39              itemBuilder: (BuildContext context) {
40                return choices.skip(2).map<PopupMenuItem<Choice>>((Choice choice) {
41                  return PopupMenuItem<Choice>(
42                    value: choice,
43                    child: Text(choice.title),
44                  );
45                }).toList();
46              },
47            ),
48          ],
49        ),
50        body: Padding(
51          padding: const EdgeInsets.all(16.0),
52          child: ChoiceCard(choice: _selectedChoice),
53        ),
54      ),
55    );
56  }
57}
58
59class Choice {
60  const Choice({ this.title, this.icon });
61  final String title;
62  final IconData icon;
63}
64
65const List<Choice> choices = <Choice>[
66  Choice(title: 'Car', icon: Icons.directions_car),
67  Choice(title: 'Bicycle', icon: Icons.directions_bike),
68  Choice(title: 'Boat', icon: Icons.directions_boat),
69  Choice(title: 'Bus', icon: Icons.directions_bus),
70  Choice(title: 'Train', icon: Icons.directions_railway),
71  Choice(title: 'Walk', icon: Icons.directions_walk),
72];
73
74class ChoiceCard extends StatelessWidget {
75  const ChoiceCard({ Key key, this.choice }) : super(key: key);
76
77  final Choice choice;
78
79  @override
80  Widget build(BuildContext context) {
81    final TextStyle textStyle = Theme.of(context).textTheme.display1;
82    return Card(
83      color: Colors.white,
84      child: Center(
85        child: Column(
86          mainAxisSize: MainAxisSize.min,
87          crossAxisAlignment: CrossAxisAlignment.center,
88          children: <Widget>[
89            Icon(choice.icon, size: 128.0, color: textStyle.color),
90            Text(choice.title, style: textStyle),
91          ],
92        ),
93      ),
94    );
95  }
96}
97
98void main() {
99  runApp(BasicAppBarSample());
100}
101
102/*
103Sample Catalog
104
105Title: AppBar Basics
106
107Summary: A basic AppBar with a title, actions, and an overflow dropdown menu.
108
109Description:
110An app that displays one of a half dozen choices with an icon and a title.
111The two most common choices are available as action buttons and the remaining
112choices are included in the overflow dropdown menu.
113
114Classes: AppBar, IconButton, PopupMenuButton, Scaffold
115
116Sample: BasicAppBarSample
117
118See also:
119  - The "Layout-Structure" section of the material design specification:
120    <https://material.io/guidelines/layout/structure.html#structure-app-bar>
121*/
122