CODEWITHSUNDEEP
flutter
Bright
Bright

Reputation: 1067

How to have a list view whose children will wrap in Flutter

What i need

Image

How it is now

enter image description here

Basically, i need to achieve this. i thought of using a grid view but grid view renders elements to a specified aspect ratio which is not i need in my case. I also tried a list view with a horizontal scroll but of course it would and infinite horizontal scroll. I would appreciate any pointers on how to achieve it.

ListView.builder(
  itemCount: categories.length,
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemBuilder: (context,index){
      return Container(
           margin: EdgeInsets.all(3),
           padding: EdgeInsets.all(5),
           decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(4),
                border: Border.all(color: AppColors.darkOrange)
                ),
           child: Text(categories[index],style: AppTextStyles.smallTextStyle,)
                 );
           }
      ),

Upvotes: 1

Views: 1367

Answers (4)

Abhijith
Abhijith

Reputation: 2327

You can use a wrap widget with chip also it seems this is like filtering menu, if you are interested check this package filter_list

ListView(
       primary: true,
       shrinkWrap: true,
       children: <Widget>[
         Wrap(
           spacing: 4.0,
           runSpacing: 0.0,
           children: List<Widget>.generate(
             categories.length, 
             (int index) {
               return Chip(
                 label: Text(categories[index].name,style: AppTextStyles.smallTextStyle)
               );
             }
           ).toList(),
         ),
       ],
     ),

Upvotes: 3

Hazar Belge
Hazar Belge

Reputation: 1089

You can achieve it with Wrap widget. Doc -> wrap class documentation

Wrap(
  children: categories.map((category) {
     return Container(
        margin: EdgeInsets.all(3),
        padding: EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(4),
          border: Border.all(color: AppColors.darkOrange)
        ),
        child: Text(
          category, 
          style: AppTextStyles.smallTextStyle,
        )
     )}.toList(),
  ],
),

Upvotes: 2

Omar Mahmoud
Omar Mahmoud

Reputation: 3087

Wrap is what you look for

Wrap(
          spacing: 8.0, // gap between adjacent chips
          runSpacing: 4.0, // gap between lines
          children: categories
              .map((e) => Container(
                  margin: EdgeInsets.all(3),
                  padding: EdgeInsets.all(5),
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(4),
                      border: Border.all(color: AppColors.darkOrange)),
                  child: Text(
                    e,
                    style: AppTextStyles.smallTextStyle,
                  )))
              .toList(),
        )

Upvotes: 1

esentis
esentis

Reputation: 4696

You can try using Wrap instead of ListView.builder.

Wrap(
 children:categories.map((c)=>Text(categories[index],style: 
  AppTextStyles.smallTextStyle,).toList())
)

Upvotes: 1

Related Questions