Step Circle Progress Bar in Flutter

A progress bar is the circular loading bar that is seen when data or something is loading from the database, API, etc., We can also use it when we are Starting our application. A sample output given below gives you an idea of what we are implementing 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 in the pubspec.yaml file

Now we need to import the package into the pubspec.yaml file, which you find at the last of the root folder. From the command line:

flutter pub add step_circle_progressbar

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Step 3: Import the package into the main file

import 'package:step_circle_progressbar/step_circle_progressbar.dart';

Step 4: Working with the Body of the Scaffold

Use the center widget and give it the child StepCircularProgressBar, And set the properties like size, circleSize, currentSteps, totalSteps, progressColor, stepColor.

Scaffold(
    appBar: AppBar(
        title: Text('Step circle Progressbar'),
    ),
    body: Center(
        child: StepCircleProgressbar(
            size: 200,
            circleSize: 15,
            currentSteps: 50,
            totalSteps: 10,
            progressColor: Color.fromARGB(255, 2, 145, 45),
            stepColor: Color.fromARGB(255, 137, 255, 147)),
        ),
    ),
);

Final Code:

import 'package:flutter/material.dart';
import 'package:step_circle_progressbar/step_circle_progressbar.dart';

void main() {
  runApp(RunMyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Step circle Progressbar'),
        ),
        body: Center(
          child: StepCircleProgressbar(
              size: 200,
              circleSize: 15,
              currentSteps: 50,
              totalSteps: 10,
              progressColor: Color.fromARGB(255, 2, 145, 45),
              stepColor: Color.fromARGB(255, 137, 255, 147)),
        ),
      ),
    );
  }
}

Output: