You can use PopUpMenuButton inside AppBar action. The functionality is achieved in my example code below. You can paste it in your main.dart file and run.
Working code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Hello World'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var language = 'english';
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(title: new Text(widget.title), actions: <Widget>[
PopupMenuButton(
child: Row(
children: [
Text('$language | '),
Icon(
Icons.keyboard_arrow_down,
color: Colors.white,
)
],
),
onSelected: (value) {
setState(() {
language = value;
});
print(value);
},
itemBuilder: (_) {
return [
PopupMenuItem(
value: '',
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'change language',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
fontSize: 14,
),
),
Icon(
Icons.keyboard_arrow_up,
color: Colors.black,
)
],
),
Divider(
color: Colors.grey,
thickness: 2,
),
],
)),
PopupMenuItem(
value: 'english',
child: Text(
'english',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
fontSize: 14,
color:
language == 'english' ? Colors.blue : Colors.black),
),
),
PopupMenuItem(
value: 'espanol',
child: Text(
'espanol',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
fontSize: 14,
color:
language == 'espanol' ? Colors.blue : Colors.black),
),
),
PopupMenuItem(
value: 'nederlands',
child: Text(
'nederlands',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
fontSize: 14,
color: language == 'nederlands'
? Colors.blue
: Colors.black),
),
),
PopupMenuItem(
value: 'polski',
child: Text(
'polski',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.w500,
fontSize: 14,
color: language == 'polski' ? Colors.blue : Colors.black),
),
),
];
},
),
const SizedBox(
width: 12,
)
]),
body: new Center(
child: Text('DEMO'),
),
);
}
}
CLICK HERE to find out more related problems solutions.