Horizontal Progress Bar Linear Progress Indicator Using Flutter

admin_img Posted By Bajarangi soft , Posted On 12-10-2020

Horizontal progress bar also known as Linear Progress Indicator widget in flutter is used to display progress of any task in linear percentage form. The Linear Progress Indicator filled as the data loaded on screen and from 1 to 100 scale. In this tutorial we would Start Stop Linear Progress Indicator on button click using animation.

Horizontal Progress Bar Linear Progress Indicator Using Flutter

Horizontal Progress Bar Linear Progress Indicator
Complete Code For Horizontal Progress Bar Linear Progress Indicator In Flutter
main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Color(0xFF43A047),
                title: Text('Horizontal Progress Bar')
            ),
            body: Center(
                child: Progress()
            )
        )
    );
  }
}

class Progress extends StatefulWidget {
  @override
  ProgressState createState() => new ProgressState();
}

class ProgressState extends State<Progress>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation animation;
  double beginAnim = 0.0 ;
  double endAnim = 1.0 ;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(seconds: 5), vsync: this);
    animation = Tween(begin: beginAnim, end: endAnim).animate(controller)
      ..addListener(() {
        setState(() {
          // Change here any Animation object value.
        });
      });
  }

  @override
  void dispose() {
    controller.stop();
    super.dispose();
  }

  startProgress(){
    controller.forward();
  }

  stopProgress(){
    controller.stop();
  }

  resetProgress(){
    controller.reset();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(children: [
          Container(
              padding: EdgeInsets.all(20.0),
              child: LinearProgressIndicator(
                value: animation.value,
              )),

          RaisedButton(
            child: Text(" Start Progress "),
            onPressed: startProgress,
            color:  Color(0xFF43A047),
            textColor: Colors.white,
            splashColor: Colors.grey,
            padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
          ),

          RaisedButton(
            child: Text(" Stop Progress "),
            onPressed: stopProgress,
            color: Color(0xFF43A047),
            textColor: Colors.white,
            splashColor: Colors.grey,
            padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
          ),

          RaisedButton(
            child: Text(" Reset Progress "),
            onPressed: resetProgress,
            color:  Color(0xFF43A047),
            textColor: Colors.white,
            splashColor: Colors.grey,
            padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
          )
        ]
        ));
  }
}

Related Post