Flutter – Implement LinearGradient to CircularProgressIndicator

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, // Set the app's primary theme color
      ),
      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, // 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
            ),
          ),
        ),
      ),
    );
  }
}

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, // Set the app's primary theme color
      ),
      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, // 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
            ),
          ),
        ),
      ),
    );
  }
}

Output: