Flutter 一個優美的用戶體驗的登錄頁面 抖動提示 文本提示

題記

—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精，優美的應用體驗 來自于細節的處理，更源自于碼農的自我要求與努力

Flutter是谷歌推出的最新的移動開發框架，

【x1】微信公眾號的每日提醒 隨時隨記 每榷訓累 隨心而過 文章底部掃碼關注

【x2】各種系列的視頻教程 免費開源 關注 你不會迷路

【x3】系列文章 百萬 Demo 隨時 復制粘貼 使用

【x4】一目了然的原始碼

【x5】簡短的視頻不一樣的體驗

本文章實作Demo運行效果 如下：

1Demo 實作開始如下

首先是來構建頁面的主體，

class HomePage extends StatefulWidget {
  @override
  _TestPageState createState() => _TestPageState();
}

class _TestPageState extends State<HomePage> {

  //用戶名輸入框的焦點控制
  FocusNode _userNameFocusNode = new FocusNode();
  FocusNode _passwordFocusNode = new FocusNode();

  //文本輸入框控制器
  TextEditingController _userNameController = new TextEditingController();
  TextEditingController _passwordController = new TextEditingController();

  //抖動影片控制器
  ShakeAnimationController _userNameAnimation = new ShakeAnimationController();
  ShakeAnimationController _userPasswordAnimation = new ShakeAnimationController();

  //Stream 更新操作控制器
  StreamController<String> _userNameStream = new StreamController();
  StreamController<String> _userPasswordStream = new StreamController();

  @override
  Widget build(BuildContext context) {
    //手勢識別點擊空白隱藏鍵盤
    return GestureDetector(
      onTap: () {
        hindKeyBoarder();
      },
      child: Scaffold(
        appBar: AppBar(
          title: Text("登錄"),
        ),
        //登錄頁面的主體
        body: buildLoginWidget(),
      ),
    );
  }
  ... ...
}

2 點擊空白的用戶體驗

那就是把鍵盤隱藏了，代碼如下：

  void hindKeyBoarder() {
    //輸入框失去焦點
    _userNameFocusNode.unfocus();
    _passwordFocusNode.unfocus();

    //隱藏鍵盤
    SystemChannels.textInput.invokeMethod('TextInput.hide');
  }

3 線性布局排列

將用戶名與密碼還有登錄按鈕使用 Column 線性排列，

//登錄頁面的主體
  Widget buildLoginWidget() {
    return Container(
      margin: EdgeInsets.all(30.0),
      //線性布局
      child: Column(
        children: [
          //用戶名輸入框
          buildUserNameWidget(),
          SizedBox(
            height: 20,
          ),
          //用戶密碼輸入框
          buildUserPasswordWidget(),
          SizedBox(
            height: 40,
          ),
          //登錄按鈕
          Container(
            width: double.infinity,
            height: 40,
            child: ElevatedButton(
              child: Text("登錄"),
              onPressed: () {
                checkLoginFunction();
              },
            ),
          )
        ],
      ),
    );
  }

4 輸入框的構建

用戶名輸入框

  ///用戶名輸入框 Stream 區域更新 error提示
  ///     ShakeAnimationWidget 抖動影片
  ///
  StreamBuilder<String> buildUserNameWidget() {
    return StreamBuilder<String>(
      stream: _userNameStream.stream,
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        return ShakeAnimationWidget(
          //微左右的抖動
          shakeAnimationType: ShakeAnimationType.LeftRightShake,
          //設定不開啟抖動
          isForward: false,
          //抖動控制器
          shakeAnimationController: _userNameAnimation,
          child: new TextField(
            //焦點控制
            focusNode: _userNameFocusNode,
            //文本控制器
            controller: _userNameController,
            //鍵盤回車鍵點擊回呼
            onSubmitted: (String value) {
              //點擊校驗，如果有內容輸入 輸入焦點跳入下一個輸入框
              if (checkUserName()) {
                _userNameFocusNode.unfocus();
                FocusScope.of(context).requestFocus(_passwordFocusNode);
              } else {
                FocusScope.of(context).requestFocus(_userNameFocusNode);
              }
            },
            //邊框樣式設定
            decoration: InputDecoration(
              //紅色的錯誤提示文本
              errorText: snapshot.data,
              labelText: "用戶名",
              //設定上下左右 都有邊框
              //設定四個角的弧度
              border: OutlineInputBorder(
                //設定邊框四個角的弧度
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
            ),
          ),
        );
      },
    );
  }

密碼輸入框，兩個輸入框的構建類似

  StreamBuilder<String> buildUserPasswordWidget() {
    return StreamBuilder<String>(
      stream: _userPasswordStream.stream,
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
        return ShakeAnimationWidget(
          //微左右的抖動
          shakeAnimationType: ShakeAnimationType.LeftRightShake,
          //設定不開啟抖動
          isForward: false,
          //抖動控制器
          shakeAnimationController: _userPasswordAnimation,
          child: new TextField(
            focusNode: _passwordFocusNode,
            controller: _passwordController,
            onSubmitted: (String value) {
              if (checkUserPassword()) {
                loginFunction();
              } else {
                FocusScope.of(context).requestFocus(_passwordFocusNode);
              }
            },
            //隱藏輸入的文本
            obscureText: true,
            //最大可輸入1行
            maxLines: 1,
            //邊框樣式設定
            decoration: InputDecoration(
              labelText: "密碼",
              errorText: snapshot.data,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.all(Radius.circular(10)),
              ),
            ),
          ),
        );
      },
    );
  }

5 校驗用戶名與密碼的方法如下

  bool checkUserName() {
    //獲取輸入框中的輸入文本
    String userName = _userNameController.text;
    if (userName.length == 0) {
      //Stream 事件流更新提示文案
      _userNameStream.add("請輸入用戶名");
      //抖動影片開啟
      _userNameAnimation.start();
      return false;
    } else {
      //清除錯誤提示
      _userNameStream.add(null);
      return true;
    }
  }

  bool checkUserPassword() {
    String userPassrowe = _passwordController.text;
    if (userPassrowe.length < 6) {
      _userPasswordStream.add("請輸入標準密碼");
      _userPasswordAnimation.start();
      return false;
    } else {
      _userPasswordStream.add(null);
      return true;
    }
  }

以小編的性格，要實作百萬Demo隨時復制粘貼肯定是需要原始碼的完整原始碼在這里

以小編的性格，肯定是要錄制一套視頻的，點擊這里查看詳情

有興趣 你可以關注一下 西瓜視頻 — 早起的年輕人