Flutter-实现一个简单的登录功能

标签：main   return   idg   extends   await   enter   tool   设置   appbar   

登录逻辑判断

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(‘注册‘);
                    },
                  ),
                ),
              )
            ],
          ),
        ),
      )),
    );
  }
}

Flutter-实现一个简单的登录功能

标签：main   return   idg   extends   await   enter   tool   设置   appbar   

原文地址：https://www.cnblogs.com/byyangxuguang/p/12687904.html