direct select widget flutter

direct select is a selection widget with an ethereal, full-screen modal popup displaying the available choices when the widget is interact with.

ios

android

usage

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

create directselectcontainer and fill it with your data

scaffold(
      appbar: appbar,
      body: directselectcontainer(
        child: padding(
          padding: const edgeinsets.all(16.0),
          child: column(
            mainaxissize: mainaxissize.min,
            verticaldirection: verticaldirection.down,
            children: <widget>[
              sizedbox(height: 150.0),
              padding(
                padding: const edgeinsets.all(8.0),
                child: column(
                  children: <widget>[
                    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: <widget>[
                            expanded(
                                child: padding(
                                    child: 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)));
                                                     }),
                                    padding: edgeinsets.only(left: 12))),
                            padding(
                              padding: edgeinsets.only(right: 8),
                              child: icon(
                                icons.unfold_more,
                                color: colors.black38,
                              ),
                            )
                          ],
                        ),
                         ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );