Grid is a layout design system to show items in a list.
Today we will learn that how can we create grid in any flutter app.
So Grid is just like a box that can be same size or different.
Forgot the static grid, Now we will create dynamic grid in flutter app -
Let get the example -
I have already write for change the color of tile, today I'll tell you about change the no of tiles in a row.
In above example 4 tiles are in a row. Suppose we only want three grid in in a row then !!!
So it's very easy in flutter, just change crossAxisCount: 4, to the crossAxisCount: 3 and you will get 3 tiles in a row. You can also change it to at your requirement.
Today we will learn that how can we create grid in any flutter app.
So Grid is just like a box that can be same size or different.
Forgot the static grid, Now we will create dynamic grid in flutter app -
Let get the example -
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Grid Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'FLutter Grid'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: new GridView.count( crossAxisCount: 4, children: new List .generate(16, (index) { return new GridTile( child: new Card( color: Colors.teal.shade200, child: new Center( child: new Text('Tile $index'), ) ), ); }), ), ); } }
Example will look like this. In this we don't need to write the code for each and every tile. In this all titles will automatically generate.
I have already write for change the color of tile, today I'll tell you about change the no of tiles in a row.
In above example 4 tiles are in a row. Suppose we only want three grid in in a row then !!!
So it's very easy in flutter, just change crossAxisCount: 4, to the crossAxisCount: 3 and you will get 3 tiles in a row. You can also change it to at your requirement.
Comments
Post a Comment