應用場景：

實現app登入介面：
最基本的登入介面需要包括使用者名稱輸入框，密碼輸入框和一個登入按鈕

技術實現：

程式碼詳情（點選下載）（記得修改檔案中的網路請求與頁面傳值哦，刪除即可）

該頁面使用了兩個第三方庫
螢幕適配外掛：flutter_screenutil: ^0.4.2
第三方 icon 圖示外掛：font_awesome_flutter: ^8.2.0

問題細節：
1.焦點
（1）輸入框焦點問題

//1.焦點監聽和監聽使用者名稱框的輸入變化
//2.是否顯示尾部清除按鈕
@override
  void initState() {
    // TODO: implement initState
    //設定焦點監聽
    _focusNodeUserName.addListener(_focusNodeListener);
    _focusNodePassWord.addListener(_focusNodeListener);
    //監聽使用者名稱框的輸入改變
    _userNameController.addListener(() {
      print(_userNameController.text);
      // 監聽文字框輸入變化，當有內容的時候，顯示尾部清除按鈕，否則不顯示
      if (_userNameController.text.length > 0) {
        _isShowClear = true;
      } else {
        _isShowClear = false;
      }
    });
    super.initState();
  }

（2）移除焦點

@override
  void dispose() {
    // TODO: implement dispose
    // 移除焦點監聽
    _focusNodeUserName.removeListener(_focusNodeListener);
    _focusNodePassWord.removeListener(_focusNodeListener);
    _userNameController.dispose();
    super.dispose();
  }

（3）監聽焦點

 // 監聽焦點
  //監聽點選輸入框或密碼框
  Future<Null> _focusNodeListener() async {
    if (_focusNodeUserName.hasFocus) {
      print("使用者名稱框獲取焦點");
      // 取消密碼框的焦點狀態
      _focusNodePassWord.unfocus();
    }
    if (_focusNodePassWord.hasFocus) {
      print("密碼框獲取焦點");
      // 取消使用者名稱框焦點狀態
      _focusNodeUserName.unfocus();
    }
  }

2.驗證賬號密碼（使用正規表示式）

/**
   * 驗證使用者名稱
   */
  String validateUserName(value) {
    // 正則匹配手機號
    RegExp exp = RegExp(
        r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$');
    if (value.isEmpty) {
      return '使用者名稱不能為空!';
    } else if (!exp.hasMatch(value)) {
      return '請輸入正確手機號';
    }
    return null;
  }

/**
   * 驗證密碼
   */
  String validatePassWord(value) {
    if (value.isEmpty) {
      return '密碼不能為空';
    } else if (value
        .trim()
        .length < 6 || value
        .trim()
        .length > 18) {
      return '密碼長度不正確';
    }
    return null;
  }

3.前端介面實現（所有元件官方文件都有詳解）
（1）賬號與密碼輸入框
使用TextFormField元件 （詳細程式碼下載程式碼檔案）
（2）登入按鈕
使用RaisedButton元件
4.第三方登入區域
使用第三方icon庫

//例：
IconButton(
                color: Colors.green[200],
                // 第三方庫icon圖示
                icon: Icon(FontAwesomeIcons.weixin),
                iconSize: 40.0,
                onPressed: () {

                },
              ),

5.監聽空白區域與螢幕適應

Scaffold(
      backgroundColor: Colors.white,
      // 外層新增一個手勢，用於點選空白部分，回收鍵盤
      body: new GestureDetector(
        onTap: () {
          // 點選空白區域，回收鍵盤
          print("點選了空白區域");
          _focusNodePassWord.unfocus();
          _focusNodeUserName.unfocus();
        },
        child: new ListView(
          children: <Widget>[
            new SizedBox(height: ScreenUtil().setHeight(80),),
            logoImageArea,  //logo圖片
            new SizedBox(height: ScreenUtil().setHeight(70),),
            inputTextArea, //輸入文字框區域
            new SizedBox(height: ScreenUtil().setHeight(80),),
            loginButtonArea, //登入按鈕區域
            new SizedBox(height: ScreenUtil().setHeight(60),),
            thirdLoginArea, //第三方登入區域
            new SizedBox(height: ScreenUtil().setHeight(60),),
            bottomArea, //忘記密碼or立即註冊
          ],
        ),
      ),
    );

登入介面的問題至此基本解決