Flutter-实现⼀个简单的登录功能登录逻辑判断
1.缓存token，使⽤的是shared_preferences
最新版本(pub.flutter-io/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 = Instance();
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 = LoginState();
}
@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: anslucent,
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(
flutter开发app
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('注册');
},
),
),
)
],
),
),
)),
);
}
}