| // Copyright 2017 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'; |
| |
| // This app is a stateful, it tracks the user's current choice. |
| class BasicAppBarSample extends StatefulWidget { |
| @override |
| _BasicAppBarSampleState createState() => new _BasicAppBarSampleState(); |
| } |
| |
| class _BasicAppBarSampleState extends State<BasicAppBarSample> { |
| Choice _selectedChoice = choices[0]; // The app's "state". |
| |
| void _select(Choice choice) { |
| setState(() { // Causes the app to rebuild with the new _selectedChoice. |
| _selectedChoice = choice; |
| }); |
| } |
| |
| @override |
| Widget build(BuildContext context) { |
| return new MaterialApp( |
| home: new Scaffold( |
| appBar: new AppBar( |
| title: const Text('Basic AppBar'), |
| actions: <Widget>[ |
| new IconButton( // action button |
| icon: new Icon(choices[0].icon), |
| onPressed: () { _select(choices[0]); }, |
| ), |
| new IconButton( // action button |
| icon: new Icon(choices[1].icon), |
| onPressed: () { _select(choices[1]); }, |
| ), |
| new PopupMenuButton<Choice>( // overflow menu |
| onSelected: _select, |
| itemBuilder: (BuildContext context) { |
| return choices.skip(2).map((Choice choice) { |
| return new PopupMenuItem<Choice>( |
| value: choice, |
| child: new Text(choice.title), |
| ); |
| }).toList(); |
| }, |
| ), |
| ], |
| ), |
| body: new Padding( |
| padding: const EdgeInsets.all(16.0), |
| child: new ChoiceCard(choice: _selectedChoice), |
| ), |
| ), |
| ); |
| } |
| } |
| |
| class Choice { |
| const Choice({ this.title, this.icon }); |
| final String title; |
| final IconData icon; |
| } |
| |
| const List<Choice> choices = <Choice>[ |
| Choice(title: 'Car', icon: Icons.directions_car), |
| Choice(title: 'Bicycle', icon: Icons.directions_bike), |
| Choice(title: 'Boat', icon: Icons.directions_boat), |
| Choice(title: 'Bus', icon: Icons.directions_bus), |
| Choice(title: 'Train', icon: Icons.directions_railway), |
| Choice(title: 'Walk', icon: Icons.directions_walk), |
| ]; |
| |
| class ChoiceCard extends StatelessWidget { |
| const ChoiceCard({ Key key, this.choice }) : super(key: key); |
| |
| final Choice choice; |
| |
| @override |
| Widget build(BuildContext context) { |
| final TextStyle textStyle = Theme.of(context).textTheme.display1; |
| return new Card( |
| color: Colors.white, |
| child: new Center( |
| child: new Column( |
| mainAxisSize: MainAxisSize.min, |
| crossAxisAlignment: CrossAxisAlignment.center, |
| children: <Widget>[ |
| new Icon(choice.icon, size: 128.0, color: textStyle.color), |
| new Text(choice.title, style: textStyle), |
| ], |
| ), |
| ), |
| ); |
| } |
| } |
| |
| void main() { |
| runApp(new BasicAppBarSample()); |
| } |
| |
| /* |
| Sample Catalog |
| |
| Title: AppBar Basics |
| |
| Summary: A basic AppBar with a title, actions, and an overflow dropdown menu. |
| |
| Description: |
| An app that displays one of a half dozen choices with an icon and a title. |
| The two most common choices are available as action buttons and the remaining |
| choices are included in the overflow dropdown menu. |
| |
| Classes: AppBar, IconButton, PopupMenuButton, Scaffold |
| |
| Sample: BasicAppBarSample |
| |
| See also: |
| - The "Layout-Structure" section of the material design specification: |
| <https://material.io/guidelines/layout/structure.html#structure-app-bar> |
| */ |