flutter-tutorial

Flutter Progress Bar

A progress bar is a graphical control element that shows how far a task is progressing, such as downloading, uploading, installing, or transferring files. We’ll learn how to display a progress bar in a flutter application in this part.

The progress bar can be displayed in Flutter using two widgets, which are listed below:

  • LinearProgressIndicator
  • CircularProgressIndicator

Let’s take a closer look at it.

LinearProgressIndicator

The linear progress bar displays the task’s progress in a horizontal line. There are primarily two types of linear progress indicators available in Flutter:

  • Determinate: The Determinate progress bar shows how far you’ve come in completing the task at each stage. Its value will gradually increase from 0.0 to 1.0, indicating the quantity of work accomplished at that time. In order to create a determinable progress indicator, we must utilise a non-null number ranging from 0.0 to 1.0.
  • Indeterminate: An indeterminate progress bar does not reflect how far the task has progressed. It suggests we have no idea when the task will be completed. It progresses without telling how far it has progressed. Using a graph, we may create an indeterminate progress indicator.

CircularProgressIndicator

It’s a spinning widget that shows the status of your application’s waiting process. In a circular shape, it depicts the progress of an activity. It also has two different ways of displaying the progress bar: Determinate and Indeterminate.

When we wish to represent the status of ongoing tasks, such as the percentage of files downloaded or uploaded, we utilise a fixed progress bar. By supplying a value between 0.0 and 1.0, we may display progress.

When we don’t want to know how far along a procedure is, we utilise an indefinite progress indicator. CircularProgressIndicator displays an indefinite progress indicator by default.

Example:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Loader(),
    );
  }
}

class Loader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Learn Code Zone'),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator(
              backgroundColor: Colors.blue,
              valueColor: AlwaysStoppedAnimation(Colors.red),
              strokeWidth: 10,
            ),
            SizedBox(
              height: 15,
            ),
            LinearProgressIndicator(
              backgroundColor: Colors.redAccent,
              valueColor: AlwaysStoppedAnimation(Colors.blue),
              minHeight: 20,
            )
          ],
        ),
      ),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.