There are two types of mostly used layout widgets in a Flutter by Flutter application developers which are ListView and GridView Widget.

ListView Widget in Flutter

ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. There are also four types of ListView as List, ListView.builder, ListView.separated, and ListView.custom which has different functionality in flutter application development. The default ListView example with children widget is:

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp(),));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("This is AppBar"),
      ),
      body: Container(
        child: ListView( //ListView Widget
          children: [
            Text("List 1"),
            Text("List 2"),
            Text("List 3"),
            Text("List 4"),
            Text("List 5"),
          ],
          shrinkWrap: true,
        ),
      ),
    );
  }
}

GridView Widget in Flutter

Grid is known as the items arranged in the matrix method like 2x3, 3x3, etc. In some cases, users might want to display items in a grid rather than a list of items that come one after another. The simple example of GridView widget is the buttons arranged in the Calculator as you can see the buttons in the calculator are arranged in a matrix method like 4x4 and 4x5 grid. The best way to start using the GridView widget is by using GridView.count() constructor as it allows you to specify how many rows and columns you like to give to your GridView widget using crossAxisCount property.

import "package:flutter/material.dart";

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MyApp(),));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("This is AppBar"),
      ),
      body: Container(
        child: GridView.count(
          crossAxisCount: 3,
          children: List.generate(12, (index){
            return Center(
              child: Text(
                'Item $index',
              ),
            );
          })
        ),
      ),
    );
  }
}

Output of ListView and GridView Widget

ListView & GridView Widget in Flutter

Complete Flutter Series List: Click here 

Categories: Blog Tags: flutter, review2tech flutter series, listview widget, gridview widget, layout in flutter, flutter android, flutter ios


3 Comments

  • Comment

    nike shox for women

    2020-08-14 00:32:33

    I have to express my appreciation for your generosity giving support to people who actually need guidance on this particular study. Your special dedication to getting the message along ended up being certainly interesting and have all the time permitted others like me to achieve their aims. Your entire informative report means this much a person like me and far more to my peers. Warm regards; from each one of us.

    Reply

  • Comment

    yeezys

    2020-08-16 04:48:43

    I simply wished to appreciate you once again. I do not know the things that I might have created without the type of tips and hints contributed by you relating to my subject. It was before a very daunting matter for me personally, however , viewing your well-written style you dealt with it took me to weep with fulfillment. I will be happy for your help and as well , wish you are aware of a great job you have been accomplishing teaching most people via your webblog. More than likely you have never encountered all of us.

    Reply

  • Comment

    christian louboutin outlet

    2020-08-18 10:58:29

    My wife and i got absolutely more than happy John managed to complete his investigation through the entire ideas he discovered in your web site. It is now and again perplexing just to always be giving for free points which often men and women may have been trying to sell. We grasp we have the blog owner to give thanks to because of that. Those illustrations you have made, the straightforward website menu, the friendships you can help to create - it is all remarkable, and it is assisting our son in addition to the family imagine that the article is awesome, which is certainly exceedingly serious. Thanks for all the pieces!

    Reply

Leave a comment