Flutter – Implement LinearGradient to CircularProgressIndicator
Last Updated :
16 Oct, 2023
The LinearGradient widget in Flutter allows you to create linear gradients, which are smooth transitions of colors along a straight line. In this article, we are going to see how can we implement LinearGradient Widget to CircularProgressIndicator in Flutter. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of LinearGradient
LinearGradient(
begin: Alignment.topLeft, // Starting point of the gradient
end: Alignment.bottomRight, // Ending point of the gradient
colors: [Color1, Color2, ...], // List of colors for the gradient
stops: [Stop1, Stop2, ...], // Optional list of color stops
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
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(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
title: 'Linear Gradient CircularProgressIndicator' ,
home: CircularLinearGradientExample(),
);
}
}
|
Step 5: Create CircularLinearGradientExample Class
In this class we are going to Implement the LinearGradient widget to the CircularProgressIndicator . Comments are added for better understanding.
Center(
child: Container(
width: 70, // Width of the container
height: 70, // Height of the container
decoration: BoxDecoration(
shape: BoxShape.circle, // Make it a circle
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.green, Colors.orange], // Gradient colors
),
),
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white), // Indicator color
strokeWidth:
5, // Set the width of the circular progress indicator
),
),
),
),
Dart
class CircularLinearGradientExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'Linear Gradient CircularProgressIndicator' ),
),
body: Center(
child: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.green, Colors.orange],
),
),
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white),
strokeWidth:
5,
),
),
),
),
);
}
}
|
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(
theme: ThemeData(
primarySwatch: Colors.green,
),
debugShowCheckedModeBanner: false ,
title: 'Linear Gradient CircularProgressIndicator' ,
home: CircularLinearGradientExample(),
);
}
}
class CircularLinearGradientExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( 'Linear Gradient CircularProgressIndicator' ),
),
body: Center(
child: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Colors.green, Colors.orange],
),
),
child: Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(
Colors.white),
strokeWidth:
5,
),
),
),
),
);
}
}
|
Output:
Share your thoughts in the comments
Please Login to comment...