Programming

How To Create A Drop Down Menu List In Flutter

This dropdown menu list in flutter is simply a clickable object that allows you to display all the list of items, whereby if clicked, It simply allows you to navigate to another route or it performs a certain action which it was ordered to do.

How does it work? See it as having lots of options to choose from, and you can only choose one. Let’s say you have the [HOME, ABOUT, CONTACT US, SERVICES] list, and each and every one of them all have their route. You could easily navigate through any of them by using the Flutter Drop Down Menu List. After pressing the drop-down button, it simply displays a drop-down menu with all other lists, from which the user can select a new one.

So, in this article, we would build you a Flutter test application where there would be a list of drop-down menu, and it would also give the ability to select your preferred item from the drop-down list. If you’ve been searching for a solution to that drop-down list problem of error in flutter, This option would do a better work/job for you.

Here’s what we’ll be creating below.

Create A New Project

Firstly, As usual – Create a new project on your IDE, and get ready to work. You can also create a new project via your terminal below in VS Code. We wouldn’t be importing any flutter package this time.

After creating your project, do well to edit the theme (optional), and set the debugBanner to “false” (optional).

Create Custom Class items

This custom class item would carry both the name and icon parameters (icon is optional) that’ll store the object of one item of dropdown list.

class ListItem {
  const Item(this.name,this.icon);
  final String itemName;
  final Icon itemIcon;
}

Apply Your Code & Create Your Drop Down Menu List

Now, returning to your main.dart, Use the follow code and edit it to the way you want it to be.

import 'package:flutter/material.dart';
void main() {
  runApp( MaterialApp(
    debugShowCheckedModeBanner: false,
    theme:  ThemeData(
      primaryColor: Colors.red,
     // primaryColorDark: const Color(0xFF167F67),
      accentColor: Colors.black,
    ),
    home:  DropdownHome(),
  ));
}
class Item {
  const Item(this.name,this.icon);
  final String name;
  final Icon icon;
}


class DropdownHome extends StatefulWidget {
  State createState() =>  DropdownHomeState();
}
class DropdownHomeState extends State<DropdownHome> {
  Item selectedUser;
  List<Item> users = <Item>[
    const Item('Google',Icon(Icons.golf_course,color: Colors.red,)),
    const Item('Microsoft',Icon(Icons.home, color: Colors.red,)),
    const Item('Facebook',Icon(Icons.redeem,color: Colors.red,)),
    const Item('Twitter',Icon(Icons.not_interested, color: Colors.red,)),
  ];
  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      home:  Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
          title: Text(
            'Demo Dropdown Menu Option',
            style: TextStyle(color: Colors.white),
          ),
        ),
        body:  Center(
          child:  DropdownButton<Item>(
            hint:  Text("Select item"),
            value: selectedUser,
            onChanged: (Item Value) {
              setState(() {
                selectedUser = Value;
              });
            },
            items: users.map((Item user) {
              return  DropdownMenuItem<Item>(
                value: user,
                child: Row(
                  children: <Widget>[
                    user.icon,
                    SizedBox(width: 10,),
                    Text(
                      user.name,
                      style:  TextStyle(color: Colors.black),
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ),
      ),
    );
  }
}

Also note that we created a list of items in the above code, where we added the item name, color, and Icon. We then called it in the users.map below the code.
Implementing this code just the way it is seen above would result in what you were expecting. If you still encounter errors after doing it this way above, kindly drop a comment below, and we would get to you as soon as we can.

The video below can also be of great help, Just follow the steps, and You would create an amazing DropDownButton

Leave a Reply

Your email address will not be published. Required fields are marked *

Adblock Detected - We work so hard to bring You great content-- Please disable Adblocker to browse our site

It seems you're using an Adblocker, Please disable it to get this access to this file.