CODEWITHSUNDEEP
flutterdartflutter-layout
Igor Belikov
Igor Belikov

Reputation: 272

Horizontal scroll inside Column Flutter

I want to implement a horizontal scroll with categories: enter image description here

I put my Categories section in Column (maybe it is not the right way, correct me please if I am wrong) and then I try to make my categories scrollable using ListView/Slivers. I have faced with issue that I need to specify constraints for ListView if I use it inside Column. I tried to wrap it with Expanded widget but it didnt work for me. Then I tried CustomScrollView and Slivers but it seems I am doing something wrong. Can you please suggest me the right structure of the widgtes for this view or correct me.

          Container(
            margin: EdgeInsets.all(40),
            child: Column(
              children: <Widget>[
                Container(
                  child: Column(
                    children: <Widget>[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(
                            'Category',
                            style: TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            '8 CATEGORIES',
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 30,
                      ),
                      CustomScrollView(
                        scrollDirection: Axis.horizontal,
                        slivers: <Widget>[
                          SliverList(
                            delegate: SliverChildListDelegate([
                              CategoryCard(
                                title: 'Featured',
                                previewImageAsset:
                                    'assets/images/bliny-shokolad-klubnika.jpg',
                              ),
                            ]),
                          )
                        ],
                      ),
                      Row(
                        children: <Widget>[
                          CategoryCard(
                            title: 'Featured',
                            previewImageAsset:
                                'assets/images/bliny-shokolad-klubnika.jpg',
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

Upvotes: 1

Views: 4475

Answers (1)

timilehinjegede
timilehinjegede

Reputation: 14053

You are getting the error when using the ListView the renderview port was exceeded. To fix this, warp your ListView in a Container widget and give it the height and width property:

Check below:

Container(
        // change your height based on preference
        height: 80,
        width: double.infinity,
        child: ListView(
          // set the scroll direction to horizontal
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            // add your widgets here
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
            // space them using a sized box 
            SizedBox(width: 15,),
            CategoryCard(
              title: 'Featured',
              previewImageAsset:
              'assets/images/bliny-shokolad-klubnika.jpg',
            ),
          ],
        ),
      ),

Upvotes: 5

Related Questions