Flutter - Center ListView.builder elements

jonsnow
December 30, 2023
113 views
0 votes
2 Answers

I want to make these elements in the middle
and I want the code to be formatted correctly

Container(
                height: 100,
                child: ListView.builder(
                  physics: NeverScrollableScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  itemCount: controller.categories.length,
                  itemBuilder: (context, index) {
                    return Center(
                      child: Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 10),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Container(
                              width: 70,
                              height: 70,
                              child: CachedNetworkImage(
                                imageUrl:
                                    "${Applink.imagesCat}/${controller.categories[index]["categories_image"]}",
                              ),
                            ),
                            SizedBox(height: 2),
                            Text(controller.categories[index]
                                ["categories_name"]),
                          ],
                        ),
                      ),
                    );
                  },
                ),
              ),

I tried to put the items in a row but it didn’t work

Tags: dart flutter

Answers

You can simply render your list by using map with Row widget to center the elements in the screen

Scaffold(
        body: Center(
            child: SizedBox(
            height: 100,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [1,2,3,4]
                .map(
                  (element) => const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(
                          width: 70,
                          height: 70,
                          child: Icon(Icons.home_filled),
                        ),
                        SizedBox(height: 2),
                        Text("Cat"),
                      ],
                    ),
                  ),
                ).toList()
            )
          )
        )
    );

Could you try the code below? It works flawlessly for me too.

Container(
                  height: 100,
                  width: double.infinity,
                  child: Center(
                    child: ListView.builder(
                      physics: NeverScrollableScrollPhysics(),
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: controller.categories.length,
                      itemBuilder: (context, index) {
                        return Center(
                          child: Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 10),
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.center,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Container(
                                  width: 70,
                                  height: 70,
                                  child: CachedNetworkImage(
                                    imageUrl:
                                        "${Applink.imagesCat}/${controller.categories[index]["categories_image"]}",
                                  ),
                                ),
                                SizedBox(height: 2),
                                Text(controller.categories[index]
                                    ["categories_name"]),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ),

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Center ListView.builder elements

Answers