Flutter-實現一個簡單的登錄功能

登錄邏輯判斷

1.緩存token,使用的是shared_preferences

最新版本(https://pub.flutter-io.cn/packages/shared_preferences)
shared_preferences: ^0.5.6

簡單封裝一層

class MTCacheTool {
  // 存儲token
  static const String keyToken = 'xxxxxxxxxTK';
  // 存儲用戶名
  static const String keyUserName = 'xxxxxxxxxUserName';
  static Future<bool> getLoginState() async{
    SharedPreferences sp = await SharedPreferences.getInstance();
    String token = sp.get(MTCacheTool.keyToken) as String;
    if(token == null) {
      return false;
    }
    return true;
  }
}

2.在入口類判斷是否登錄，決定加載哪個頁面

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAPPState createState() {
    return _MyAPPState();
  }
}

class _MyAPPState extends State<MyApp> {

  // 判斷是否登錄
  bool _ifLogin = false;
  _getLoginState() async {
    _ifLogin = await MTCacheTool.getLoginState();
  }

  @override
  void initState() {
    super.initState();
    // 判斷是否登錄
    _getLoginState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'XX',
      theme: ThemeData(
      ),
      home: _ifLogin ? MyHomePage(title: 'XX') : LoginPage()
    );
  }
}

3.登錄界面

登錄界面代碼如下

// 這是登錄界面
class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() {
    return _LoginPageState();
  }
}

class _LoginPageState extends State<LoginPage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // 可以點擊空白收起鍵盤
      behavior: HitTestBehavior.translucent,
      onTap: () {
        FocusScope.of(context).requestFocus(FocusNode()); // 收起鍵盤
      },
      child: Container(child: Scaffold(
        appBar: AppBar(title: Text('登錄')),
        body: Container(
          // 所有內容都設置向內55
          padding: EdgeInsets.all(55),
          // 垂直布局
          child: Column(
            children: <Widget>[
              // 使用Form將兩個輸入框包起來 做控制
              Form(
                key: _formKey,
                // Form里面又是一個垂直布局
                child: Column(
                  children: <Widget>[
                    // 輸入手機號
                    TextFormField(
                      // 是否自動對焦
                      autofocus: false,
                      // 輸入模式設置為手機號
                      keyboardType: TextInputType.phone,
                      // 裝飾
                      decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(
                              horizontal: 20, vertical: 10),
                          hintText: '請輸入手機號',
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(5))),
                      // 輸入框校驗
                      validator: (value) {
                        RegExp reg = new RegExp(r'^\d{11}$');
                        if (!reg.hasMatch(value)) {
                          return '請輸入11位手機號碼';
                        }
                        return null;
                      },
                    ),

                    // 間隔
                    SizedBox(height: 20),

                    // 輸入密碼
                    TextFormField(
                      obscureText: true,
                      // 是否自動對焦
                      autofocus: false,
                      // 輸入模式設置為手機號
                      keyboardType: TextInputType.visiblePassword,
                      // 裝飾
                      decoration: InputDecoration(
                          contentPadding: EdgeInsets.symmetric(
                              horizontal: 20, vertical: 10),
                          hintText: '請輸入密碼',
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(5))),
                      // 輸入框校驗
                      validator: (value) {
                        if (value.length < 6) {
                          return '請輸入正確的密碼';
                        }
                        return null;
                      },
                    ),
                  ],
                ),
              ),
              Row(
                children: <Widget>[
                  SizedBox(width: MediaQuery.of(context).size.width - 200),
                  FlatButton(
                    child: Text('找回密碼',style: TextStyle(color: Colors.black54),),
                    onPressed: () {
                      print('找回密碼');
                    },
                  ),
                ],
              ),
              Container(
                height: 44,
                width: MediaQuery.of(context).size.width - 110,
                decoration: BoxDecoration(
                    color: MTColors.main_color,
                    borderRadius: BorderRadius.circular(5)),
                child: FlatButton(
                  child: Text(
                    '登錄',
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                  onPressed: () {
                    if (_formKey.currentState.validate()) {
                      print('登錄啊啊啊啊');
                    }
                  },
                ),
              ),
              Container(
                child:Center(
                  child: FlatButton(
                    child: Text('注冊賬號',style: TextStyle(color: Colors.black54)),
                    onPressed: () {
                      print('注冊');
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      )),
    );
  }
}