我想用Firebase实现简单的登录/注销系统。我已经成功实施了登录/注销系统。登录时,用户将被定向到主屏幕,注销后,用户将被定向到登录屏幕(使用根屏幕处理转到主页或登录(。然后我添加新页面设置屏幕并将注销过程移动到设置页面。因此,该过程是用户登录->主页(打开抽屉(->设置。 但是,执行此操作后,注销过程在设置屏幕中变为错误并收到此消息
"另一个例外:setState(( 或 markNeedsBuild(( 在 widget 调用时调用 树被锁住了">
奇怪的是,如果我直接从主页到设置屏幕进行登录/注销过程,设置屏幕代码没有问题。
代码(RootScreen & SettingScreen(:
import 'package:flutter/material.dart';
import 'login_screen.dart';
import 'home_screen.dart';
import 'setting_screen.dart';
import '../utilities/auth.dart';
class RootScreen extends StatefulWidget {
RootScreen({this.auth});
final BaseAuth auth;
@override
State<StatefulWidget> createState() => new RootState();
}
enum AuthStatus { notSignedIn, signedIn }
class RootState extends State<RootScreen> {
AuthStatus authStatus = AuthStatus.notSignedIn;
@override
void initState() {
super.initState();
widget.auth.currentUser().then((userId) {
setState(() {
authStatus =
userId == null ? AuthStatus.notSignedIn : AuthStatus.signedIn;
});
});
}
void signedIn() {
setState(() {
authStatus = AuthStatus.signedIn;
});
}
void signedOut() {
setState(() {
authStatus = AuthStatus.notSignedIn;
});
}
@override
Widget build(BuildContext context) {
switch (authStatus) {
case AuthStatus.notSignedIn:
return new LoginScreen(auth: widget.auth, onSignedIn: signedIn);
case AuthStatus.signedIn:
return new HomeScreen(auth: widget.auth, onSignedOut: signedOut);
}
}
}
2. Setting Screen & State:
import 'dart:async';
import 'package:flutter/material.dart';
import '../utilities/auth.dart';
class SettingScreen extends StatefulWidget {
SettingScreen({this.auth, this.onSignedOut});
final BaseAuth auth;
final VoidCallback onSignedOut;
final String title = "Setting";
@override
SettingState createState() => SettingState();
}
class SettingState extends State<SettingScreen> {
void signOut() async {
setState(() {
try {
widget.auth.signOut();
widget.onSignedOut();
} catch (e) {
print(e);
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Settings'),
actions: <Widget>[
new FlatButton(
child: Text('Logout',
style: new TextStyle(fontSize: 17.0, color: Colors.white)),
onPressed: signOut,
)
],
),
body: new Container(
child: new Center(
child: new Text('Settings', style: new TextStyle(fontSize: 32.0)),
)),
);
}
}
主屏幕:
class HomeScreen extends StatefulWidget {
HomeScreen({this.auth, this.onSignedOut});
final BaseAuth auth;
final VoidCallback onSignedOut;
@override
HomeState createState() => HomeState();
void signOut() async {
try {
await auth.signOut();
onSignedOut();
} catch (e) {
print(e);
}
}
}
//.. Inside the HomeState -> ListTile to Setting Menu
ListTile(
title:
Text('Pengaturan', style: new TextStyle(color: Colors.black)),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SettingScreen(
auth: widget.auth, onSignedOut: widget.onSignedOut)),
);
},
),
//..
在这种情况下,如何避免此setState和widget锁定异常?
感谢您基于 aziza 评论,我通过添加两个 Navigator.pop(context( 来解决问题,第一个在抽屉中,然后进入其他菜单以避免小部件锁定,第二个在注销方法中,所以回到 RootScreen。
家乡州抽屉:
//.. Inside the HomeState -> ListTile to Setting Menu
ListTile(
title:
Text('Pengaturan', style: new TextStyle(color: Colors.black)),
onTap: () {
// ...
// Add this
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SettingScreen(
auth: widget.auth, onSignedOut: widget.onSignedOut)),
);
},
),
//..
设置屏幕中的注销方法:
void signOut() async {
setState(() {
try {
widget.auth.signOut();
widget.onSignedOut();
Navigator.pop(context);
} catch (e) {
print(e);
}
});
}
另一种解决方案是使用WidgetsBinding.instance?。addPostFrameCallback((_( {}
@override
void initState() {
super.initState();
WidgetsBinding.instance?.addPostFrameCallback((_) {
widget.auth.currentUser().then((userId) {
setState(() {
authStatus =
userId == null ? AuthStatus.notSignedIn : AuthStatus.signedIn;
});
});
});
}