How can I make a custom List View like the attached image? I need a List View that automatically snaps to item positions by scrolling up and down.
Thanks in advance
2 Answers
@override
Widget build(BuildContext context) {
final double statusbarHeight = MediaQuery.of(context).padding.top;
List<String> litems = [
"Dashboard"
];
List<String> litems_icon = [
"assets/images/sign_out.svg",
];
...
Scaffold(
body: Container(
child: ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: litems.length,
itemBuilder: (BuildContext context, int index) {
Card(
elevation: 8.0,
margin: EdgeInsets.symmetric(horizontal: 1.0, vertical: 1.0),
child: Container(
decoration: BoxDecoration(color: Colors.white),
child: ListTile(
contentPadding: EdgeInsets.symmetric(horizontal: 5.0, vertical: 0.0),
leading: Container(
padding: EdgeInsets.only(right: 12.0),
child: SvgPicture.asset(
litems_icon[index],
width: 40.0,
color: const Color(0xFFE27023),
),
),
title: Text(
litems[index],
style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
)
),
);
},
),
),
)
Comments
I solved the problem with ListWheelScrollView, this is the answer:
ListWheelScrollView(
controller: fixedExtentScrollControllerEvoucher,
physics: FixedExtentScrollPhysics(),
children: opratorsAmount.map((data) {
return Container(
width: double.infinity, height: 30,
decoration: BoxDecoration(
color: Colors.grey,
border: Border.all(color:Colors.black, width: 0.5),
borderRadius: new BorderRadius.all(Radius.circular(10))
),
child: Center(child: Text(data,style:TextStyle(color: Colors.white, fontSize: 14), textAlign: TextAlign.center)),
margin: EdgeInsets.only(left:5, right:5, top:1, bottom: 1)
);
}).toList(),
itemExtent: 45,
onSelectedItemChanged: (int value){
setState(() {
selectedItem = value;
});
},
useMagnifier: true, magnification: 1.2,
)
And opratorsAmount is a list of String
ListView,ListView.builderandListWheelScrollViewbut they don't provide what I need. I need that there should be a snap effect on scrolling and one item should be selected without necessarily tapping on it.