Need help with direct-select-flutter?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

LanarsInc
381 Stars 52 Forks BSD 2-Clause "Simplified" License 91 Commits 4 Opened issues

Description

DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux

Services available

!
?

Need anything else?

Contributors list

# 216,238
Dart
Flutter
Kotlin
flutter...
49 commits
# 316,977
Dart
Flutter
Kotlin
flutter...
15 commits
# 166,511
react-n...
React N...
Redux
Kotlin
7 commits
# 402,675
Dart
Flutter
Kotlin
flutter...
6 commits
# 457,593
Dart
Flutter
Kotlin
flutter...
3 commits
# 101,686
Java
Shell
image-p...
React N...
2 commits
# 250,486
Vue.js
wysiwyg...
GraphQL
Shell
1 commit
# 557,599
Dart
Flutter
Kotlin
flutter...
1 commit

direct-select-flutter

DirectSelect is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with. Inspired by dribble shot.

Made in lanars.com.

pub package Awesome Flutter

iOS

Android

Usage

Create DirectSelectList and fill it with items using itemBuilder

dart
    final dsl = DirectSelectList(
        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
dart
  DirectSelectItem getDropDownMenuItem(String value) {
    return DirectSelectItem(
        itemHeight: 56,
        value: value,
        itemBuilder: (context, value) {
          return Text(value);
        });
  }
Create decorations for focused items
dart
   _getDslDecoration() {
    return BoxDecoration(
      border: BorderDirectional(
        bottom: BorderSide(width: 1, color: Colors.black12),
        top: BorderSide(width: 1, color: Colors.black12),
      ),
    );
  }
Create DirectSelectContainer and fill it with your data
dart
Scaffold(
      appBar: appBar,
      body: DirectSelectContainer(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            verticalDirection: VerticalDirection.down,
            children: [
              SizedBox(height: 150.0),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Column(
                  children: [
                    Container(
                      alignment: AlignmentDirectional.centerStart,
                      margin: EdgeInsets.only(left: 4),
                      child: Text("City"),
                    ),
                    Padding(
                      padding: const EdgeInsets.fromLTRB(0, 8, 0, 0),
                      child: Card(
                        child: Row(
                          mainAxisSize: MainAxisSize.max,
                          children: [
                            Expanded(
                                child: Padding(
                                    child: DirectSelectList(
                                                     values: _cities,
                                                     defaultItemIndex: 3,
                                                     itemBuilder: (String value) => getDropDownMenuItem(value),
                                                     focusedItemDecoration: _getDslDecoration(),
                                                     onItemSelectedListener: (item, index, context) {
                                                       Scaffold.of(context).showSnackBar(SnackBar(content: Text(item)));
                                                     }),
                                    padding: EdgeInsets.only(left: 12))),
                            Padding(
                              padding: EdgeInsets.only(right: 8),
                              child: Icon(
                                Icons.unfold_more,
                                color: Colors.black38,
                              ),
                            )
                          ],
                        ),
                         ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.