Is there any deafult widget like in image or if I need to do it how could that be implemented?

Question

So I am not looking for filters but I am looking for scroll widget. I have tried generating listview items abd getting position of listview to give items ratio but I wasn't able to get any functionality while in certain index position. Any help would be helpfull. Naming of the widget or special widgets that can make me do this etc.

Answer 1

You can use ListView or ListView.builder to do that, but with circle-shaped widgets as the children.

You can check out this tutorial to do the horizontal list. And you can check out this StackOverflow question, to create a circle button. Or instead of a button, you want to use the CircleAvatar (to add an image in it), you can check out this official doc.

Answer 2

int _index = 0;
List<String> filters = [
    ImageConstant.imgEllipse14,
    ImageConstant.imgEllipse13,
    ImageConstant.imgEllipse12,
    ImageConstant.imgEllipse16,
    ImageConstant.imgEllipse15,
    ImageConstant.imgEllipse14,
    ImageConstant.imgEllipse13,
    ImageConstant.imgEllipse12,
    ImageConstant.imgEllipse16,
    ImageConstant.imgEllipse15,
  ];

Widget Scroller =
PageView.builder(
  itemCount: filters.length, // filters is a string array of image paths
  controller: PageController(viewportFraction: 0.22),
  onPageChanged: (int index) => setState(() => _index = index),
  itemBuilder: (_, i) {
     return Padding(
       padding: EdgeInsets.only(
           left: 13,
           top: 18,
           right: 13,
           bottom: 20),
       child: Transform.scale(
           scale: i == _index ? 2 : 1,
           child: Container(
           child: CircleAvatar(
              child: CustomImageView(
              imagePath: filters[i],
              radius: BorderRadius.circular(getHorizontalSize(21)),
              margin: getMargin(top: 20, bottom: 20),
           ),
         ),
       ),
     ),
   );
 },
);

You could use this technique or you could also use ScrollSnapList package https://pub.dev/packages/scroll_snap_list .