Flutter – Add Gradient Effect to ListTile

In Flutter, a gradient effect is a visual effect that smoothly transitions between two or more colours, creating a gradual blend or progression of colours. To add a gradient background to a ListTile in Flutter, you can wrap the ListTile with a Container or another widget that supports gradients, such as a Card. In this article, we are going to add the Gradient effect to a ListTile. A Sample Image is attached to get an idea about what we are going to do in this article.

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(
      // Set the app's primary theme color
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: ListTileGradient(),
    );
  }
}

Step 5: Create ListTileGradient Class

In this article we are going to add the Gradient color effect to a List Tile . First we are going to wrap the ListTile by a Container then we are going to add Gradient effect to the Container .Comments are added for better understanding of the code.

Container(
            decoration: BoxDecoration(
              // Create a gradient background
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Colors.orange, Colors.white, Colors.green],
              ),
            ),
            child: ListTile(
              title: Text("GFG"),  // Text for the main title
              subtitle: Text("Geeks Premier League 2023"), // Text for the subtitle
              leading: Icon(Icons.book), // Icon for the leading position
            ),
          ),

Dart

class ListTileGradient extends StatelessWidget {
  const ListTileGradient({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient ListTile Example'),
      ),
      body: Center(
        child: ListTile(
          title: Container(
            decoration: BoxDecoration(
              // Create a gradient background
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Colors.orange, Colors.white, Colors.green],
              ),
            ),
            child: ListTile(
              title: Text("GFG"),  // Text for the main title
              subtitle: Text("Geeks Premier League 2023"), // Text for the subtitle
              leading: Icon(Icons.book), // Icon for the leading position
            ),
          ),
        ),
      ),
    );
  }
}

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(
      // Set the app's primary theme color
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      home: ListTileGradient(),
    );
  }
}

class ListTileGradient extends StatelessWidget {
  const ListTileGradient({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Gradient ListTile Example'),
      ),
      body: Center(
        child: ListTile(
          title: Container(
            decoration: BoxDecoration(
              // Create a gradient background
              gradient: LinearGradient(
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
                colors: [Colors.orange, Colors.white, Colors.green],
              ),
            ),
            child: ListTile(
              title: Text("GFG"),  // Text for the main title
              subtitle: Text("Geeks Premier League 2023"), // Text for the subtitle
              leading: Icon(Icons.book), // Icon for the leading position
            ),
          ),
        ),
      ),
    );
  }
}

Output: