title: Different size images in horizontal List view / Grid view with fix height and dynamic width in flutter
body: <p>I want to create a horizontal <strong>ListView</strong> or <strong>GridView</strong> with fix height of images but <strong>width of image should be dynamic</strong>.</p>
  <p>Below is the code witch I am trying to do but not able to get expected output. I have also added screenshot of design which illustrate the expected output</p>
  <blockquote>
  <p>With List View</p>
  </blockquote>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:cached_network_image/cached_network_image.dart';
  
  
  class ViewPager extends StatefulWidget {
    createState() =&gt; _ViewPager();
  }
  
  class _ViewPager extends State&lt;ViewPager&gt; {
  
    static final exercise_image1 = &quot;https://drive.google.com/uc?export=download&amp;id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l&quot;;
    static final exercise_image2 = &quot;https://drive.google.com/uc?export=download&amp;id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri&quot;;
  
  
    @override
    Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Column(
          children: [
            _imagesList(images: [exercise_image1, exercise_image2]),
          ],
        ),
      );
    }
  
  
  
    Widget _imagesList({List&lt;String&gt; images}) {
  
      return Container(
        width: double.maxFinite,
        height: 150,
        color: Colors.red,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: [
            _imageListItem(imagePath: images.first),
            _imageListItem(imagePath: images.last),
          ],
        ),
      );
  
    }
  
    Widget _imageListItem({@required String imagePath}) {
  
      return CachedNetworkImage(
        width: 200, // I want this to be according to the image width
        imageUrl: imagePath,
        placeholder: (context, url) =&gt; Container(
          child: CircularProgressIndicator(),
        ),
        imageBuilder: (context, imageProvider) =&gt; Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fitHeight
            ),
          ),
        ),
      );
  
    }
  
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/EivE1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EivE1.png" alt="enter image description here" /></a></p>
  <blockquote>
  <p>With Grid View</p>
  </blockquote>
  <p>Same issue with Grid View, we set height of the grid view but not able to give dynamic width to the image</p>
  <pre><code>import 'package:flutter/material.dart';
  import 'package:cached_network_image/cached_network_image.dart';
  
  
  class ViewPager extends StatefulWidget {
    createState() =&gt; _ViewPager();
  }
  
  class _ViewPager extends State&lt;ViewPager&gt; {
  
    static final exercise_image1 = &quot;https://drive.google.com/uc?export=download&amp;id=1eDhXVJrNExRwi85pQGCOAwPYi7X-sA0l&quot;;
    static final exercise_image2 = &quot;https://drive.google.com/uc?export=download&amp;id=1ifjpLw2ocBAIbEOIhsTtczf8dWuvexri&quot;;
  
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          body: Container(
            height: 200,
            child: _imagesList(images: [exercise_image1, exercise_image2]),
          ),
        ),
      );
  
  
    }
  
  
    Widget _imagesList({List&lt;String&gt; images}) {
  
      return GridView.count(
        crossAxisCount: 1,
        scrollDirection: Axis.horizontal,
        children: [
          _imageListItem(imagePath: images[0]),
          _imageListItem(imagePath: images[1]),
        ],
      );
  
    }
  
    Widget _imageListItem({@required String imagePath}) {
  
      return CachedNetworkImage(
        imageUrl: imagePath,
        placeholder: (context, url) =&gt; Container(
          child: CircularProgressIndicator(),
        ),
        imageBuilder: (context, imageProvider) =&gt; Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.fitHeight
            ),
          ),
        ),
      );
  
    }
  
  }
  </code></pre>