Search code examples
flutterdartflutter-layout

get 2 images next to each other instead of 1 in listviewbuilder


I'm trying to get the 2 images next to each other instead of beneath each other but I have no clue how to go about something like this, I tried something with an I variable to influence the index but that did not really work out. normally I could do this but with the index, I have no clue how to go about this.

code:

Center(
        child: Column(
          children: [
            _items.isNotEmpty
                ? Expanded(
              child: ListView.builder(
                itemCount: _items.length,
                itemBuilder: (context, index) {
                  return Column(
                    children: [
                      RawMaterialButton(
                        child: Image(
                          image: NetworkImage(_items[index]["portrait"]),
                          height: 200,
                          width: 140,
                        ),
                        onPressed: () {
                          Navigator.push(context, _AnimatedNavigation(SpecificCharacterRoute(
                              _items[index]["name"], _items[index]["name"], _items[index]["shop_background"], _items[index]["overview"],
                              _items[index]["difficulty"], "images/dbdsurvivorlogo.png")
                            )
                          );
                        },
                      ),
                    ],
                  );
                },
              ),
            )
                : Container()
          ],
        ),
      ),

Here's an image of what I mean enter image description here

Here's an image of what I have

enter image description here


Solution

  • You can use GridView.count( with crossAxisCount: 2,

     GridView.count(
      crossAxisCount: 2,
      children: [...],
    );
    

    Or with .builder

    GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemCount: ,
      itemBuilder: (context, index) {...},
    );