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