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.