Flutter：创建叠加进度条

Question

如何在Flutter中创建覆盖页面。

基本上，今天我的页面中央有一个微调框。现在，我希望当前页面褪色（不透明度为90％），并在按下按钮时显示动画点。

不确定如何执行此操作。

感谢您的帮助

Answer 1

尝试一下。

2019-10-08 10:43:54.891 8502-8519/com.best.payment.merchant I/zygote64: Background concurrent copying GC freed 45782(2MB) AllocSpace objects, 9(180KB) LOS objects, 50% free, 6MB/13MB, paused 111us total 112.225ms

2019-10-08 10:44:00.496 8502-8502/com.best.payment.merchant I/ViewRootImpl: jank_removeInvalidNode jank list is null

ProgressBar类

        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();
        }

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

        @override
        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();
                        });
                        });
                    },
                    )
                ],
                ),
            ),
            );
        }
        }