Multiple image view with different height

Question

I'm trying to do something like this, images with the same with, but with different heights. Two images on each side

But got:

I don't know what else to try. I think the best way is by using Wrap. But I got some extra space between images.

Code:

class ImageFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 10,
      runSpacing: 10,
      children: [
        ImageFeedDesign(
          image: 'assets/bali.png',
        ),
        ImageFeedDesign(
          image: 'assets/bali.png',
        ),
        ImageFeedDesign(
          image: 'assets/bali.png',
        ),
        ImageFeedDesign(
          image: 'assets/bali.png',
        ),
      ],
    );
  }
}

Code Image Design.

class ImageFeedDesign extends StatelessWidget {
  ImageFeedDesign({this.image});
  final String image;
  final String place = 'Bali';
  final String distance = '2.834 km';
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: MediaQuery.of(context).size.width / 2 - 30,
          height: _getHeight(),
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: AssetImage(image),
            ),
            borderRadius: BorderRadius.all(Radius.circular(15.0)),
          ),
        ),
        Positioned(
          bottom: 10,
          left: 15,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                place,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: kWhite,
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
              const SizedBox(height: 2.0),
              Text(
                distance,
                style: TextStyle(color: kWhite),
              ),
            ],
          ),
        ),
        Positioned(
          bottom: 10,
          right: 15,
          child: FaIcon(
            FontAwesomeIcons.instagram,
            color: kWhite,
          ),
        ),
      ],
    );
  }

  double _getHeight() {
    double defaultValue = 170.0;
    Random random = Random();

    return defaultValue + random.nextInt(56);
  }
}

Answer 1

You can copy paste run full code below
Because ImageFeedDesign has random height
In this case you can use StaggeredGridView.count and StaggeredTile.fit(2)
For demo purpose, I change AssetImage to NetworkImage
code snippet

import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
...
StaggeredGridView.count(
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: 15.0,
        crossAxisSpacing: 0.0,
        children: <Widget>[
          ImageFeedDesign(image: 'https://picsum.photos/250?image=9'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=10'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=11'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=12'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=13'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=14'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=15'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=16'),
        ],
        staggeredTiles: const <StaggeredTile>[
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
        ],
      )

working demo

full code

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: StaggeredGridView.count(
        primary: false,
        crossAxisCount: 4,
        mainAxisSpacing: 15.0,
        crossAxisSpacing: 0.0,
        children: <Widget>[
          ImageFeedDesign(image: 'https://picsum.photos/250?image=9'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=10'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=11'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=12'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=13'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=14'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=15'),
          ImageFeedDesign(image: 'https://picsum.photos/250?image=16'),
        ],
        staggeredTiles: const <StaggeredTile>[
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
          const StaggeredTile.fit(2),
        ],
      ),
    );
  }
}

class ImageFeedDesign extends StatelessWidget {
  ImageFeedDesign({this.image});
  final String image;
  final String place = 'Bali';
  final String distance = '2.834 km';
  Color kWhite = Colors.white;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          width: MediaQuery.of(context).size.width / 2 - 15,
          height: _getHeight(),
          decoration: BoxDecoration(
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(image),
            ),
            borderRadius: BorderRadius.all(Radius.circular(15.0)),
          ),
        ),
        Positioned(
          bottom: 10,
          left: 15,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                place,
                overflow: TextOverflow.ellipsis,
                style: TextStyle(
                  color: kWhite,
                  fontWeight: FontWeight.bold,
                  fontSize: 16.0,
                ),
              ),
              SizedBox(height: 2.0),
              Text(
                distance,
                style: TextStyle(color: kWhite),
              ),
            ],
          ),
        ),
        Positioned(
          bottom: 10,
          right: 15,
          child: FaIcon(
            FontAwesomeIcons.instagram,
            color: kWhite,
          ),
        ),
      ],
    );
  }

  double _getHeight() {
    double defaultValue = 170.0;
    Random random = Random();

    return defaultValue + random.nextInt(56);
  }
}