UI mockup

I have this above UI to develop using Flutter. I have already put the ListView.builder widget to build a horizontal list.

Code so far

            Container(
          height: 60,
          padding: EdgeInsets.only(left: 10, right: 10,top:0),
          child: ListView.builder(
            physics: NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            itemCount:storeProvider.categories.length,
            itemBuilder:(BuildContext context, int index) => GestureDetector(
              child: GestureDetector(
                onTap: (){
                  FocusScope.of(context).requestFocus(new FocusNode());
                  if(storeProvider.cloudCategoryId ==  storeProvider.categories[index].id){
                    storeProvider.setCategoryId("");
                    storeProvider.resetCategory();
                  }else {
                    storeProvider.setCategoryId(
                        storeProvider.categories[index].id
                    );
                    storeProvider.resetCategory();
                    storeProvider.categories[index].productCategory.isSelected =
                    true;
                    storeProvider.searchStoreProducts(
                        context, storeProvider.keyword);
                  }
                },
                child:
                storeProvider.categories[index].productCategory.category != null
                    ?SearchCategoryItem(
                  title: storeProvider.categories[index].productCategory.category,
                  isSelected: storeProvider.categories[index].productCategory.isSelected,
                ):Container(),
              ),
            ),
          ),
        ),

But I couldn't find a way to break the pills to next line and limit to 3 lines. When we press the See more text it needs to expand and show all the pills.

CodePudding user response：

In my suggestion, As per your design that you have mocked up you must try grid view with random width size , try https://pub.dev/packages/flutter_staggered_grid_view

MasonryGridView.count(
crossAxisCount: 4,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
itemBuilder: (context, index) {
 return Tile(
  index: index,
  extent: (index % 5   1) * 100,
);

}, );

CodePudding user response：

I think the cleaner approach to this is to use Wrap() widget instead of ListView.builder:

Here's a example:

Wrap(
    for (int x = 0; x < categories.length; x  )...[
         OutlinedButton(
             onPressed: () {},
             child: Text("Category $x"),
         )
    ]
)