利用Flutter寫一個跨平臺的果核APP（4）——資料儲存

前言

目前我們已經實現了幾個介面，今天這篇文章開始著手進行登入頁的製作，主要流程就是獲取輸入框中的內容，傳送給後臺進行驗證，如果成功將返回資訊儲存在本地並跳轉至首頁，如果失敗就提示使用者重新輸入。 在這裡面需要掌握3塊知識，第一是flutter中的表單元件的使用，然後則是flutter中的資料儲存，最後是網路請求。

效果

程式碼

上述三個部分我已經在其他文章中分別介紹了，詳情點選相關文章的連結

1. 《flutter表單元件》
2. 《Flutter資料儲存之shared_preferences》
3. 《利用Flutter寫一個跨平臺的果核APP（3）——網路請求》

剩下的我就直接放出首頁程式碼了：

import 'package:flutter/material.dart';
import 'package:flutter_guohe/constant//UrlConstant.dart';
import 'package:dio/dio.dart';
import 'package:flutter_guohe/views/customview.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_guohe/constant/SpConstant.dart';
import 'package:flutter_guohe/pages/app.dart';

class LoginPage extends StatefulWidget {
  static String tag = 'login-page';

  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  GlobalKey<FormState> _formKey = new GlobalKey<FormState>();

  String _account;

  String _password;

  //表單驗證方法
  void _forSubmitted(BuildContext context) {
    var _form = _formKey.currentState;

    if (_form.validate()) {
      _form.save();
      login(context, _account.trim(), _password.trim());
    }
  }

  //登入
  void login(BuildContext context, String account, String password) {
    showDialog(
        context: context,
        builder: (context) {
          return new LoadingDialog(content: "登入中，請稍後......");
        });
    FormData formData =
        new FormData.from({"username": account, "password": password});
    Dio().post(Constant.STU_INFO, data: formData).then((res) {
      print(account + " " + password);
      if (res.statusCode == 200) {
        Navigator.pop(context);
        if (res.data['code'] == 200) {
          print(res.data);
          String name = res.data['info']['name'];
          String academy = res.data['info']['academy'];
          String major = res.data['info']['major'];
          String stu_id = res.data['info']['name'];
          String stu_pass = res.data['info']['password'];
          List<String> list = new List();
          list.add(name);
          list.add(academy);
          list.add(major);
          list.add(stu_id);
          list.add(stu_pass);
          store(list);
          Navigator.push(
            context,
            new MaterialPageRoute(builder: (context) => new Guohe()),
          );
        }
      }
    });
  }

  //將學生的相關資訊儲存至本地
  void store(List<String> list) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    sharedPreferences.setBool(SpConstant.IS_LOGIN, true);
    sharedPreferences.setStringList(SpConstant.STU_INFO, list);
  }

  @override
  Widget build(BuildContext context) {
    final account = new TextFormField(
      autofocus: true,
      initialValue: '',
      decoration: new InputDecoration(
        labelText: '學號',
      ),
      onSaved: (val) {
        _account = val;
      },
    );

    final password = new TextFormField(
      initialValue: '',
      obscureText: true,
      decoration: new InputDecoration(
        labelText: '密碼',
      ),
      onSaved: (val) {
        _password = val;
      },
    );

    final loginButton = new FloatingActionButton(
      backgroundColor: Colors.white,
      foregroundColor: Colors.black26,
      child: const Icon(Icons.arrow_forward),
      elevation: 18.0,
      onPressed: () => _forSubmitted(context),
    );

    final loginBox = new Container(
      width: 320.0,
      height: 250.0,
      margin: new EdgeInsets.only(top: 300.0, right: 30.0),
      child: new Stack(
        children: <Widget>[
          new Container(
              color: Colors.white,
              width: 280.0,
              height: 220.0,
              child: new Form(
                key: _formKey,
                child: new ListView(
                  shrinkWrap: true,
                  padding: new EdgeInsets.only(left: 24.0, right: 24.0),
                  children: <Widget>[
                    SizedBox(height: 48.0),
                    account,
                    new SizedBox(
                      height: 15.0,
                    ),
                    password,
                  ],
                ),
              )),
          new Positioned(
              //方法二
              right: 15.0,
              top: 180.0,
              child: loginButton),
        ],
      ),
    );

    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
        decoration: new BoxDecoration(
            image: new DecorationImage(
                image: new AssetImage('assets/imgs/bg_login.webp'),
                fit: BoxFit.cover)),
        child: new Center(child: loginBox),
      ),
    );
  }
}

複製程式碼