#1 Allows you to scroll/directly select the value from the dropdown

directly select

this package allows you to scroll/directly select the value from the dropdown with less effort and time.

example project

there is an example project in the example folder. check it out. otherwise, keep reading to get up and running.

usage

sample 1 for directly select

import 'package:flutter/material.dart';
import 'package:direct_select/direct_select.dart';

class _myhomepagestate extends state<myhomepage> {
  final elements1 = [
    "breakfast",
    "lunch",
    "2nd snack",
    "dinner",
    "3rd snack",
  ];
  final elements2 = [
    "cheese steak",
    "chicken",
    "salad",
  ];

  final elements3 = [
    "7am - 10am",
    "11am - 2pm",
    "3pm - 6pm",
    "7pm-10pm",
  ];

  final elements4 = [
    "lose fat",
    "gain muscle",
    "keep in weight",
  ];

  int selectedindex1 = 0,
      selectedindex2 = 0,
      selectedindex3 = 0,
      selectedindex4 = 0;

  list<widget> _builditems1() {
    return elements1
        .map((val) => myselectionitem(
              title: val,
            ))
        .tolist();
  }

  list<widget> _builditems2() {
    return elements2
        .map((val) => myselectionitem(
              title: val,
            ))
        .tolist();
  }

  list<widget> _builditems3() {
    return elements3
        .map((val) => myselectionitem(
              title: val,
            ))
        .tolist();
  }

  list<widget> _builditems4() {
    return elements4
        .map((val) => myselectionitem(
              title: val,
            ))
        .tolist();
  }

  @override
  widget build(buildcontext context) {
    return scaffold(
      appbar: appbar(
        title: text(widget.title),
      ),
      body: padding(
        padding: const edgeinsets.all(15.0),
        child: center(
          child: column(
              mainaxisalignment: mainaxisalignment.start,
              crossaxisalignment: crossaxisalignment.stretch,
              children: <widget>[
                padding(
                  padding: const edgeinsets.only(left: 10.0),
                  child: text(
                    "to which meal?",
                    style: textstyle(
                        color: colors.grey, fontweight: fontweight.w500),
                  ),
                ),
                directselect(
                    itemextent: 35.0,
                    selectedindex: selectedindex1,
                    child: myselectionitem(
                      isforlist: false,
                      title: elements1[selectedindex1],
                    ),
                    onselecteditemchanged: (index) {
                      setstate(() {
                        selectedindex1 = index;
                      });
                    },
                    items: _builditems1()),
                padding(
                  padding: const edgeinsets.only(left: 10.0, top: 20.0),
                  child: text(
                    "search our database by name",
                    style: textstyle(
                        color: colors.grey, fontweight: fontweight.w500),
                  ),
                ),
                directselect(
                    itemextent: 35.0,
                    selectedindex: selectedindex2,
                    child: myselectionitem(
                      isforlist: false,
                      title: elements2[selectedindex2],
                    ),
                    onselecteditemchanged: (index) {
                      setstate(() {
                        selectedindex2 = index;
                      });
                    },
                    items: _builditems2()),
                padding(
                  padding: const edgeinsets.only(left: 10.0, top: 20.0),
                  child: text(
                    "select your workout schedule",
                    style: textstyle(
                        color: colors.grey, fontweight: fontweight.w500),
                  ),
                ),
                directselect(
                    itemextent: 35.0,
                    selectedindex: selectedindex3,
                    child: myselectionitem(
                      isforlist: false,
                      title: elements3[selectedindex3],
                    ),
                    onselecteditemchanged: (index) {
                      setstate(() {
                        selectedindex3 = index;
                      });
                    },
                    items: _builditems3()),
                padding(
                  padding: const edgeinsets.only(left: 10.0, top: 20.0),
                  child: text(
                    "select your goal",
                    style: textstyle(
                        color: colors.grey, fontweight: fontweight.w500),
                  ),
                ),
                directselect(
                    itemextent: 35.0,
                    selectedindex: selectedindex4,
                    child: myselectionitem(
                      isforlist: false,
                      title: elements4[selectedindex4],
                    ),
                    onselecteditemchanged: (index) {
                      setstate(() {
                        selectedindex4 = index;
                      });
                    },
                    items: _builditems4()),
              ]),
        ),
      ),
    );
  }
}

//you can use any widget
class myselectionitem extends statelesswidget {
  final string title;
  final bool isforlist;

  const myselectionitem({key key, this.title, this.isforlist = true})
      : super(key: key);

  @override
  widget build(buildcontext context) {
    return sizedbox(
      height: 60.0,
      child: isforlist
          ? padding(
              child: _builditem(context),
              padding: edgeinsets.all(10.0),
            )
          : card(
              margin: edgeinsets.symmetric(horizontal: 10.0),
              child: stack(
                children: <widget>[
                  _builditem(context),
                  align(
                    alignment: alignment.centerright,
                    child: icon(icons.arrow_drop_down),
                  )
                ],
              ),
            ),
    );
  }

  _builditem(buildcontext context) {
    return container(
      width: mediaquery.of(context).size.width,
      alignment: alignment.center,
      child: text(title),
    );
  }
}