Flutter Circular & Linear Progress Indicators
|

Flutter Circular & Linear Progress Indicators

Flutter Circular & Linear Progress Indicators is the time required to do certain processes, such downloading, installation, uploading, file transfer, etc. It can be seen in the progress indicator of any application. To see how long a process takes, or how far along it is in a task, you can use this.

Using Flutter Forum Circular, there are two ways to show progress:

Flutter Circular Progress Indicator

It’s called a Flutter Circular Progress Indicator, and it shows progress around a circle. The status bar is a circle that spins to show that the app is busy or on hold.

Example:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('CircularProgressIndicator Example'),

        ),

        body: Center(

          child: CircularProgressIndicator(),

        ),

      ),

    );

  }

}

Explanation

The Flutter Circular Progress Indicator is in the middle of the body of a Scaffold widget in this case. When you run the app, it will show a spinning circle progress bar to let you know that it is busy or on hold.

Linear Progress Indicator

A linear progress indicator and Flutter Circular, which is also called a progress bar, is a widget that shows progress along a line or in a straight line to show that the program is still being worked on.

Type of Linear Progress Indicator

Type of Linear Progress Indicator

When you look at an indeterminate progress indicator, it doesn’t show a specific number at any given time in class in flutter, it just shows that progress is being made. It doesn’t say how much more work needs to be done. We set the value field to null to make a progress bar that doesn’t show any information.

Example:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Indeterminate CircularProgressIndicator'),

        ),

        body: Center(

          child: CircularProgressIndicator(

            // By not setting the value, it defaults to an indeterminate state

            value: null,

          ),

        ),

      ),

    );

  }

}

In this case, the CircularProgressIndicator will keep spinning to show that progress is being made, but it won’t say how much progress has been made. This is helpful when you don’t know how long the whole job will take.

Determinate

Indicators that have a fixed number at all times are called determine progress indicators. It also shows how much work has been made. The value in the determined progress indicator goes from 0 to 1 in a straight line. A value of 0 means that progress has just begun, and a value of 1 means that progress is complete.

Example:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

  double _progress = 0.0;

  void _updateProgress() {

    setState(() {

      _progress += 0.1;

      if (_progress > 1.0) {

        _progress = 0.0; // Reset progress for demonstration purposes

      }

    });

  }

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: Scaffold(

        appBar: AppBar(

          title: Text('Determined CircularProgressIndicator'),

        ),

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              CircularProgressIndicator(

                value: _progress,

              ),

              SizedBox(height: 20),

              ElevatedButton(

                onPressed: _updateProgress,

                child: Text('Update Progress'),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

With numbers from 0.0 (just started) to 1.0 (completed), this setup shows how a determined progress indicator shows the exact progress made toward completion.

Conclusion

You can’t have Flutter dialogs without its flutter Circular and Linear Progress Indicators, which show how long it takes for various tasks to finish, such as installing, downloading, uploading, and transferring files. They let consumers see how things are going in the background while they work on various tasks in an app.

Similar Posts