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