Mastering Flutter Progress Indicators: Circular and Linear Widgets

Introduction:

In mobile app development, providing feedback to users during long-running tasks is crucial for a positive user experience. Flutter, the popular open-source UI framework from Google, offers various widgets to implement progress indicators seamlessly. In this blog post, we will explore two types of progress indicators: Circular Progress Indicator and Linear Progress Indicator, along with examples of how to use them effectively in your Flutter applications.

1.Circular Progress Indicator:

The Circular Progress Indicator is a round-shaped widget that visually represents the progress of an ongoing task. It is commonly used to show loading, processing, or download progress. Flutter provides a straightforward way to incorporate this widget into your app.

Example:

import 'package:flutter/material.dart';


class CircularProgressExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circular Progress Indicator Example'),
      ),
      body: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}


void main() {
  runApp(MaterialApp(
    home: CircularProgressExample(),
  ));
}

In this example, we import the necessary Flutter libraries and create a stateless widget named CircularProgressExample. The CircularProgressIndicator widget is placed inside the Center widget, making it centered on the screen. When this code runs, you will see a circular progress indicator spinning indefinitely, indicating an ongoing process.

2.Linear Progress Indicator:

The Linear Progress Indicator is a horizontal bar that visually represents the progress of a task. It is often used to display file upload progress, video buffering, or any other task with a known duration.

Example:

import 'package:flutter/material.dart';


class LinearProgressExample extends StatefulWidget {
  @override
  _LinearProgressExampleState createState() => _LinearProgressExampleState();
}

class _LinearProgressExampleState extends State<LinearProgressExample> {
  double _progressValue = 0.0;

  void simulateProgress() {
    setState(() {
      _progressValue += 0.1;
      if (_progressValue >= 1.0) _progressValue = 0.0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Linear Progress Indicator Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            LinearProgressIndicator(value: _progressValue),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: simulateProgress,
              child: Text('Simulate Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: LinearProgressExample(),
  ));
}

In this example, we create a stateful widget named LinearProgressExample. The _progressValue variable holds the current progress value, and the simulateProgress() function increments the value by 0.1 and resets it to 0.0 when it reaches 1.0. The LinearProgressIndicator widget uses the _progressValue to visualize the progress. When you run this code, you will see a linear progress indicator progressing as you press the "Simulate Progress" button.

Video Demo:

Source Code:

GitHub

Conclusion:

Progress indicators are essential elements in Flutter app development, keeping users informed about ongoing tasks and enhancing overall user experience. In this blog post, we explored two types of progress indicators: the Circular Progress Indicator and the Linear Progress Indicator, with practical examples on how to integrate them into your Flutter applications. Use these widgets wisely to provide a smooth and delightful experience to your app's users. Happy coding!