Show And Hide Circular Progress Indicator In Flutter App

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

Load Show Hide Circular Progress Indicator on Button Click in Flutter,The Circular Progress Indicator widget also known as material style rounded loading bar is used to show display loading indicator while loading data from Internet. The most use of Circular Progress Indicator is when we are retrieving some json data from and to show time delay using progress indicator we can use Circular Progress Indicator.

Show And Hide Circular Progress Indicator In Flutter App

We would use Load Show Hide Circular Progress  on Button Click in Flutter iOS Android app.
You Can Add Show Hide Circular Progress Code:

bool visible = true ;

loadProgress(){

  if(visible == true){
    setState(() {
      visible = false;
    });
  }
  else{
    setState(() {
      visible = true;
    });
  }

}
@override
Widget build(BuildContext context) {
  return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            Visibility(
                maintainSize: true,
                maintainAnimation: true,
                maintainState: true,
                visible: visible,
                child: Container(
                    margin: EdgeInsets.only(top: 50, bottom: 30),
                    child: CircularProgressIndicator()
                )
            ),

            RaisedButton(
              onPressed: loadProgress,
              color: Colors.lightGreen,
              textColor: Colors.white,
              padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
              child: Text('Show Hide Circular Progress'),
            ),

          ],
        ),
      ));
}

Complete Code For Show HIde Circular Progress 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(
              centerTitle: true,
                backgroundColor: Colors.lightGreen,
                title: Text('Circular Progress Show and Hide')),
            body: Center(
                child: CircularProgress()
            )
        )
    );
  }
}

class CircularProgress extends StatefulWidget {

  CircularProgressWidget createState() => CircularProgressWidget();

}

class CircularProgressWidget extends State {

  bool visible = true ;

  loadProgress(){

    if(visible == true){
      setState(() {
        visible = false;
      });
    }
    else{
      setState(() {
        visible = true;
      });
    }

  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

              Visibility(
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                  visible: visible,
                  child: Container(
                      margin: EdgeInsets.only(top: 50, bottom: 30),
                      child: CircularProgressIndicator()
                  )
              ),

              RaisedButton(
                onPressed: loadProgress,
                color: Colors.lightGreen,
                textColor: Colors.white,
                padding: EdgeInsets.fromLTRB(8, 8, 8, 8),
                child: Text('Show Hide Circular Progress'),
              ),

            ],
          ),
        ));
  }
}

 

Related Post