Flutter GridView Widget

Flutter has a very strong collection of widgets like GridView. Gridview is like list with two or more Columns with Scrollable List. Gallery, Photos application is the best example of GridView Widget.

This is the sample Code of GridView Widget :

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  List<Item> list = List();
  @override
  void initState() {
    super.initState();
    list.add(Item(
        "https://cdn.pixabay.com/photo/2020/02/13/10/29/bees-4845211_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2014/11/21/17/27/frog-540812_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2015/04/28/13/24/butterfly-743549_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2014/05/26/13/32/striped-core-354528_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2016/01/08/11/57/butterfly-1127666_960_720.jpg"));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView Demo"),
      ),
      body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(list.length, (index) {
            return Card(
              child: Image.network(
                list[index].url,
                fit: BoxFit.fill,
                height: double.maxFinite,
              ),
            );
          })),
    );
  }
}
class Item {
  String url;
  Item(this.url);
}

Here, we declared Item Class as a Model class. and initialise list in initState() method with list of images. GridView has count method which contains attributes

  • crossAxisCount: it means number of columns in Grid
  • children: it is return the collection of Widget and show in Grid List

Here GridView children return Card Widget with Network Image

Flutter GridView
Flutter GridView Example with 2 Columns

If you want to show Text over Image in Grid List, You can use Stack Widget.

Stack Widget is kind of FrameLayout in Android, It’s provide Layer upon layer and show. Here we Take Stack Widget and under that take one Image and Text. This is the Code Sample

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Tutorial',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  List<Item> list = List();
  @override
  void initState() {
    super.initState();
    list.add(Item(
        "https://cdn.pixabay.com/photo/2020/02/13/10/29/bees-4845211_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2013/06/30/18/56/butterfly-142506_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2012/03/01/00/55/flowers-19830_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2014/11/21/17/27/frog-540812_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2015/04/28/13/24/butterfly-743549_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2014/05/26/13/32/striped-core-354528_960_720.jpg"));
    list.add(Item(
        "https://cdn.pixabay.com/photo/2016/01/08/11/57/butterfly-1127666_960_720.jpg"));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GridView Demo"),
      ),
      body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(list.length, (index) {
            return Card(
              child: Stack(
                children: <Widget>[
                  Image.network(
                    list[index].url,
                    fit: BoxFit.fill,
                    height: double.maxFinite,
                  ),
                  Center(
                    child: Text(
                      "Image ${index + 1}",
                      style: TextStyle(color: Colors.white, fontSize: 20),
                    ),
                  ),
                ],
              ),
            );
          })),
    );
  }
}
class Item {
  String url;
  Item(this.url);
}

This is the output of the above code

Flutter GridView
Flutter GridView with Image and Text
Share

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *