The GridView widget in Flutter is similar to a 2-D Array in programming languages. It's used to display widgets on a grid, such as images, text, or icons. GridView is utilised when we need to show items in a grid layout. It allows users to select items from the grid list by tapping on them.
There are different types of GridView :
GridView.custom()
Properties of Flutter GridView.count
This is the most frequently used grid layout in Flutter because the grid's size is already known.Developers can specify a fixed number of rows and columns.
crossAxisCount
It determines the number of columns in GridView.
crossAxisSpacing
mainAxisSpacing
padding
physics
scrollDirection
shrinkWrap
reverse
Properties of GridView.builder
It is used when we want to display data dynamically. If the user wants to create a grid with a large (infinite) number of children, then they can use the GridView.builder() constructor because the builder is called only for those children that are actually visible.
itemCount
It is used to define the amount of data to be displayed.
gridDelegate
itemBuilder
Properties of GridView.extent
GridView.extent is a type of GridView in Flutter that creates a scrollable grid with flexible item sizes. It uses the available space to determine the size of the items, allowing you to create grids where the items can have different sizes based on their content or aspect ratio. Particularly useful for creating responsive grids that adapt to different screen sizes or display items with varying sizes.
maxCrossAxisExtent
Specifies the maximum extent (width for vertical scrolling or height for horizontal scrolling) of each item in the grid.
Allows for creating a grid with custom extent values, where each tile has a maximum cross-axis extent.
Practice with GridView widget
GridView.count Example
class GridViewCountExample extends StatelessWidget {
GridViewCountExample({super.key});
final List<String> imageUrls = [
'https://picsum.photos/id/242/200/300',
'https://picsum.photos/id/2/200/300',
'https://picsum.photos/id/83/200/300',
'https://picsum.photos/id/24/200/300',
'https://picsum.photos/id/240/200/300',
'https://picsum.photos/id/67/200/300',
'https://picsum.photos/id/45/200/300',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('GridView.count'),
),
body: GridView.count(
crossAxisCount: 2, // Number of columns
children: imageUrls.map((imageUrl) => Image.network(imageUrl)).toList(),
),
),
);
}
}
Yorumlar