Flutter – Implement a ListTile Inside a GrdiView
In this article, we are going to combine two major flutter widgets. We are going to implement a ListTile inside a GridView. Also, we are going to see the basic syntaxes of the individual widgets. A sample Image is given below to get an idea about what we are going to do in this article.
Basic Syntax of GridView
GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of columns in the grid
crossAxisSpacing: 10.0, // Spacing between columns
mainAxisSpacing: 10.0, // Spacing between rows
),
children: <Widget>[
// List of widgets to display in the grid
// Add your widgets here
],
)
Basic Syntax of ListTile
ListTile(
leading: Icon(Icons.someIcon), // An optional widget to display before the title
title: Text('Title'), // The main content of the ListTile
subtitle: Text('Subtitle'), // Optional secondary content below the title
trailing: Icon(Icons.someIcon), // An optional widget to display after the title
onTap: () {
// Optional callback function to handle onTap or tap gestures
},
)
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() { runApp(MyApp()); } |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // Define the app's theme theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , // Hide the debug banner home: GridViewWithListTiles(), // Set the home screen to PasswordTextField ); } } |
Step 5: Create GridViewWithListTiles Class
In this class we are going to implement an ListTile inside an GridView in a Flutter application.Comments are added for better understanding.
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of columns
crossAxisSpacing: 10.0, // Spacing between columns
mainAxisSpacing: 10.0, // Spacing between rows
),
itemCount: 6, // Number of items in the grid
itemBuilder: (BuildContext context, int index) {
return Card(
// Wrap each ListTile in a Card for a border and elevation
elevation: 4.0, // Add elevation for a raised effect
child: ListTile(
leading: Icon(Icons.star),
title: Text('Item $index'),
subtitle: Text('Subtitle for Item $index'),
onTap: () {
// Handle tap on the ListTile
},
),
);
},
),
Dart
class GridViewWithListTiles extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Styled GridView with ListTiles' ), ), body: Padding( padding: const EdgeInsets.all(10.0), // Add padding to the GridView child: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, // Number of columns crossAxisSpacing: 10.0, // Spacing between columns mainAxisSpacing: 10.0, // Spacing between rows ), itemCount: 6, // Number of items in the grid itemBuilder: (BuildContext context, int index) { return Card( // Wrap each ListTile in a Card for a border and elevation elevation: 4.0, // Add elevation for a raised effect child: ListTile( leading: Icon(Icons.star), title: Text( 'Item $index' ), subtitle: Text( 'Subtitle for Item $index' ), onTap: () { // Handle tap on the ListTile }, ), ); }, ), ), ); } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // Define the app's theme theme: ThemeData( primarySwatch: Colors.green, // Set the app's primary theme color ), debugShowCheckedModeBanner: false , // Hide the debug banner home: GridViewWithListTiles(), // Set the home screen to PasswordTextField ); } } class GridViewWithListTiles extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Styled GridView with ListTiles' ), ), body: Padding( padding: const EdgeInsets.all(10.0), // Add padding to the GridView child: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, // Number of columns crossAxisSpacing: 10.0, // Spacing between columns mainAxisSpacing: 10.0, // Spacing between rows ), itemCount: 6, // Number of items in the grid itemBuilder: (BuildContext context, int index) { return Card( // Wrap each ListTile in a Card for a border and elevation elevation: 4.0, // Add elevation for a raised effect child: ListTile( leading: Icon(Icons.star), title: Text( 'Item $index' ), subtitle: Text( 'Subtitle for Item $index' ), onTap: () { // Handle tap on the ListTile }, ), ); }, ), ), ); } } |