Flutter 登入退出功能注意事項

leyan發表於2019-03-04
Flutter

實現登入功能

為避免使用者通過登入介面登入應用後按返回鍵仍能回到登入介面，我們需要在使用者登入後建立一個新的路由棧

直接上程式碼，程式入口：

void main() {
  DataUtils.getUserInfo().then((userInfo) {
    runApp(MyApp(userInfo));
  });
}

class MyApp extends StatelessWidget {
  MyApp(this.userModel);

  final UserModel userModel;

  @override
  Widget build(BuildContext context) {
    GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
    return MaterialApp(
      title: `MaterialManagement`,
      theme: ThemeData(accentColor: Colors.white, primaryColor: Colors.blue),
      home: userModel == null
          ? LoginPage()
          : HomePage(),
      routes: <String, WidgetBuilder>{
        `/login`: (BuildContext context) => LoginPage(),
        `/home`: (BuildContext context) => HomePage()
      },
    );
  }
}
複製程式碼

現在我們要定義一個 loginButton 的 onPressed 事件的回撥函式 _loginWithAvatarAndPassword 來完成重新建立路由棧的工作，這樣就可以避免在登入成功後按返回鍵回到登入介面的問題（登出同理）：

Future<dynamic> _loginWithAvatarAndPassword() async {
        final form = _formKey.currentState;
        if (form.validate()) {
          _formKey.currentState.save();
          LoginUtils.login(user.avatar, user.password, (isAlive, userInfo) {
            if (isAlive) {
              runApp(MyApp(userInfo)); // look here!
            }
          });
        }
    }
複製程式碼

實現雙擊退出應用功能

WillPopScope 註冊一個回撥 onWillPop 用來自定義使用者對路由的操作

自定義我們的回撥函式，

Future<bool> _doubleExit() {
    int nowTime = new DateTime.now().microsecondsSinceEpoch;
    if (_lastClickTime != 0 && nowTime - _lastClickTime > 1500) {
      return new Future.value(true);
    } else {
      _lastClickTime = new DateTime.now().microsecondsSinceEpoch;
      new Future.delayed(const Duration(milliseconds: 1500), () {
        _lastClickTime = 0;
      });
      return new Future.value(false);
    }
  }
複製程式碼

將事先建立好的子節點 _getBody() 巢狀在 WillPopScope 中

Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: _doubleExit, // look here!
      child: _getBody(),
    );
  }
複製程式碼

相關文章