Question 74686 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make centred list view in flutter?

I need to start my page something like this,

enter image description here

But this is what my list view looks like, I need to center it like the first one, how can I achieve that
enter image description here

this is my listview.builder widget

Flexible(flex: 2,
                      child: ListView.builder(
                        scrollDirection: Axis.horizontal,
                        itemCount: 10,
                        itemBuilder: (context, index) {
                          return const RowShoppingtile();
                        },
                      ),
                    ),

can anyone suggest me way to do this

Tags:

3

Answers


  1. 0

    use this library to get your result
    https://pub.dev/packages/carousel_slider

    Login or Signup to reply.
  2. 0

    This will make the ListView scroll by one page at a time instead of scrolling through each item.

    ListView(
  physics: PageScrollPhysics(), // set the physics property to PageScrollPhysics
  children: [
    //Add your list items here
  ],
);
    Login or Signup to reply.
  3. 0

    You can use ScrollController to scroll the ListView to a desired position. Make sure to call to scroll after build is finished.

    class ItemList extends StatefulWidget {
  const ItemList({super.key});

  @override
  State<ItemList> createState() => _ItemListState();
}

class _ItemListState extends State<ItemList> {
  late ScrollController _controller;

  @override
  void initState() {
    _controller = ScrollController();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _controller.jumpTo((_controller.position.maxScrollExtent +
              _controller.position.minScrollExtent) /
          2.0);
    });

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.deepPurple.withAlpha(100),
      height: 250,
      child: ListView(
        controller: _controller,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        children: List.generate(7, (index) => const _ListItem()),
      ),
    );
  }
}

    NOTE:

    Above sample only works for odd number of ListView items. Otherwise you need to calculate the scroll position accordingly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search