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