flutter 登录和退出登录_初学Flutter 一个登录界面

首先先上全部代码：

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-----------------------------------------------------------------------------------------------------