Flutter : create an overlay progress bar

Question

How do I create an overlay page in Flutter.

Basically, today I have a spinner in the center of my page. Now, I want the current page to fade (90% opacity) and show the animated dots when I press a button

Not sure how to do this.

Thanks for your help

Answer 1

Try with this.

        class SamplePage extends StatefulWidget {
        @override
        _SamplePageState createState() => _SamplePageState();
        }

        class _SamplePageState extends State<SamplePage> {
        ProgressBar _sendingMsgProgressBar;

        @override
        void initState() {
            super.initState();
            _sendingMsgProgressBar = ProgressBar();
        }

        @override
        void dispose() {
            _sendingMsgProgressBar.hide();
            super.dispose();
        }

        void showSendingProgressBar() {
            _sendingMsgProgressBar.show(context);
        }

        void hideSendingProgressBar() {
            _sendingMsgProgressBar.hide();
        }

        @override
        Widget build(BuildContext context) {
            return Scaffold(
            appBar: AppBar(
                title: Text('Progress Demo'),
            ),
            body: Center(
                child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                    RaisedButton(
                    child: Text("Start Progress"),
                    onPressed:(){
                        showSendingProgressBar();
                        Future.delayed(const Duration(milliseconds: 3000), () {
                        setState(() {
                            hideSendingProgressBar();
                        });
                        });
                    },
                    )
                ],
                ),
            ),
            );
        }
        }

ProgressBar class

        import 'package:flutter/material.dart';

        class ProgressBar {
        
        OverlayEntry _progressOverlayEntry;
        
        void show(BuildContext context){
            _progressOverlayEntry = _createdProgressEntry(context);
            Overlay.of(context).insert(_progressOverlayEntry);
        }
        
        void hide(){
            if(_progressOverlayEntry != null){
            _progressOverlayEntry.remove();
            _progressOverlayEntry = null;
            }
        }
        
        OverlayEntry _createdProgressEntry(BuildContext context) =>
            OverlayEntry(
                builder: (BuildContext context) =>
                    Stack(
                        children: <Widget>[
                        Container(
                            color: Colors.lightBlue.withOpacity(0.5),
                        ),
                        Positioned(
                            top: screenHeight(context) / 2,
                            left: screenWidth(context) / 2,
                            child: CircularProgressIndicator(),
                        )

                        ],

                    )
            );

        double screenHeight(BuildContext context) =>
            MediaQuery.of(context).size.height;

        double screenWidth(BuildContext context) =>
            MediaQuery.of(context).size.width;
        
        }

Answer 2

You can use the blurry_modal_progress_hud package: https://pub.dev/packages/blurry_modal_progress_hud