CODEWITHSUNDEEP
flutterdropdownbutton
Lura
Lura

Reputation: 109

Flutter: how to use DropDownButton?

i'm trying to build a DropdownButton widget of multiple elements, but I'm miserably failing even if I read multiple tutorials on the Internet.

How can I go about creating a simple DropdownButton of 4 elements ?

Thanks for your time

Here's what I tried:

import 'package:flutter/material.dart';

class ForgotPassScreen extends StatefulWidget {
  @override
  _ForgotPassScreenState createState() => _ForgotPassScreenState();
}

class _ForgotPassScreenState extends State<ForgotPassScreen> {
  int _value = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Dropdown Button"),
        ),
        body: Container(
          padding: EdgeInsets.all(20.0),
          child: DropdownButton(
              value: _value,
              items: [
                DropdownMenuItem(
                  child: Text("Item 0"),
                  value: 0,
                ),
                DropdownMenuItem(
                  child: Text("First Item"),
                  value: 1,
                ),
                DropdownMenuItem(
                  child: Text("Second Item"),
                  value: 2,
                ),
                DropdownMenuItem(
                  child: Text("Third Item"),
                  value: 3,
                ),
                DropdownMenuItem(
                  child: Text("Fourth Item"),
                  value: 4,
                )
              ],
              onChanged: (value) {
                setState(() {
                  _value = value;
                });
              }),
        ));
  }
}

Upvotes: 0

Views: 170

Answers (1)

Siddharth Agrawal
Siddharth Agrawal

Reputation: 3146

So this code has basically 3 parts to it. First is the object which stores the icon and the title. The second is the list of these objects, you can have as many as you want. And third is the button itself which constructs the boxes
OBJECT

class Choice {
  const Choice({this.title, this.icon});

  final String title;
  final IconData icon;
}

LIST

List<Choice> choices = <Choice>[
      const Choice(title: 'Profile', icon: Icons.account_circle),
      const Choice(title:"Log in", icon: Icons.exit_to_app),
    ]

POPUP BUTTON

          PopupMenuButton<Choice>(
            color:Colors.white,
            onSelected: onItemMenuPress,
            itemBuilder: (BuildContext context) {
              return choices.map((Choice choice) {
                return PopupMenuItem<Choice>(
                    value: choice,
                    child: Row(
                      children: <Widget>[
                        Icon(
                          choice.icon,
                          color:Colors.black
                        ),
                        Container(
                          width: 10.0,
                        ),
                        Text(
                          choice.title,
                          style: TextStyle(),
                        ),
                      ],
                    ));
              }).toList();
            },
          )

This is the best way to create the button as you can modify it without having to change every single piece of code

Upvotes: 1

Related Questions