EJ Selector Button

A flutter widget that works like dropdown button, except that instead of opening the dropdown to select items, it opens a dialog. Also, You can customize its button and items. Or you can show dialog for selecting item using showEJDialog.

Usage

You can customize EJSelectorButton or use its string factory which is less customizable and easier to use.

EJSelectorButton.string(
  items: List.generate(10, (index) => 'item $index'),
  hint: 'Choose',
  useValue: false,
  divider: Divider(),
  textStyle: TextStyle(fontSize: 18),
  suffix: Icon(Icons.arrow_drop_down),
)

final items = <ItemModel>[
  ItemModel(1, 'First Item'),
  ItemModel(2, 'Second Item'),
  ItemModel(3, 'Third Item'),
  ItemModel(4, 'Forth Item'),
  ItemModel(5, 'Fifth Item'),
];

EJSelectorButton<ItemModel>(
 useValue: false,
 hint: Text(
    'Click to choose',
    style: TextStyle(fontSize: 16, color: Colors.black),
 ),
 buttonBuilder: (child, value) => Container(
  alignment: Alignment.center,
  height: 60,
  width: 150,
  decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(4),
  color: Colors.white,
 ),
 child: value != null
      ? Text(
         value.name,
         style: TextStyle(fontSize: 16, color: Colors.black),
        )
      : child,
 ),
 selectedWidgetBuilder: (valueOfSelected) => Container(
  padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
  child: Text(
     valueOfSelected.name,
     style: TextStyle(fontSize: 20, color: Colors.blue),
    ),
 ),
 items: items
     .map(
       (item) => EJSelectorItem(
        value: item,
        widget: Container(
        padding:
           const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
        child: Text(
         item.name,
         style: TextStyle(fontSize: 16),
        ),
      ),
     ),
    ).toList(),
)

class ItemModel {
  ItemModel(this.id, this.name);

  final int id;
  final String name;
}

Using as Function

final s = await showEJDialog<int>(
     context: context,
     selected: selectedId,
     selectedWidgetBuilder: (selectedId) => Container(
     padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 32),
     child: Text(
     items.firstWhere((item) => item.id == selectedId).name,
     style: TextStyle(fontSize: 20, color: Colors.blue),
    ),
 ),
    items: items
        .map(
          (item) => EJSelectorItem(
             value: item.id,
             widget: Container(
             padding: const EdgeInsets.symmetric(
             vertical: 16, horizontal: 32),
             child: Text(
                item.name,
                style: TextStyle(fontSize: 16),
               ),
            ),
         ),
      ) .toList(),
);
if (s != null) {
     setState(() {
     selectedId = s.value;
    });
 }