Flutter AppBar Basics with title, actions and PopupMenuButton

This Article is posted by seven.srikanth at 21-07-2018 06:59:22

Click here to support us by Subscribing to our youtube channel.

In this example, we are going to see how to create a typical AppBar with a title, actions, and an overflow dropdown menu.
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.

Try this app out by creating a new project with flutter create and replacing the contents of lib/main.dart with the code below and run it.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Choice _selectedChoice = choices[0];
@override
Widget build(BuildContext context) {
var title = "AppBar demo";
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
actions: <Widget>[
IconButton(
icon: Icon(choices[0].icon),
onPressed: () {
_select(choices[0]);
},
),
IconButton(
icon: Icon(choices[1].icon),
onPressed: () {
_select(choices[1]);
},
),
PopupMenuButton<Choice>(
onSelected: _select,
itemBuilder: (BuildContext context) {
return choices.skip(2).map((Choice choice) {
return PopupMenuItem<Choice>(
value: choice,
child: Text(choice.title)
);
}).toList();
},
),
],
),
body: ChoiceCard(choice: _selectedChoice),
),
);
}
void _select(Choice choice) {
setState(() {
_selectedChoice = choice;
});
}
}
class ChoiceCard extends StatelessWidget {
final Choice choice;
const ChoiceCard({Key key, this.choice}) : super(key: key);
@override
Widget build(BuildContext context) {
var textStyle = Theme.of(context).textTheme.display1;
return Padding(
padding: const EdgeInsets.all(0.0),
child: Card(
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(
choice.icon,
size: 128.0,
),
Text(choice.title, style: textStyle)
],
),
),
),
);
}
}
class Choice {
const Choice({this.title, this.icon});
final String title;
final IconData icon;
}
const List<Choice> choices = const <Choice>[
const Choice(title: 'Car', icon: Icons.directions_car),
const Choice(title: 'Bicycle', icon: Icons.directions_bike),
const Choice(title: 'Boat', icon: Icons.directions_boat),
const Choice(title: 'Bus', icon: Icons.directions_bus),
const Choice(title: 'Train', icon: Icons.directions_railway),
const Choice(title: 'Walk', icon: Icons.directions_walk),
];
Thanks,
Srikanth

Tags: AppBar Basics; PopupMenuButton; Icons;


Click here to support us by Subscribing to our youtube channel.




0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




Wave animation in Flutter




Search Results





©2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com