Model popup Drop down Selections in Flutter

DirectSelect is a awesome dropdown selection widget with full screen model popup showing the available options when we click on Direct select widget. This is another freeware library hosted in Github, so you can download it free of cost.

This widget is inspired from dribble shot.

Demo

iOS

Android

Installation

Add following to your package’s pubspec.yaml file:
Check following url to get latest version on Pub and replace below section

dependencies:
  direct_select_flutter: ^1.0.7

After save the direct_select_flutter packages are automatically downloaded and included into your project.

Import

The next step import this library to your dart file. for that you can use following syntax .

import 'package:direct_select_flutter/direct_select_container.dart';
import 'package:direct_select_flutter/direct_select_item.dart';
import 'package:direct_select_flutter/direct_select_list.dart';

Example

Create DirectSelectList and fill it with items using itemBuilder

    final dsl = DirectSelectList<String>(
        values: _cities,
        defaultItemIndex: 3,
        itemBuilder: (String value) => getDropDownMenuItem(value),
        focusedItemDecoration: _getDslDecoration(),
        onItemSelectedListener: (item, index, context) {
          Scaffold.of(context).showSnackBar(SnackBar(content: Text(item)));
        });

Create items like this

  DirectSelectItem<String> getDropDownMenuItem(String value) {
    return DirectSelectItem<String>(
        itemHeight: 56,
        value: value,
        itemBuilder: (context, value) {
          return Text(value);
        });
  }

Create decorations for focused items

  _getDslDecoration() {
   return BoxDecoration(
     border: BorderDirectional(
       bottom: BorderSide(width: 1, color: Colors.black12),
       top: BorderSide(width: 1, color: Colors.black12),
     ),
   );
 }

Follow the below Source code for full and complete sample implementation.