Display Images in GridView in Flutter?

Question

I want to display a list of images in GridView. And I'm not able to do that. I want to know the data type for a list of images from the assets and how a constructor would help in this case. I've just started to learn flutter and I don't know how to use it.

class Home extends StatefulWidget {
  final String title;
  Home({this.title}) : super();
  @override
  _HomeState createState() => _HomeState();
  }
  @override
  Widget build(BuildContext context) {
var gridView = new GridView.builder(
    itemCount: 20,
    gridDelegate:
        new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
    itemBuilder: (BuildContext context, int index) {
      return new GestureDetector(
        child: new Card(
          elevation: 10,
          child: new Container(
                // child: *Image list as child*, but don't know about the list datatype hence not created it!
            alignment: Alignment.center,
          ),
        ),
        onTap: () {},
      );
    });
return new Scaffold(
  appBar: new AppBar(
    backgroundColor: Colors.red,
    title: new Text("Flutter TabBar"),
  ),
  body: Container(
    padding: EdgeInsets.all(10),
    child: gridView,
  ),
);
}
}

Does this answer your question? How to add image in Flutter

Brian Ogden
– Brian Ogden

2019-11-18 06:03:00 +00:00
Commented Nov 18, 2019 at 6:03 — Brian Ogden
– Brian Ogden, Commented Nov 18, 2019 at 6:03

Jay Mungara · Accepted Answer · 2019-11-18 06:08:25Z

2

GestureDetector(
        child: new Card(
          elevation: 10,
          child: new Container(
            // child: *Image list as child*, but don't know about the list datatype hence not created it!
            alignment: Alignment.center,
            child:GridView.builder(
            itemCount: items.length,
            gridDelegate:

            // crossAxisCount stands for number of columns you want for displaying
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
            itemBuilder: (BuildContext context, int index) {

              // return your grid widget here, like how your images will be displayed
              return Image.network('https://picsum.photos/250?image=9',);
              }),
           ),
        ),
        onTap: () {},
      )

answered Nov 18, 2019 at 6:08

Jay Mungara

7,1803 gold badges33 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Yash Jha Over a year ago

The thing is that I have 23 images to display in "Cards", I need to make a List of Images so that I can use it directly into the child property of the Card. But I don't know the data type for the list of images. So if you guys can help in this case?

Jay Mungara Over a year ago

Just create a list of String and all the image paths in string. To load an image from server(network path) you can use Image.network() widget, To load image from a file you can use Image.file() widget and To load image from assets you can use Image.asset() widget.

Collectives™ on Stack Overflow

Display Images in GridView in Flutter?

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related