close

Flutter – Layout a Grid

Image for post

While working with Flutter I expected to make a rundown in my UI and I discovered some superb rundown gadget which I will show here in this blog. So how about we begin

list

The rundown is essentially a course of action of things so that they look coordinated and effectively open. The shudder list is something beyond a typical rundown. Here are a few sorts of records accessible in shudder:

  1. Matrix List
  2. Level List

Portable application’s major presentation design is indicating information as a rundown. We can utilize a standard ListView constructor to accomplish this objective for a less thing containing list.

ListView constructor has ListTile gadget

ListTile: A rundown tile contains one to three lines of text alternatively flanked by symbols or different gadgets, for example, checkboxes. The symbols (or different gadgets) for the tile are characterized with the main and following boundaries.

Here in LIstTile two significant gadgets are driving and following

driving: This gadget is utilized to show something like a symbol or logo or picture in the left the greater part of the rundown.

following: This gadget is utilized to show things like symbol, picture or logo right a large portion of the rundown.

ListView(
  children: <Widget>[
    ListTile(
      leading: FlutterLogo(),
      trailing: Icon(Icons.more_vert),
      title: Text('One-line with leading & trailing widget'),
    )
  ],
)
Image for post
List Example

Horizontal & Vertical List

On the off chance that you need a rundown which is scrollable left to right i.e on a level plane, you simply need to add scrollDirection: Axis.horizontal in your code.

scrollDirection: It can be even just as vertical as indicated by your need

ListView(
  scrollDirection: Axis.horizontal,
  children: <Widget>[
    Container(
      width: 100,
      color: Colors.grey,
    ),
    Container(
      width: 200,
      color: Colors.blueGrey,
    ),
    Container(
      width: 200,
      color: Colors.green,
    ),
    Container(
      width: 200,
      color: Colors.grey,
    )
  ],
)

We can set scrollDirection as vertical additionally to empower vertical looking on the rundown, you simply need to put underneath given code into your ListView gadget

scrollDirection: Axis.horizontal
Image for post

Grid List

An option in contrast to the typical List is Grid List. In the event that you need to show things in top notch as a lattice that comes in a steady progression beneath just as one next to the other, GridView is the gadget for you. How about we perceive how it functions

GridView: GridView is a scrollable 2D exhibit of gadgets. The most every now and again utilized matrix design is GridView.count

GridView.count

It makes a 2D scrollable gadget with the adaptable number of tiles in the cross hub.

GridView.count(
),

crossAxisCount

It gives you the adaptability to show the quantity of lattices in the cross hub of your view. The beneath given piece will permit indicating 2 network one next to the other on the body region.

crossAxisCount: 2

List.generate

It gives you the intensity of replication of similar lattice to various occasions you need to produce it.

Example

GridView.count(
  crossAxisCount: 2 ,
  children: List.generate(50,(index){
    return Container(
      child: Card(
        color: Colors.blue,
      ),
    );
  }),
)
Image for post

In the given model and recently clarified focuses, one can without much of a stretch relate and comprehend the reason for all gadgets and execution.

Sample Code and Output:

Image for post
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Container(
              child: Column(
                children: <Widget>[
                  Container(
                    height: 200,
                    child: ListView(
                      scrollDirection: Axis.horizontal,
                      children: <Widget>[
                        Container(
                          width: 200,
                          color: Colors.grey,
                        ),
                        Container(
                          width: 200,
                          color: Colors.blueGrey,
                        ),
                        Container(
                          width: 200,
                          color: Colors.green,
                        ),
                        Container(
                          width: 200,
                          color: Colors.grey,
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: 200,
                    child: ListView(
                      shrinkWrap: true,
                      scrollDirection: Axis.vertical,
                      children: <Widget>[
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.yellowAccent,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.green,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.red,
                        ),Container(
                          width: 50,
                          height: 100,
                          color: Colors.yellowAccent,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.blue,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.green,
                        ),
                        Container(
                          width: 50,
                          height: 100,
                          color: Colors.red,
                        )
                      ],
                    ),
                  ),
                  Container(
                    height: 200,
                    child: GridView.count(
                      scrollDirection: Axis.horizontal,
                      crossAxisCount: 2 ,
                      children: List.generate(50,(index){
                        return Container(
                          child: Card(
                            color: Colors.amber,
                          ),
                        );

                      }),
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment