https://github.com/LanarsInc/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. https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux
https://github.com/LanarsInc/direct-select-flutter
flutter flutter-ui flutter-ui-collection selection-widget widget
Last synced: 7 months ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/LanarsInc/direct-select-flutter
- Owner: LanarsInc
- License: bsd-2-clause
- Created: 2019-03-15T09:51:29.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-10T16:18:11.000Z (almost 2 years ago)
- Last Synced: 2024-07-31T15:01:34.834Z (over 1 year ago)
- Topics: flutter, flutter-ui, flutter-ui-collection, selection-widget, widget
- Language: Dart
- Size: 3.79 MB
- Stars: 762
- Watchers: 12
- Forks: 63
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Direct Select - 全屏模态弹出的选择小部件，由[Ivan Yatsouba](https://github.com/iyatsouba)创建。 (组件 / UI)
- awesome-flutter - Direct Select - 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 ` 📝 a month ago ` (UI [🔝](#readme))
- awesome-flutter - Direct Select - Selection widget with an ethereal, full-screen modal popup by [Ivan Yatsouba](https://github.com/iyatsouba). (Components / UI)
- fucking-awesome-flutter - Direct Select - Selection widget with an ethereal, full-screen modal popup by [Ivan Yatsouba](https://github.com/iyatsouba). (Components / UI)
- awesome-flutter-cn - Direct Select - 带幽灵效果的全屏选择器控件，[Ivan Yatsouba](https://github.com/iyatsouba). (组件 / UI)
README
# 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](https://dribbble.com/shots/3876250-DirectSelect-Dropdown-ux).
Made in [lanars.com](https://lanars.com).
[](https://pub.dev/packages/direct_select_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,
),
)
],
),
),
),
],
),
),
],
),
),
),
);
```