title: Multiple image view with different height
body: <p>I'm trying to do something like this, images with the same with, but with different heights. Two images on each side <a href="https://i.stack.imgur.com/D2ARf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D2ARf.jpg" alt="enter image description here" /></a></p>
  <p>But got:</p>
  <p><a href="https://i.stack.imgur.com/qdFF1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qdFF1.png" alt="enter image description here" /></a></p>
  <p>I don't know what else to try. I think the best way is by using <code>Wrap</code>. But I got some extra space between images.</p>
  <p>Code:</p>
  <pre class="lang-flutter prettyprint-override"><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></pre>
  <p>Code Image Design.</p>
  <pre class="lang-flutter prettyprint-override"><code>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);
    }
  }
  </code></pre>