Flutter – Progress Border

While Loading the data user needs to wait a while, During this time we can show the loading circular in Flutter Applications. Flutter is awesome as it gives you packages that make your application easy to implement, fast and pretty. While fetching the data from the database and APIs data may come after some time, so during this time we have to await for the data and we can show another widget at that time called loading borders. Progress Border is the Flutter widget, where we can make loading animation for our app screen. A sample video is given below 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 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:

Dart

flutter pub add progress_border

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

Dart

import 'package:progress_border/progress_border.dart';

Step 4: We need to create the animation controller that controls the animation of the border loader.

Dart

late final animationController = AnimationController(
    vsync: this,
      // this isthe duration of the progress
    duration: const Duration(seconds: 5),
  );

Step 5: Creating the method restart that basically implements our logic of animation, We have to animation, reverse, and forward. We will use the material button to call the restart method and animate according to the status of the animation Controller.

Dart

void restart() {
    if (animationController.status == AnimationStatus.forward ||
        // reverse if forward is completed and if we click
        animationController.value >= 1) {
      // on start button
      animationController.reverse();
    } else {
      // forward animation while starting
      animationController.forward();
    }
}

Step 6: Use of the widget progress border is pretty simple. If any widget uses the border, we can use the progress border widget instead of using the simple border-radius to give the border to the containers.

Dart

border: ProgressBorder.all(
        // color of the border
        color: Colors.green,
        // width of the progress border
        width: 8,
        // animation of the border
        progress: animationController.value,
),

Code Example

Dart

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

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

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

  @override
  State<RunMyApp> createState() => _RunMyAppState();
}

class _RunMyAppState extends State<RunMyApp>
    with SingleTickerProviderStateMixin {
  // animationController
  late final animationController = AnimationController(
    vsync: this,
    duration: const Duration(seconds: 10),
  );
    // restart method to implement
    // the progress border
    void restart() {
    if (animationController.status == AnimationStatus.forward ||
        animationController.value >= 1) {
      animationController.reverse();
    } else {
      animationController.forward();
    }
  }


  @override
  void initState() {
    super.initState();
    animationController.addListener(() {
      setState(() {});
    });
  }

  @override
  void dispose() {
    animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Border Loader"),
        ),
        body: Column(
          children: [
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.green.withAlpha(100),
                        shape: BoxShape.circle,
                        border: ProgressBorder.all(
                          color: Colors.green,
                          width: 8,
                          progress: animationController.value,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.green.withAlpha(100),
                        borderRadius: BorderRadius.circular(16),
                        border: ProgressBorder.all(
                          color: Colors.green,
                          width: 8,
                          progress: animationController.value,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.green.withAlpha(100),
                        border: ProgressBorder.all(
                          color: Colors.green,
                          width: 8,
                          progress: animationController.value,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Center(
                    child: Container(
                      width: 100,
                      height: 100,
                      decoration: BoxDecoration(
                        color: Colors.green.withAlpha(100),
                        border: animationController.value >= 1
                            ? Border.all(
                                color: Colors.green,
                                width: 8,
                              )
                            : null,
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            // material button to
            // start the animation
            MaterialButton(
              // calling restart method
              onPressed: restart,
              child: Text("Start"),
            ),
          ],
        ),
      ),
    );
  }
}

Output UI Screen:

Output: