嗨，我设计了“忘记密码”屏幕，并在单击按钮时集成了Firebase。我想在用户单击按钮时显示CircularProgressIndicator，并在Firebase执行完成时将其关闭。
有人知道怎么做吗？我想在设备中央放置CircularProgressIndicator。
class ForgotPasswordScreen extends StatelessWidget {
final emailController = new TextEditingController();
final authHandler = new Auth();
@override
Widget build(BuildContext context) {
return new Scaffold(body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
),
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
controller: emailController,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () => authHandler.sendPasswordResetEmail(emailController.text).then((void nothing) {
print("done");
}).catchError((e) => print(e)),
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"FORGOT PASSWORD",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
),
));
}
}
答案 0 :(得分：3)
好吧，首先您需要稍微更改一下代码。
从Stateless更改为Stateful以管理小部件的状态，并放置一个名为isLoading的全局变量。
您可以使用该变量，按下按钮时将isLoading设置为true，完成后将isLoading设置为false。
在build方法内添加一个验证，以在isLoading为true时显示循环进度，否则显示您的字段。
此处的代码示例：
class ForgotPasswordScreen extends StatefulWidget {
@override
ForgotPasswordScreenState createState() {
return new ForgotPasswordScreenState();
}
}
class ForgotPasswordScreenState extends State<ForgotPasswordScreen> {
final emailController = new TextEditingController();
final authHandler = new Auth();
bool isLoading = false;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.white,
),
child: isLoading
? Center(
child: CircularProgressIndicator(),
)
: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Row(
children: <Widget>[
new Expanded(
child: new Padding(
padding: const EdgeInsets.only(left: 40.0),
child: new Text(
"EMAIL",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.redAccent,
fontSize: 15.0,
),
),
),
),
],
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 40.0, right: 40.0, top: 10.0),
alignment: Alignment.center,
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: Colors.redAccent,
width: 0.5,
style: BorderStyle.solid),
),
),
padding: const EdgeInsets.only(left: 0.0, right: 10.0),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Expanded(
child: TextField(
controller: emailController,
textAlign: TextAlign.left,
decoration: InputDecoration(
border: InputBorder.none,
hintText: 'PLEASE ENTER YOUR EMAIL',
hintStyle: TextStyle(color: Colors.grey),
),
),
),
],
),
),
Divider(
height: 24.0,
),
new Container(
width: MediaQuery.of(context).size.width,
margin: const EdgeInsets.only(
left: 30.0, right: 30.0, top: 20.0),
alignment: Alignment.center,
child: new Row(
children: <Widget>[
new Expanded(
child: new FlatButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
color: Colors.redAccent,
onPressed: () {
setState(() {
isLoading = true;
});
authHandler
.sendPasswordResetEmail(
emailController.text)
.then((void nothing) {
print("done");
setState(() {
isLoading = false;
});
}).catchError((e) => print(e));
},
child: new Container(
padding: const EdgeInsets.symmetric(
vertical: 20.0,
horizontal: 20.0,
),
child: new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Expanded(
child: Text(
"FORGOT PASSWORD",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
),
],
),
),
],
)));
}
}
答案 1 :(得分：2)
这个问题有点老了，但是我将在这里再注册一个选项，仅供将来参考。 我们将创建三个类。一个名为ModalRoundedProgressBar的模块可用于显示和隐藏CricularProgressBarIndicator，一个ModalRoundedProgressBarState类用于创建窗口小部件布局，最后是一个名为ProgressBarHandler的句柄类，该类允许我们在需要的位置和位置显示和隐藏圆形进度条。该代码有一些注释
{
"pg1": Product.objects.filter(groups__group="pg1")[:5],
"pg2": Product.objects.filter(groups__group="pg2")[:5],
"pg3": Product.objects.filter(groups__group="pg3")[:5],
"pg4": Product.objects.filter(groups__group="pg4")[:5],
}
现在，您只需要在屏幕小部件中实现此小部件即可。我将写一个简单的实现示例。
class ModalRoundedProgressBar extends StatefulWidget {
final double _opacity;
final String _textMessage; // optional message to show
final Function _handlerCallback; // callback that will give a handler object to change widget state.
ModalRoundedProgressBar({
@required Function handleCallback(ProgressBarHandler handler),
String message = "", // some text to show if needed...
double opacity = 0.7, // opacity default value
}) : _textMessage = message,
_opacity = opacity,
_handlerCallback = handleCallback;
@override
State createState() => _ModalRoundedProgressBarState();
}
//StateClass ...
class _ModalRoundedProgressBarState extends State<ModalRoundedProgressBar> {
bool _isShowing = false; // member that control if a rounded progressBar will be showing or not
@override
void initState() {
super.initState();
/* Here we create a handle object that will be sent for a widget that creates a ModalRounded ProgressBar.*/
ProgressBarHandler handler = ProgressBarHandler();
handler.show = this.show; // handler show member holds a show() method
handler.dismiss = this.dismiss; // handler dismiss member holds a dismiss method
widget._handlerCallback(handler); //callback to send handler object
}
@override
Widget build(BuildContext context) {
//return a simple stack if we don't wanna show a roundedProgressBar...
if (!_isShowing) return Stack();
// here we return a layout structre that show a roundedProgressBar with a simple text message
return Material(
color: Colors.transparent,
child: Stack(
children: <Widget>[
Opacity(
opacity: widget._opacity,
//ModalBarried used to make a modal effect on screen
child: ModalBarrier(
dismissible: false,
color: Colors.black54,
),
),
Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircularProgressIndicator(),
Text(widget._textMessage),
],
),
),
],
),
);
}
// method do change state and show our CircularProgressBar
void show() {
setState(() => _isShowing = true);
}
// method to change state and hide our CIrcularProgressBar
void dismiss() {
setState(() => _isShowing = false);
}
}
// handler class
class ProgressBarHandler {
Function show; //show is the name of member..can be what you want...
Function dismiss;
}
使用这种方法，您可以重用组件，而无需重新创建所有屏幕布局即可显示或隐藏圆滑的进度条。
对不起，我的英语不好。我希望这可以对某人有所帮助。