title: Dynamic GridView List UI in flutter
body: <p>I have a design which is like this : </p>
  
  <p><a href="https://i.stack.imgur.com/pZUQT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pZUQT.png" alt="Want to achieve"></a></p>
  
  <p>I have been reading bout the <code>GridView</code> and found it complex enough to get the result. I have also followed this question here : <a href="https://stackoverflow.com/questions/44183795/flutter-layout-a-grid">Flutter - Layout a Grid</a>. Found out that this is for the fixed list, plus the list has different UI. </p>
  
  <p>I have information coming up from the API, and I have a widget named as <code>MoreInfo()</code> which has a text args to be passed from the API. </p>
  
  <p>I have achieved what I want to get the strings coming from the list. It is just that I'm trying to get the result but not giving the resultant very well. </p>
  
  <p>Adding the list to the widget : </p>
  
  <pre><code>GridView getOtherInfo(BuildContext context){
    List&lt;String&gt; _yesElems = [];
    List&lt;Widget&gt; _widget = [];
  
    this.userBarModel.barModel.otherInfo.yes.forEach((item){
      _yesElems.add(item);
    });
  
    _yesElems.forEach((o){
      _widget.add(MoreInfoWidget(text: o));
    });
  
    return GridView.count(
      crossAxisCount: 4,
      children: _widget
    );
  }
  </code></pre>
  
  <p><strong>UI Code:</strong></p>
  
  <pre><code>Column(
    corssAxisalignment: CrossAxisAlignment.stretch;
    children: &lt;Widget&gt;[
       Padding(
         padding: EdgeInsets.only(top: 9.0),
         child: Text("MORE INFO",
             style: TextStyle(color: Color.fromRGBO(183, 193, 203, 1), fontWeight: FontWeight.bold, fontSize: 11.0))
       ),
       SizedBox(height: 11.4),
       Container(
          height: 140,
          child: getOtherInfo(context)
       )
    ]
  )
  </code></pre>
  
  <p>The result I'm getting right now is : </p>
  
  <p><a href="https://i.stack.imgur.com/1Dj0a.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Dj0a.png" alt="Image I&#39;m getting"></a></p>
  
  <p>I'd like to get the aforementioned result. There is inbuilt top padding added to the UI. I don't know why. Can you help me, guys? </p>
  
  <p>I have tried using the <code>crossAixCount: 2</code>, and the UI went blank. Any help would be appreciated. Thanks :)</p>