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
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

Output: