CODEWITHSUNDEEP
listviewflutter
Mohsen Emami
Mohsen Emami

Reputation: 3142

How to make a custom List View in Flutter

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.
enter image description here

Thanks in advance

Upvotes: 1

Views: 6137

Answers (2)

Mohsen Emami
Mohsen Emami

Reputation: 3142

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

Upvotes: 0

user9139407
user9139407

Reputation: 1012

     @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),
      ),
)
      ),
    );
              },
            ),
          ),
    )

Upvotes: 1

Related Questions