Flutter AppBar Basics with title, actions and PopupMenuButton

<p>In this example, we are going to see how to create a font-size: 1rem;](typical AppBar with a title, actions, and an overflow dropdown menu.font-size: 1rem;]( font-size: 1rem;](Here is how the final output is going to look like. This app 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.font-size: 1rem;]( font-size: 1rem;]( font-size: 1rem;]( ![](https://fluttercentral.com/Uploads/dbe51b4b-28e3-40f9-9344-36a57421c7b5.gifwidth="50%height="auto](</p> <p>Try this app out by creating a new project with <code>highlighter-rouge](flutter create</code> and replacing the contents of <code>highlighter-rouge](lib/main.dart</code> with the code below and run it.</p> <p id="569cd6;](this.icon" _selectedChoice="choice;" color:="">language-dart highlighter-rouge]( runApp(MyApp()); color: #569cd6;](class MyApp color: #569cd6;](extends StatefulWidget { color: #569cd6;](@override _MyAppState createState() => _MyAppState();} color: #569cd6;](class _MyAppState color: #569cd6;](extends State { Choice _selectedChoice = choices[color: #b5cea8;](0]; color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](var title = color: #ce9178;]("AppBar demo"; color: #569cd6;](return MaterialApp( title: title, home: Scaffold( appBar: AppBar( title: Text(title), actions: [ IconButton( icon: Icon(choices<a href="0%5D.icon">color: #b5cea8;</a>, onPressed: () { _select(choices<a href="0%5D">color: #b5cea8;</a>; }, ), IconButton( icon: Icon(choices<a href="1%5D.icon">color: #b5cea8;</a>, onPressed: () { _select(choices<a href="1%5D">color: #b5cea8;</a>; }, ), PopupMenuButton( onSelected: _select, itemBuilder: (BuildContext context) { color: #569cd6;](return choices.skip(color: #b5cea8;](2).map((Choice choice) { color: #569cd6;](return PopupMenuItem( value: choice, child: Text(choice.title) ); }).toList(); }, ), ], ), body: ChoiceCard(choice: _selectedChoice), ), ); } color: #569cd6;](void _select(Choice choice) { setState(() ); }} color: #569cd6;](class ChoiceCard color: #569cd6;](extends StatelessWidget { color: #569cd6;](final Choice choice; color: #569cd6;](const ChoiceCard({Key key, color: #569cd6;](this.choice}) : color: #569cd6;](super(key: key); color: #569cd6;](@override Widget build(BuildContext context) { color: #569cd6;](var textStyle = Theme.of(context).textTheme.display1; color: #569cd6;](return Padding( padding: color: #569cd6;](const EdgeInsets.all(color: #b5cea8;](0.0), child: Card( child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: <a href="128.0,"> Icon( choice.icon, size: color: #b5cea8;</a>, Text(choice.title, style: textStyle) ], ), ), ), ); }} color: #569cd6;](class Choice { color: #569cd6;](const Choice(); color: #569cd6;](final String title; color: #569cd6;](final IconData icon;} color: #569cd6;](const List choices = color: #569cd6;](const [ color: #569cd6;](const Choice(title: color: #ce9178;]('Car', icon: Icons.directions_car), color: #569cd6;](const Choice(title: color: #ce9178;]('Bicycle', icon: Icons.directions_bike), color: #569cd6;](const Choice(title: color: #ce9178;]('Boat', icon: Icons.directions_boat), color: #569cd6;](const Choice(title: color: #ce9178;]('Bus', icon: Icons.directions_bus), color: #569cd6;](const Choice(title: color: #ce9178;]('Train', icon: Icons.directions_railway), color: #569cd6;](const Choice(title: color: #ce9178;]('Walk', icon: Icons.directions_walk),]; font-size: 1rem;](Thanks, Srikanth</p>