how can you create a dropdown menu in flutter?

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.

Leave a Comment

Your email address will not be published.

Scroll to Top