I have successfully loaded JSON data from an API to the Flutter app. The JSON data consist of a list of images. The JSON data is in the following format.

{
    "images":[
    {
        "id":1,
        "images":"http://url_1.jpg"

    },
    {
        "id":3,
        "images":"http://url_3.jpg"

    },
    {
        "id":4,
        "images":"http://url_4.jpg"

    },
    {
        "id":5,
        "images":"https://url_5.jpg"

    }
]
}

And I have loaded the data to a list using the following code fragment and it works fine.

_fetchData() async {
    setState(() {
      isLoading = true;
    }); //setState
    final response = await http.get("http://192.168.43.95:3000/memes");
    print("response");
    if (response.statusCode == 200) {
      list = json.decode(response.body) as List;
      print(list);
      setState(() {
        isLoading = false;
      });
    } else {
      throw Exception('Failed to load photos');
    }
  }

And I have displayed the images with the following block of code :

ListView.builder(
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    contentPadding: EdgeInsets.all(10.0),
                    leading: Image.network(
                      list[index]['images'],
                      fit: BoxFit.contain,
                    ),
                  );
                })

Now I need to modify the above code such that the screen is divided into 2 Columns. Images should be placed in these columns (width of the 2 columns are the same) with the height of each image is proportional to its width. Also, as we scroll down the remaining images should load into these two columns. Similar to google image search results in chrome

What are the changes need to be made? If this is not possible with ListTile(), how can I do it? enter image description here


Solution 1: Nardeepsinh Vaghela

use flutter_staggered_grid_view: "^0.2.7" from here

StaggeredGridView.countBuilder(
    crossAxisCount: 4,
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) => new Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5.0))),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          image: DecorationImage(
              image: NetworkImage(list[index]['images']),
              fit: BoxFit.cover),
        ),
      ),
    ),
    staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 1.5),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
  ),

enter image description here


Solution 2: Abhijith K

This is what worked fine for me. The crossAxisCount:2 split into two columns and StaggeredTile.fit(1) fits each tile into one column.

StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: list.length,
              itemBuilder: (BuildContext context, int index) => Container(
                        margin: EdgeInsets.fromLTRB(5, 5, 5, 5),
                        child: Image(
                            fit: BoxFit.fill,
                            image: NetworkImage(list[index]['image']))),
              staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
            ),


Solution 3: Kalpesh Kundanani

You should use flutter_staggered_grid_view 0.3.0

See example.

enter image description here