Home > front end >  Want to add multiple items on the same line in Flutter
Want to add multiple items on the same line in Flutter

Time:10-08

In the following code, all items are displayed on a separate line i.e. each item spans over the entire row. How can I change the code so that multiple items can appear on the same line?

Thanks in Advance :)

Expanded(
 child: SizedBox(
  child: new ListView.builder(
   shrinkWrap: true,
   scrollDirection: Axis.vertical,
   itemCount: filterStatus == false
   ? allDeals.length
   : filteredDeals.length,
   itemBuilder: (BuildContext ctx, int index) {
     return Container(
       margin: EdgeInsets.only(top: 20.0),
       child: ListTile(...)
     )
   }
  )
 )
)





CodePudding user response:

You can simply do this

   Text(
      allDeals.join(". "), 
   )

For your problem:

Expanded(
  child: filterStatus == false  
   ? Text(allDeals.join(". "))
   : Text(filteredDeals.join(". ")),
)

CodePudding user response:

If you want to do something like this:

Flutter App using GridView.builder

You can use the GridView.builder.

Here is the code that built the example from the screenshot.

GridView.builder(
  gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 100, // the size of item
    crossAxisSpacing: 10, // margin of 10px top and bottom
    mainAxisSpacing: 10, // margin of 10px left and right
    // the spacing is not applicable on the GridView margins.
  ),
  itemCount: 30,
  itemBuilder: (_, index) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text(
          'Item $index',
        ),
      ),
    );
  },
),
  • Related