Skip to main content

All about GridView - Flutter

GridView in Flutter - Learn About GridView In Depth


When we need widgets stacked like in a grid, we use GridView. There are two main ways in which you can use a GridView. 

First Method, Using GridView.count()

GridView.count requires 2 things, the first is cross axis count which tells how many boxes or grids will be there in one row.
The second is children property which takes in  a list of widget.


Second Method, Using GridView.builder()

GridView.builder() takes in various parameters, one is itemCount which takes in number of items we want to display. Other required property is gridDelegate controls the layout of the tiles in gridView and the last property which we will talk about is itemBuilder which is similar to the one used in List View. itemBuilder takes in a function with two parameters, context and index. context tells where to place the child on screen or basically which context to place the child in and index is a number which runs through 0 to itemCount - 1.




If You want to use SliverGridDelegateWithMaxCrossAxisExtent()



Output for the 1st method:





Output for Method 2 (MAX CROSS AXIS):




Output for Method 2 Max Cross Extent:



To know more about Text Widget : Text Widget In Depth - Flutter.

Read about Algorithms at www.introtoalgo.com

Labels:
Location: United States

Popular posts from this blog

All about ListView

ListView InDepth Review - Flutter When we need widgets stacked up one below another, we use ListView. There are four ways in which you can use a ListView. We will see each of them in use one by one. First Method : Normally Calling ListView widget. class HomePage extends StatefulWidget { @ override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> { @ override Widget build(BuildContext context) { return Scaffold( body: ListView( children: <Widget>[ Container( color: Colors.red, child: Text( 'Element 1' ), ), Container( color: Colors.blue, child: Text( 'Element 2' ), ), Container( color: Colors.green, child: Text( 'Element 3' ), ), Container( color: Colors.orange, child: Text( 'Element 4' ), ...
Read more

Stateless Vs Stateful Widgets

Whats what and what are they really? Stateless Widgets and Stateful Widget explained. In a line, if your widget change appearance use stateful widget and if it doesn't use stateless widget that's all. We know that flutter is all about widgets and in flutter there are 2 types of widgets. Stateless Widget Stateful Widget Stateless Widget A stateless widget never changes. For example Icon, IconButton, Text and so on. Once they are built they remain the same during the lifetime of the application. There are various places where you might want to use Stateless widget such as your app Title, Images, and so on. Stateful Widget A stateful widget is something which has a state so basically that widget needs to be rebuilt whenever some event occurs. A good example would be a toggle button. Whenever you tap on the toggle button its state changes to either on or off. The appearance of the button changes and this happens because the stateful widget asks the build method to rebuild the widge...
Read more