// 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() => _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 MaterialApp( home: Scaffold( appBar: AppBar( title: const Text('Basic AppBar'), actions: <Widget>[ IconButton( // action button icon: Icon(choices[0].icon), onPressed: () { _select(choices[0]); }, ), IconButton( // action button icon: Icon(choices[1].icon), onPressed: () { _select(choices[1]); }, ), PopupMenuButton<Choice>( // overflow menu onSelected: _select, itemBuilder: (BuildContext context) { return choices.skip(2).map<PopupMenuItem<Choice>>((Choice choice) { return PopupMenuItem<Choice>( value: choice, child: Text(choice.title), ); }).toList(); }, ), ], ), body: Padding( padding: const EdgeInsets.all(16.0), child: 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 Card( color: Colors.white, child: Center( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: <Widget>[ Icon(choice.icon, size: 128.0, color: textStyle.color), Text(choice.title, style: textStyle), ], ), ), ); } } void main() { runApp(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> */