首先先上全部代码:
import 'package:flutter/material.dart';
import'package:shared_preferences/shared_preferences.dart';void main() =>runApp(MyApp());classMyApp extends StatelessWidget {//This widget is the root of your application.
@override
Widget build(BuildContext context) {returnMaterialApp(
title:'登录界面',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title:'登录界面'),
);
}
}classMyHomePage extends StatefulWidget {
MyHomePage({Key key,this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState()=>_MyHomePageState();
}class _MyHomePageState extends State{
final _userName= TextEditingController(); //用户名
final _userPwd = TextEditingController(); //密码
GlobalKey _globalKey = new GlobalKey(); //用于检查输入框是否为空
void_login() {
showDialog(
context: context,
builder: (context) {if (_userName.text == "admin" && _userPwd.text == "123456") {
String sucess= "登录成功 \n" +_userName.text;returnAlertDialog(
content: Text(sucess),
);
}else{
String err= "登录失败 \n 账号或密码错误";returnAlertDialog(
content: Text(err),
);
}
});
}//保存账号密码
void _saveLoginMsg() async{
SharedPreferences preferences=awaitSharedPreferences.getInstance();
preferences.setString("name", _userName.text);
preferences.setString("pwd", _userPwd.text);
}//读取账号密码,并将值直接赋给账号框和密码框
void _getLoginMsg()async{
SharedPreferences preferences=awaitSharedPreferences.getInstance();
_userName.text=preferences.get("name");
_userPwd.text=preferences.get("pwd");
}
@overridevoidinitState(){
super.initState();
_getLoginMsg();
}
@override
Widget build(BuildContext context) {returnScaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Form(
key: _globalKey,
autovalidate:true, //自动校验
child: Column(
children:[
TextFormField(
controller: _userName,
decoration: InputDecoration(
labelText:"账号",
hintText:"输入你的账号",
icon: Icon(Icons.person)),
validator: (v) {return v.trim().length > 0 ? null : "用户名不能为空";
},
),
TextFormField(
controller: _userPwd,
decoration: InputDecoration(
labelText:"密码",
hintText:"输入你的密码",
icon: Icon(Icons.lock),
),
validator: (v) {return v.trim().length > 5 ? null : "密码不低于6位";
},
obscureText:true,
),
Padding(
padding: EdgeInsets.only(top:20.0),
),
SizedBox(
width:120.0,
height:50.0,
child: RaisedButton(
onPressed: () {if ((_globalKey.currentState asFormState).validate()) {
_login();
_saveLoginMsg();
}
},
child: Text("登录",
style: TextStyle(color: Colors.white),//字体白色
),
color: Colors.blue,
),
),
],
),
),
),
);
}
}
效果图
代码都很简单,相信即便是和我一样第一次接触这个语言的也能很快看懂
然后接下来我们给它加个记住密码的功能,设计思路,通过SharedPreferences存储,
点击登录的时候将账号密码报存到本地,,然后在打开软件的时候加载
flutter需要在pubspec.yaml 添加依赖
shared_preferences: "^0.4.2"
因为我这里用的是vs code编写,所以添加后只需要按 Ctrl+S就会自动添加依赖
如果你用的是Android Studio 或者IDEA,点击Packages get,就会把你需要的包给依赖好
然后在代码中引入
import 'package:shared_preferences/shared_preferences.dart';
添加这两个方法
//保存账号密码
void _saveLoginMsg() async{
SharedPreferences preferences=awaitSharedPreferences.getInstance();
preferences.setString("name", _userName.text);
preferences.setString("pwd", _userPwd.text);
}//读取账号密码,并将值直接赋给账号框和密码框
void _getLoginMsg()async{
SharedPreferences preferences=awaitSharedPreferences.getInstance();
_userName.text=preferences.get("name");
_userPwd.text=preferences.get("pwd");
}
在登录按钮的单击事件那里添加一个把 _saveLoginMsg的方法添加进去
好了,现在可以保持了,现在只剩最后一个问题了,就是在开启软件的时候就获取保存好的账号密码.
在这里我使用的是Flutter的生命周期
我们先来看下Android原生的生命周期
在Android原生中有个onCreate()的方法,这个方法是在App启动是立即执行它下面的方法。那么在flutter中有没有类似的方法呢,答案是肯定的,有!我们来看看Flutter的生命周期
在Flutter中initState的方法起到的作用是和onCreate()是一样的,所以我们只需要在它下面调用getLoginMsg()方法就可以。
没错,就这么简单,如果对你有什么帮助麻烦点个赞,文中有哪些不足欢迎大神指教定虚心接受
@overridevoidinitState(){
super.initState();
_getLoginMsg();
}
-------------------------------------------------------------------------------------------------------LJX 2019-10-26-----------------------------------------------------------------------------------------------------