Flutter convert dynamic listview to dynamic gridview

Question

Good Day,

I am making great progress on my first app using flutter, some differences for sure, but found great help here. I have successfully produced a dynamic listview from JSON api call, I am trying to take that and convert it to a 2 column potrait gridview and 3 landscape. I have looked through the flutter gallery demo and the docs and can not seem to get a handle on the flow.

Anyone have some other examples or guidance to accomplish.

What I currently have is a ListView.builder calling an itembuilder that returns widgets of a leading icon, text and trailing icon. I want to convert it using the ICON to be the grid of graphics with onTap to another page as the listview does.

Any help or guidance would be great, thought it should be a simple conversion, but it has not been so far. I will attach some of the code below.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new RefreshIndicator(
          child: new ListView.builder(
            itemBuilder: _itemBuilder,
            itemCount: listcount,
          ),
          onRefresh: _onRefresh,

        ));
  }

  Widget _itemBuilder(BuildContext context, int index) {
    Specialties spec = getSpec(index);
    return new SpecialtyWidget(spec: spec,);
  }

  Specialties getSpec(int index) {
    return new Specialties(
        mylist[index]['id'], mylist[index]['name'], mylist[index]['details'],
        new Photo(mylist[index]['image'], mylist[index]['name'],
            mylist[index]['name']));

  }





}


class SpecialtyWidget extends StatefulWidget {
  SpecialtyWidget({Key key, this.spec}) : super(key: key);

  final Specialties spec;

  @override
  _SpecialtyWidgetState createState() => new _SpecialtyWidgetState();
}

class _SpecialtyWidgetState extends State<SpecialtyWidget> {
  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 64.0,
      width: 128.0,
      child: new ListTile(
        trailing: new Icon(Icons.arrow_right, color: Colors.green, size: 50.0,),
        leading: new Image.network('http://$baseurl:8080/getimage/'+widget.spec.pic.assetName, fit: BoxFit.cover,),
        title: new Text(
          widget.spec.name,
          style: new TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
        ),
        onTap: _onTap,
      ),
    );

Thanks

Collin Jackson Collin Jackson · Accepted Answer · 2017-07-23T17:06:18

There's an example of GridView.count usage in the Flutter Gallery. You could use a LayoutBuilder or MediaQuery to determine whether the grid is portrait or landscape, and then choose a crossAxisCount count of 2 or 3 depending on what answer you get.

Flutter convert dynamic listview to dynamic gridview

1 Answers