Creating Dropdown in Flutter using Generics | Jetstudy the ultimate blog

I will show you how to create a dropdown with list of values in flutter.

There is already a widget for that which is DropdownButton() it also have item property which is list of widget in that item we will add list of DropdownMenuItem like below.

i will give you a practical example of using dropdown, first i will create a custom widget which will return DropdownButton so that we can use same widget at a multiple location.

You need to create a model class for showing data into dropdown. i will use generic dropdown so that it will work with anykind of model class.

lets first create a model class of users.


class Users {
  final int id;
  final String username;
  final String fullName;

  Users({
    required this.id,
    required this.username,
    required this.fullName,
  });

  @override
  String toString() {
    // TODO: implement toString
    return this.fullName;
  }
}

make sure toString() method is defined because we are using that methods return type to show text in DropdownItem.

Now create a statefull widget in widgets folder with name CustomDropdown.

i will give you all code below for custom dropdown.

widgets/custom_dropdown.dart

import 'package:flutter/material.dart';

class CustomDropdown<T> extends StatefulWidget {
  const CustomDropdown(
      {Key? key,
      required this.modelList,
      required this.model,
      required this.callback})
      : super(key: key);
  final List<T?> modelList;
  final T? model;
  final Function(T?) callback;

  @override
  State<CustomDropdown<T>> createState() => _CustomDropdownState<T>();
}

class _CustomDropdownState<T> extends State<CustomDropdown<T>> {
  T? labour;

  @override
  void initState() {
    labour = widget.model;
  }

  @override
  Widget build(BuildContext context) {
    print(widget.modelList);
    return Container(
      child: DropdownButton<T>(
        underline: const SizedBox(),
        elevation: 0,
        isDense: true,
        hint: const Text("Select "),
        value: labour,
        items: widget.modelList.map((T? value) {
          return DropdownMenuItem<T>(
            value: value,
            child: Text(value.toString()),
          );
        }).toList(),
        onChanged: (val) {
          widget.callback(val);
          setState(() {
            labour = val;
          });
        },
      ),
    );
  }
}

I have used generics to make it compatible with anykind of model class.

I can use it with any model class like below


List<Users?> usersArr = [
Users(id: 1, username: "abc", fullName: "ABC"),
Users(id: 2, username: "xyz", fullName: "XYZ"),
];
CustomDropdown<Users>(
                modelList: usersArr,
                model: usersArr[0],
                callback: (user) {
                  print(user);
                });

with the help of generics you can create many custom widgets which will be very helpfull for others as well.

if you have any doubt please comment.

creating dropdown in flutter with generics#