在Flutter中的前面显示CircularProgressIndicator [英] Show CircularProgressIndicator in front in Flutter
问题描述
我想在其他小部件前面显示一个类似加载的圆条。
下面是我当前正在使用的代码。它显示了循环加载，但显示在其他小部件之间。
它应该在顶部。根据我的建议，我尝试使用Stack，但仍显示在小部件之间。我在这里做什么错了？
class LoginPage扩展了StatefulWidget {
@override
_LoginPageState createState（） => _LoginPageState（）;
}
类_LoginPageState扩展了State< LoginPage> {
bool visible = true; //测试目的是真的。实际上这是错误的。
@override
构件构建（BuildContext上下文）{
return Scaffold（
键：_scaffoldKey，
主体：Stack（
儿童：< Widget> [
新Container（
装饰：BoxDecoration（
渐变：LinearGradient（
开始：Alignment.topRight，
结束：FractionalOffset）。 bottomCenter，/// Alignment.bottomLeft，
颜色：[Colors.green [900]，Colors.lightBlueAccent]），
），
），SingleChildScrollView（
子代：新表格（
项：_formKey，
自动验证：_autoValidate，
子代：中心（
子代：列（
子代：< Widget> ; [
Row（
children：< Widget> [
VerticalText（），
TextLogin（），
]，
），
Di vider（），
容器（
宽度：280，
），
容器（
宽度：280，
子元素：TextFormField（
样式：TextStyle（
颜色：Colors.white，
），
装饰：InputDecoration（
边框：InputBorder.none，
hintText：'Enter Email'，
fillColor：Colors.lightBlueAccent，
labelText：'Email'，
labelStyle：TextStyle（
color：Colors.white70，
fontSize ：20，
），
），
控制器：emailController，
自动更正：true，
验证者：validateEmail，
onSaved：（String val）{
_email = val;
}，
）
），
Container（
width：280，
child：TextFormField（
style：TextStyle （
颜色：Colors.white，
），
装饰：InputDecoration（
边框：InputBorder.none，
hintText：输入密码，
fillColor：Colors.lightBlueAccent，
labelText：'Password'，
labelStyle：TextStyle（
color：Colors.white70，
fontSize：20，
），
），
控制器：passwordController，
自动更正：true，
obscureText：true，
验证者：validatePassword，
onSaved :(字符串val）{
_password = val;
}，
）
），
RaisedButton（
onPressed：_validateInputs，
颜色：Colors.green，
文本颜色：Colors.white，
填充：EdgeInsets.fromLTRB（10，10，10，10），
子级：Text（'Login'），
），
可见性（
子项：Center（
子项：Column（
crossAxisAlignment：CrossAxisAlignment.center，
子项： < Widget> [
SizedBox（
child：CircularProgressIndicator（
strokeWidth：4.0，
valueColor：AlwaysStoppedAnimation（Colors.white），
），
高度：200.0，
宽度：200.0，
），
]，
），
），
可见：可见，
），
]，
），
）
）
）
]，
），
）;
}
我在SO中看到过类似的问题，但仍然很难解决。
I want to display a circular bar like loading in front of other widgets. Below is the code which i am currently using. It shows the Circular loading but its between other widget.
It should be on top. Based on the suggestion I tried using Stack but it is still showing in between the widget. What am I doing wrong here?
class LoginPage extends StatefulWidget {
@override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
bool visible = true ; //Testing purpose it is true. Actually it is false.
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: Stack(
children: <Widget>[
new Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: FractionalOffset.bottomCenter,//Alignment.bottomLeft,
colors: [Colors.green[900], Colors.lightBlueAccent]),
),
),SingleChildScrollView(
child: new Form(
key: _formKey,
autovalidate: _autoValidate,
child: Center(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
VerticalText(),
TextLogin(),
],
),
Divider(),
Container(
width: 280,
),
Container(
width: 280,
child: TextFormField(
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Email',
fillColor: Colors.lightBlueAccent,
labelText: 'Email',
labelStyle: TextStyle(
color: Colors.white70,
fontSize: 20,
),
),
controller: emailController,
autocorrect: true,
validator: validateEmail,
onSaved: (String val) {
_email = val;
},
)
),
Container(
width: 280,
child: TextFormField(
style: TextStyle(
color: Colors.white,
),
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'Enter Password',
fillColor: Colors.lightBlueAccent,
labelText: 'Password',
labelStyle: TextStyle(
color: Colors.white70,
fontSize: 20,
),
),
controller: passwordController,
autocorrect: true,
obscureText: true,
validator: validatePassword,
onSaved: (String val) {
_password = val;
},
)
),
RaisedButton(
onPressed: _validateInputs,
color: Colors.green,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
child: Text('Login'),
),
Visibility(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
child: CircularProgressIndicator(
strokeWidth: 4.0,
valueColor : AlwaysStoppedAnimation(Colors.white),
),
height: 200.0,
width: 200.0,
),
],
),
),
visible: visible,
),
],
),
)
)
)
],
),
);
}
I have seen similar questions in SO but still getting hard time to resolve it.
How to work with progress indicator in flutter?
flutter how to get a circular progress indicator working
Flutter : create an overlay progress bar
How to display CircularProgressIndicator on top of all widget in a centre of the screen
The real meaning of circularProgressIndicator is to be run while loading process without letting user interrupt.
To remove interruption by user in between, one should put circularProgressIndicator in a dialog with property barrierDismissible: false.
One should create this loading indicator as reusable widget.
You can craete a method like below and can use it anywhere over the screen without defining in screen. (this does not require stack also.). Dialog will appear on the center of the screen.
buildShowDialog(BuildContext context) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Center(
child: CircularProgressIndicator(),
);
});
}
For Reference: Checkout code below:
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Demo(),
);
}
}
class Demo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Circle Progress Indicator Demo"),
),
body: Center(
child: MaterialButton(
child: Text("Press Me!"),
onPressed: () => buildShowDialog(context),
),
),
);
}
buildShowDialog(BuildContext context) {
return showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return Center(
child: CircularProgressIndicator(),
);
});
}
}
Output:
这篇关于在Flutter中的前面显示CircularProgressIndicator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
