初学Flutter 一个登陆界面

首先先上所有代码：

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '登陆界面',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '登陆界面'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _userName = TextEditingController(); //用户名
  final _userPwd = TextEditingController(); //密码
  GlobalKey _globalKey = new GlobalKey<FormState>(); //用于检查输入框是否为空

  void _login() {
    showDialog(
        context: context,
        builder: (context) {
          if (_userName.text == "admin" && _userPwd.text == "123456") {
            String sucess = "登陆成功 \n" + _userName.text;
            return AlertDialog(
              content: Text(sucess),
            );
          } else {
            String err = "登陆失败 \n 帐号或密码错误";
            return AlertDialog(
              content: Text(err),
            );
          }
        });
  }
  // 保存帐号密码
  void _saveLoginMsg() async{
      SharedPreferences preferences=await SharedPreferences.getInstance();
      preferences.setString("name", _userName.text);
      preferences.setString("pwd", _userPwd.text);
  }
  // 读取帐号密码，并将值直接赋给帐号框和密码框
  void _getLoginMsg()async{
    SharedPreferences preferences=await SharedPreferences.getInstance();
    _userName.text=preferences.get("name");
    _userPwd.text=preferences.get("pwd");
  }
  @override
  void initState(){
    super.initState();
    _getLoginMsg();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Form(
          key: _globalKey,
          autovalidate: true, //自动校验
          child: Column(
            children: <Widget>[
              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 as FormState).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=await SharedPreferences.getInstance();
      preferences.setString("name", _userName.text);
      preferences.setString("pwd", _userPwd.text);
  }
  // 读取帐号密码，并将值直接赋给帐号框和密码框
  void _getLoginMsg()async{
    SharedPreferences preferences=await SharedPreferences.getInstance();
    _userName.text=preferences.get("name");
    _userPwd.text=preferences.get("pwd");
  }

在登陆按钮的单击事件那里添加一个把 _saveLoginMsg的方法添加进去

 

 

好了，如今能够保持了，如今只剩最后一个问题了，就是在开启软件的时候就获取保存好的帐号密码.

在这里我使用的是Flutter的生命周期

咱们先来看下Android原生的生命周期

 

在Android原生中有个onCreate()的方法，这个方法是在App启动是当即执行它下面的方法。那么在flutter中有没有相似的方法呢，答案是确定的，有！咱们来看看Flutter的生命周期

 

在Flutter中initState的方法起到的做用是和onCreate()是同样的，因此咱们只须要在它下面调用getLoginMsg()方法就能够。

 

 

 

 

 没错，就这么简单，若是对你有什么帮助麻烦点个赞，文中有哪些不足欢迎大神指教定虚心接受

 

  @override
  void initState(){
    super.initState();
    _getLoginMsg();
  }

 

 

 -------------------------------------------------------------------------------------------------------LJX 2019-10-26-----------------------------------------------------------------------------------------------------