Want to add multiple items on the same line in Flutter

Issue

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(...)
        );
      }
    ),
  ),
),

Solution

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',
        ),
      ),
    );
  },
),

Answered By – Marius Atasiei

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *