Dynamic GridView List UI in flutter

Question

I have a design which is like this :

I have been reading bout the GridView and found it complex enough to get the result. I have also followed this question here : Flutter - Layout a Grid. Found out that this is for the fixed list, plus the list has different UI.

I have information coming up from the API, and I have a widget named as MoreInfo() which has a text args to be passed from the API.

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.

Adding the list to the widget :

GridView getOtherInfo(BuildContext context){
  List<String> _yesElems = [];
  List<Widget> _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
  );
}

UI Code:

Column(
  corssAxisalignment: CrossAxisAlignment.stretch;
  children: <Widget>[
     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)
     )
  ]
)

The result I'm getting right now is :

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?

I have tried using the crossAixCount: 2, and the UI went blank. Any help would be appreciated. Thanks :)

Answer 1

Maybe I didn't get you, can you try this code which is giving you a hint how you can do it your way and let me know if this is what you were looking for.

List<int> _list = [];

math.Random random = math.Random();

@override
void initState() {
  super.initState();

  Timer.periodic(Duration(milliseconds: 1000), (timer) {
    _list.add(random.nextInt(100));
    setState(() {});
  });
}

Widget build(context) {
  return Scaffold(
    appBar: AppBar(),
    body: GridView.count(
      crossAxisCount: 2,
      crossAxisSpacing: 160,
      childAspectRatio: 3,
      children: _list.map((value) {
        return Container(
          alignment: Alignment.center,
          margin: EdgeInsets.all(8),
          decoration: BoxDecoration(border: Border.all(color: Colors.black),),
          child: Text("Item ${value}"),
        );
      }).toList(),
    ),
  );
}