Filter by Widgets


Flutter AppBar Basics with title, actions and PopupMenuButton

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


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
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.




Recent articles

Horizontal List View

Check out this article on Horizontal List View

Read full post

How to get the Width and Height of the Screen in Flutter?

Check out this article on How to get the Width and Height of the Screen in Flutter?

Read full post

How to add a Footer Buttons in Flutter?

Check out this article on How to add a Footer Buttons in Flutter?

Read full post

TextField in Flutter

Check out this article on TextField in Flutter

Read full post

How to Draw a Triangle using Canvas in Flutter?

Check out this article on How to Draw a Triangle using Canvas in Flutter?

Read full post

url_launcher Package - Lets Launch URL, Send Email, Make Call or Send SMS in Flutter

Check out this article on url_launcher Package - Lets Launch URL, Send Email, Make Call or Send SMS in Flutter

Read full post

Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Check out this article on Error: The name 'RangeSlider' is defined in the libraries 'package:flutter/src/material/range_slider.dart' and 'package:flutter_range_slider/src/flutter_range_slider.dart'.

Read full post

How to create a persistent bottom sheet in Flutter?

Check out this article on How to create a persistent bottom sheet in Flutter?

Read full post

How to draw a Decorative Horizontal line in Flutter?

Check out this article on How to draw a Decorative Horizontal line in Flutter?

Read full post

How to fetch an Image from Internet in Flutter

Check out this article on How to fetch an Image from Internet in Flutter

Read full post

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

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License , and code samples are licensed under the BSD License.