How to Show Horizontal Progress Indicator in Flutter

Progress Indicators have their own importance in mobile app UI. A progress indicator lets the user know that something is happening behind the screen. In this blog post, I will explain how to add horizontal progress indicator in Flutter.

LinearProgressIndicator widget is used to show horizontal progress indicator with material design in Flutter. In the following Flutter progress indicator example, I am showing an indeterminant linear progress indicator.

import 'package:flutter/material.dart';


void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Linear Progress Indicator Example'),
        ),
        body: Center(
      child: Body()
    ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LinearProgressIndicator(backgroundColor: Colors.lightBlue);
  }
}

The output of the flutter horizontal progress bar example is as given below:

flutter horizontal progress indicator

1 thought on “How to Show Horizontal Progress Indicator in Flutter”

  1. Pingback: How to Show Circular Progress Indicator in Flutter – Flutter For You

Leave a Comment

Your email address will not be published. Required fields are marked *