title: Flutter: How to AUTO RESIZE height, width, fontSize in ListView based on Expanded and itemCount
body: <p>I have a page like this:</p>
  
  <ol>
  <li>1st Listview: <code>Axis.vertical</code> as default</li>
  <li>2nd Listview inside 1st Listview: <code>Axis.horizontal</code>, <code>itemCount = 3</code>. To avoid the error, I set the <code>height:50</code> <code>width:100</code> for <code>Container</code> in this</li>
  </ol>
  
  <p>However, I want to find some way for it to display well on all screens, specifically in the 2nd ListView: </p>
  
  <ul>
  <li><strong><code>Expanded</code> (1: 1: 1) and it fits the right of the screen, can't scroll.</strong></li>
  <li><strong><code>Width</code> of <code>Container</code> will auto-resize based on <code>Expanded flex</code>.</strong></li>
  <li><strong><code>fontSize</code> of <code>Text</code> and <code>Height</code> of <code>Container</code> will auto-resize based on <code>maxLine</code></strong></li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/9mxSK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9mxSK.png" alt="enter image description here"></a></p>
  
  <p>So pls help me, this is JSON file</p>
  
  <pre><code>[
    {
      "id": 1,
      "continent": "North America",
      "countries": [
        {
          "name": "United States",
          "capital": "Washington, D.C.",
          "language": ["English"]
        },
        {
          "country": "Canada",
          "capital": "Ottawa",
          "language": ["English", "French"]
        },
        {
          "country": "Mexico",
          "capital": "Mexico City",
          "language": ["Spanish"]
        }
      ]
    },
    {
      "id": 2,
      "continent": "Europe",
      "countries": [
        {
          "country":  "Germany",
          "capital": "Berlin",
          "language":  ["German"]
        },
        {
          "country":  "United Kingdom",
          "capital": "London",
          "language":  ["English"]
        }
      ]
    },
    {
      "id": 3,
      "continent": "Asia",
      "country": [
        {
          "country":  "Singapore",
          "capital": "Singapore",
          "language":  ["English","Malay","Mandarin","Tamil"]
        }
      ]
    }
  ]
  </code></pre>
  
  <p>And this is the main file</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'model/continent_model.dart';
  import 'services/continent_services.dart';
  
  class ContinentPage2 extends StatefulWidget {
    ContinentPage2() : super();
  
    @override
    _ContinentPageState createState() =&gt; _ContinentPageState();
  }
  
  class _ContinentPageState extends State&lt;ContinentPage2&gt; {
    List&lt;Continent&gt; _continent;
    @override
    void initState() {
      super.initState();
      ContinentServices.getContinent().then((continents) {
        setState(() {
          _continent = continents;
        });
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(title: Text('')),
          body: ListView.separated(
              separatorBuilder: (BuildContext context, int index) {
                return SizedBox(height: 10);
              },
              shrinkWrap: true,
              itemCount: null == _continent ? 0 : _continent.length,
              itemBuilder: (context, index) {
                return Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: &lt;Widget&gt;[
                  Row(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, mainAxisSize: MainAxisSize.min, children: &lt;Widget&gt;[
                    Expanded(flex: 1, child: Text(_continent[index].continent)),
                    Expanded(
                        flex: 2,
                        child: Container(
                            height: 50,
                            child: ListView.separated(
                                separatorBuilder: (BuildContext context, int index) {
                                  return SizedBox(width: 10);
                                },
                                shrinkWrap: true,
                                scrollDirection: Axis.horizontal,
                                itemCount: null == _continent ? 0 : _continent[index].country.length,
                                itemBuilder: (context, countryIndex) {
                                  print(_continent[index].country[countryIndex].name);
                                  return Row(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: &lt;Widget&gt;[
                                    Container(
                                        width: 100,
                                        child: Column(children: &lt;Widget&gt;[
                                          Text(
                                            _continent[index].country[countryIndex].name,
                                          ),
                                          Text(_continent[index].country[countryIndex].capital,
                                              style: TextStyle(
                                                color: Colors.blue,
                                              )),
                                        ]))
                                  ]);
                                })))
                  ])
                ]);
              }));
    }
  }
  </code></pre>