close

How to implement drop down list in flutter?

Image for post

How about we make a fundamental dropdown button

How about we make a shudder application and add a framework as the home screen as follows.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Tutorial",
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter tutorial"),
      ),
      body: Text(
        "Hi",
      ),
    );
  }
}

StatefulWidgets are where we can change the qualities on the interface at runtime and StatelessWidgets are where the estimations of the interface can’t be changed at the run time. For the model the StatefulWidget is utilized as we need to change the incentive on the interface. Platform is utilized as a foundation for this model. Following is the review of the above code.

Image for post
Basic home screen preview

We should add a fundamental dropdown catch to the screen.

In the accompanying code the DropdownButton is wrapped inside a Container gadget to add cushioning and there are a few gadgets you can use to add cushioning to the youngster DropdownButton gadget. In DropdownButton Widget there are numerous traits however for the present after qualities are being utilized.

  1. things This is the place where the components of the DropdownButton gadget is added as rundown of DropdownMenuItem gadgets which are having a worth quality, kid trait which are utilizing here and some more.
  2. esteem This is the place where the pointer which holds the presentation estimation of the DropdownButton gadget.
  3. onChange This is the one of required boundary separated from the things characteristic and when client click one of the DropdownMenuItem this will trigger and execute the capacity appointed.

Following is the essential drop down catch model

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Tutorial",
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  int _value = 1;

  @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("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;
                });
              }),
        ));
  }
}

As you see the private variable is doled out as _value to point and store the present status of the DropdownButton gadget. The present status of the _value is changed once the client changed the estimation of the dropdown and afterward the capacity at the onChange property is set off. On the off chance that somebody needs to change the current status of the variable at the runtime then setState capacity should be changed. When a worth changed all the gadgets having that worth will re-render. Following is the review of the above code.

Image for post
Basic dropdown button preview
Image for post
Basic dropdown button list preview

How about we get dropdown components from a rundown

A few cases the dropdown things can’t be hardcoded possibly it is recovered structure an API or as items. How about we perceive how this can be executed. First lets make a straightforward class to make listItem objects for the dropdown menu.

class ListItem {
  int value;
  String name;

  ListItem(this.value, this.name);
}

Above class will accept worth and name as boundaries and for the model getter and setters and not actualized since this is for clarifying purposes. First the _dropdownItems ItemList is made utilizing ItemList articles and afterward buildDropDownMenuItems work the DropdownMenuItem list is made. At the point when the gadget mount utilizing init work which called from the outset DropdownButton thing list and the worth is set utilizing _dropdownMenuItems and _selectedItem variable.

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: "Tutorial",
      home: Home(),
    ));

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List<ListItem> _dropdownItems = [
    ListItem(1, "First Value"),
    ListItem(2, "Second Item"),
    ListItem(3, "Third Item"),
    ListItem(4, "Fourth Item")
  ];

  List<DropdownMenuItem<ListItem>> _dropdownMenuItems;
  ListItem _selectedItem;

  void initState() {
    super.initState();
    _dropdownMenuItems = buildDropDownMenuItems(_dropdownItems);
    _selectedItem = _dropdownMenuItems[0].value;

  }

  List<DropdownMenuItem<ListItem>> buildDropDownMenuItems(List listItems) {
    List<DropdownMenuItem<ListItem>> items = List();
    for (ListItem listItem in listItems) {
      items.add(
        DropdownMenuItem(
          child: Text(listItem.name),
          value: listItem,
        ),
      );
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dropdown Button"),
      ),
      body: Container(
        padding: EdgeInsets.all(20.0),
        child: DropdownButton<ListItem>(
            value: _selectedItem,
            items: _dropdownMenuItems,
            onChanged: (value) {
              setState(() {
                _selectedItem = value;
              });
            }),
      ),
    );
  }
}

How about we Remove the underline of the DropdownButton

The underline at the lower part of the DropdownButton gadget can be eliminated wrapping the DropdownButton gadget utilizing DropdownButtonHideUnderline gadget

Image for post
After removing the underline

Add some styling for dropdown button

The fundamental styling for dropdown catch should be possible utilizing style characteristic of the DropdownButton gadget and other than that visitors and foundation tones can be added wrapping the DropdownButton gadget utilizing Container gadget and afterward styling the Container gadget as follows.

Image for post
After adding boarder and background colour
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Dropdown Button"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              color: Colors.cyan,
              border: Border.all()),
          child: DropdownButtonHideUnderline(
            child: DropdownButton(
                value: _selectedItem,
                items: _dropdownMenuItems,
                onChanged: (value) {
                  setState(() {
                    _selectedItem = value;
                  });
                }),
          ),
        ),
      ),
    );
  }

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment