'How to design custom ListWheelScrollView like below image in flutter?
I added two ListWheelScrollView to show the value
first for numbers(1-9) and second for string values like an hour, day, week, and month
but focus item design does not show like the below image.
the wheel list that I want
Piece of code:
Container(
// padding:const EdgeInsets.all(5) ,
margin: const EdgeInsets.only(left: 10, right: 10),
height: MediaQuery.of(context).size.height/4,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(10)
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height/4,
width: MediaQuery.of(context).size.width/2.5,
child: ListWheelScrollView(
itemExtent: 20,
useMagnifier: true,
diameterRatio: 1.0,
magnification: 2.0,
onSelectedItemChanged: (val){
setState(() {
selectedReminderVal = reminderVal[val];
print("selectedReminderVal:$selectedReminderVal");
});
},
children:
reminderVal.map((item) =>Text(item,
style: TextStyle(
fontSize:15,
// fontWeight:FontWeight.bold,
),
),)
.toList(),
),
),
Container(
height: MediaQuery.of(context).size.height/4,
width: MediaQuery.of(context).size.width/2.5,
child: ListWheelScrollView(
itemExtent: 20,
useMagnifier: true,
diameterRatio: 1.0,
magnification: 2.0,
onSelectedItemChanged: (val){
setState(() {
selectedReminderDay = reminderDay[val];
print("selectedReminderDay:$selectedReminderDay");
});
},
children: reminderDay.map((item) =>Text(item,
style: TextStyle(
fontSize:15,
// fontWeight:FontWeight.bold,
),
),)
.toList(),
),
),
],
)
),
What I got from this code:
Solution 1:[1]
You can use two CupertinoPickers in a Row:
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
child: Center(
child: CupertinoButton(
onPressed: showPicker,
child: Text('Pick'),
color: Colors.blueAccent,
),
),
),
),
);
}
showPicker() {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
height: 200.0,
color: Colors.white,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: CupertinoPicker(
scrollController: new FixedExtentScrollController(
initialItem: 0,
),
itemExtent: 30,
backgroundColor: Colors.white,
onSelectedItemChanged: (int index) {
setState(() {
selectedReminderVal = index;
});
},
children: reminderVal
.map(
(item) => Center(
child: Text(
item,
style: TextStyle(
fontSize: 16,
// fontWeight:FontWeight.bold,
),
),
),
)
.toList()),
),
Expanded(
child: CupertinoPicker(
scrollController: new FixedExtentScrollController(
initialItem: 0,
),
itemExtent: 30,
backgroundColor: Colors.white,
onSelectedItemChanged: (int index) {
setState(() {
selectedReminderDay = index;
});
},
children: reminderDay
.map(
(item) => Center(
child: Text(
item,
style: TextStyle(
fontSize: 16,
// fontWeight:FontWeight.bold,
),
),
),
)
.toList()),
),
]));
});
}
Result:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mobina |