ej_selector 1.0.3 copy "ej_selector: ^1.0.3" to clipboard
ej_selector: ^1.0.3 copied to clipboard

A simple Item selector widget which uses dialog to select items.

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;
    });
 }
10
likes
140
pub points
60%
popularity

Publisher

verified publisherpacks.apexteam.net

A simple Item selector widget which uses dialog to select items.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on ej_selector