[英]Flutter : create an overlay progress bar
How do I create an overlay page in Flutter.如何在 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
现在,我希望当前页面褪色(90% 不透明度)并在我按下按钮时显示动画点
Not sure how to do this.不知道该怎么做。
Thanks for your help谢谢你的帮助
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进度条 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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.