|
|
|
|
@ -10,10 +10,11 @@ class Picker<Item extends Object> extends StatefulWidget {
|
|
|
|
|
Picker({
|
|
|
|
|
@required this.selectedAtIndex,
|
|
|
|
|
@required this.items,
|
|
|
|
|
this.images,
|
|
|
|
|
@required this.title,
|
|
|
|
|
this.description,
|
|
|
|
|
@required this.onItemSelected,
|
|
|
|
|
this.displayItem,
|
|
|
|
|
this.images,
|
|
|
|
|
this.description,
|
|
|
|
|
this.mainAxisAlignment = MainAxisAlignment.start,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
@ -24,6 +25,7 @@ class Picker<Item extends Object> extends StatefulWidget {
|
|
|
|
|
final String description;
|
|
|
|
|
final Function(Item) onItemSelected;
|
|
|
|
|
final MainAxisAlignment mainAxisAlignment;
|
|
|
|
|
final String Function(Item) displayItem;
|
|
|
|
|
|
|
|
|
|
@override
|
|
|
|
|
PickerState createState() => PickerState<Item>(items, images, onItemSelected);
|
|
|
|
|
@ -36,7 +38,8 @@ class PickerState<Item> extends State<Picker> {
|
|
|
|
|
final List<Item> items;
|
|
|
|
|
final List<Image> images;
|
|
|
|
|
|
|
|
|
|
final closeButton = Image.asset('assets/images/close.png',
|
|
|
|
|
final closeButton = Image.asset(
|
|
|
|
|
'assets/images/close.png',
|
|
|
|
|
color: Palette.darkBlueCraiola,
|
|
|
|
|
);
|
|
|
|
|
ScrollController controller = ScrollController();
|
|
|
|
|
@ -49,7 +52,9 @@ class PickerState<Item> extends State<Picker> {
|
|
|
|
|
Widget build(BuildContext context) {
|
|
|
|
|
controller.addListener(() {
|
|
|
|
|
fromTop = controller.hasClients
|
|
|
|
|
? (controller.offset / controller.position.maxScrollExtent * (backgroundHeight - thumbHeight))
|
|
|
|
|
? (controller.offset /
|
|
|
|
|
controller.position.maxScrollExtent *
|
|
|
|
|
(backgroundHeight - thumbHeight))
|
|
|
|
|
: 0;
|
|
|
|
|
setState(() {});
|
|
|
|
|
});
|
|
|
|
|
@ -58,134 +63,142 @@ class PickerState<Item> extends State<Picker> {
|
|
|
|
|
|
|
|
|
|
return AlertBackground(
|
|
|
|
|
child: Stack(
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
Column(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
Column(
|
|
|
|
|
mainAxisSize: MainAxisSize.min,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
Container(
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24),
|
|
|
|
|
child: Text(
|
|
|
|
|
widget.title,
|
|
|
|
|
textAlign: TextAlign.center,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
color: Colors.white
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24, top: 24),
|
|
|
|
|
child: GestureDetector(
|
|
|
|
|
onTap: () => null,
|
|
|
|
|
child: ClipRRect(
|
|
|
|
|
borderRadius: BorderRadius.all(Radius.circular(14)),
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 233,
|
|
|
|
|
color: Theme.of(context).accentTextTheme.title.color,
|
|
|
|
|
child: Stack(
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
ListView.separated(
|
|
|
|
|
padding: EdgeInsets.all(0),
|
|
|
|
|
controller: controller,
|
|
|
|
|
separatorBuilder: (context, index) => Divider(
|
|
|
|
|
color: Theme.of(context).accentTextTheme.title.backgroundColor,
|
|
|
|
|
height: 1,
|
|
|
|
|
),
|
|
|
|
|
itemCount: items == null ? 0 : items.length,
|
|
|
|
|
itemBuilder: (context, index) {
|
|
|
|
|
final item = items[index];
|
|
|
|
|
final image = images != null? images[index] : null;
|
|
|
|
|
final isItemSelected = index == widget.selectedAtIndex;
|
|
|
|
|
Container(
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24),
|
|
|
|
|
child: Text(
|
|
|
|
|
widget.title,
|
|
|
|
|
textAlign: TextAlign.center,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
fontWeight: FontWeight.bold,
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
color: Colors.white),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24, top: 24),
|
|
|
|
|
child: GestureDetector(
|
|
|
|
|
onTap: () => null,
|
|
|
|
|
child: ClipRRect(
|
|
|
|
|
borderRadius: BorderRadius.all(Radius.circular(14)),
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 233,
|
|
|
|
|
color: Theme.of(context).accentTextTheme.title.color,
|
|
|
|
|
child: Stack(
|
|
|
|
|
alignment: Alignment.center,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
ListView.separated(
|
|
|
|
|
padding: EdgeInsets.all(0),
|
|
|
|
|
controller: controller,
|
|
|
|
|
separatorBuilder: (context, index) => Divider(
|
|
|
|
|
color: Theme.of(context)
|
|
|
|
|
.accentTextTheme
|
|
|
|
|
.title
|
|
|
|
|
.backgroundColor,
|
|
|
|
|
height: 1,
|
|
|
|
|
),
|
|
|
|
|
itemCount: items == null ? 0 : items.length,
|
|
|
|
|
itemBuilder: (context, index) {
|
|
|
|
|
final item = items[index];
|
|
|
|
|
final image =
|
|
|
|
|
images != null ? images[index] : null;
|
|
|
|
|
final isItemSelected =
|
|
|
|
|
index == widget.selectedAtIndex;
|
|
|
|
|
|
|
|
|
|
final color = isItemSelected
|
|
|
|
|
? Theme.of(context).textTheme.body2.color
|
|
|
|
|
: Theme.of(context).accentTextTheme.title.color;
|
|
|
|
|
final textColor = isItemSelected
|
|
|
|
|
? Palette.blueCraiola
|
|
|
|
|
: Theme.of(context).primaryTextTheme.title.color;
|
|
|
|
|
final color = isItemSelected
|
|
|
|
|
? Theme.of(context).textTheme.body2.color
|
|
|
|
|
: Theme.of(context)
|
|
|
|
|
.accentTextTheme
|
|
|
|
|
.title
|
|
|
|
|
.color;
|
|
|
|
|
final textColor = isItemSelected
|
|
|
|
|
? Palette.blueCraiola
|
|
|
|
|
: Theme.of(context)
|
|
|
|
|
.primaryTextTheme
|
|
|
|
|
.title
|
|
|
|
|
.color;
|
|
|
|
|
|
|
|
|
|
return GestureDetector(
|
|
|
|
|
onTap: () {
|
|
|
|
|
if (onItemSelected == null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
Navigator.of(context).pop();
|
|
|
|
|
onItemSelected(item);
|
|
|
|
|
},
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 77,
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24),
|
|
|
|
|
color: color,
|
|
|
|
|
child: Row(
|
|
|
|
|
mainAxisSize: MainAxisSize.max,
|
|
|
|
|
mainAxisAlignment: widget.mainAxisAlignment,
|
|
|
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
image ?? Offstage(),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(
|
|
|
|
|
left: image != null ? 12 : 0
|
|
|
|
|
),
|
|
|
|
|
child: Text(
|
|
|
|
|
item.toString(),
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
fontWeight: FontWeight.w600,
|
|
|
|
|
color: textColor,
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
return GestureDetector(
|
|
|
|
|
onTap: () {
|
|
|
|
|
if (onItemSelected == null) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
Navigator.of(context).pop();
|
|
|
|
|
onItemSelected(item);
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
((widget.description != null)
|
|
|
|
|
&&(widget.description.isNotEmpty))
|
|
|
|
|
? Positioned(
|
|
|
|
|
bottom: 24,
|
|
|
|
|
left: 24,
|
|
|
|
|
right: 24,
|
|
|
|
|
child: Text(
|
|
|
|
|
widget.description,
|
|
|
|
|
textAlign: TextAlign.center,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: FontWeight.w500,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
color: Theme.of(context).primaryTextTheme
|
|
|
|
|
.title.color
|
|
|
|
|
child: Container(
|
|
|
|
|
height: 77,
|
|
|
|
|
padding: EdgeInsets.only(left: 24, right: 24),
|
|
|
|
|
color: color,
|
|
|
|
|
child: Row(
|
|
|
|
|
mainAxisSize: MainAxisSize.max,
|
|
|
|
|
mainAxisAlignment: widget.mainAxisAlignment,
|
|
|
|
|
crossAxisAlignment:
|
|
|
|
|
CrossAxisAlignment.center,
|
|
|
|
|
children: <Widget>[
|
|
|
|
|
image ?? Offstage(),
|
|
|
|
|
Padding(
|
|
|
|
|
padding: EdgeInsets.only(
|
|
|
|
|
left: image != null ? 12 : 0),
|
|
|
|
|
child: Text(
|
|
|
|
|
widget.displayItem?.call(item) ??
|
|
|
|
|
item.toString(),
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 18,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
fontWeight: FontWeight.w600,
|
|
|
|
|
color: textColor,
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
),
|
|
|
|
|
((widget.description != null) &&
|
|
|
|
|
(widget.description.isNotEmpty))
|
|
|
|
|
? Positioned(
|
|
|
|
|
bottom: 24,
|
|
|
|
|
left: 24,
|
|
|
|
|
right: 24,
|
|
|
|
|
child: Text(
|
|
|
|
|
widget.description,
|
|
|
|
|
textAlign: TextAlign.center,
|
|
|
|
|
style: TextStyle(
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
fontWeight: FontWeight.w500,
|
|
|
|
|
fontFamily: 'Lato',
|
|
|
|
|
decoration: TextDecoration.none,
|
|
|
|
|
color: Theme.of(context)
|
|
|
|
|
.primaryTextTheme
|
|
|
|
|
.title
|
|
|
|
|
.color),
|
|
|
|
|
))
|
|
|
|
|
: Offstage(),
|
|
|
|
|
isShowScrollThumb
|
|
|
|
|
isShowScrollThumb
|
|
|
|
|
? CakeScrollbar(
|
|
|
|
|
backgroundHeight: backgroundHeight,
|
|
|
|
|
thumbHeight: thumbHeight,
|
|
|
|
|
fromTop: fromTop
|
|
|
|
|
)
|
|
|
|
|
fromTop: fromTop)
|
|
|
|
|
: Offstage(),
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
),
|
|
|
|
|
AlertCloseButton(image: closeButton)
|
|
|
|
|
],
|
|
|
|
|
)),
|
|
|
|
|
),
|
|
|
|
|
),
|
|
|
|
|
)
|
|
|
|
|
],
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
),
|
|
|
|
|
AlertCloseButton(image: closeButton)
|
|
|
|
|
],
|
|
|
|
|
));
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
M
3 years ago