設計給的效果如下：

拿到設計後，先把整體拆分成幾個部分：

1. “手機號輸入框”，使用自定義的登入表單欄位元件實現的輸入框。
2. “驗證碼輸入框”，使用自定義的登入表單驗證碼元件和登入表單欄位元件組合實現的輸入框。
3. “登入按鈕”，使用自定義的塗鴉按鈕元件實現的按鈕。

然後就可以開始進行編碼了。

第1步：繪製元件樹

第2步：實現“手機號輸入框”

首先引入需要的自定義元件，login_form_field.dart檔案是《Flutter佈局錦囊—帶彩條的文字欄位》中的程式碼，login_form_code.dart檔案是《Flutter佈局錦囊—驗證碼倒計時》

import 'package:flutter/material.dart';
import 'login_form_field.dart';
import 'login_form_code.dart';
import '../common/doodle_button.dart';

/// 自定義的登入表單元件。
class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState
 
();
}

然後定義一些用來控制文字欄位狀態、驗證碼按鈕狀態的成員變數，同時把UI佈局的基本輪廓描繪出來。

/// 與自定義的登入表單元件關聯的狀態子類。
class _LoginFormState extends State<LoginForm> {
  /// 手機號文字欄位的控制器。
  final _phoneController = TextEditingController();
  /// 驗證碼文字欄位的控制器。
  final _codeController = TextEditingController();
  /// 傳送驗證碼按鈕是否可用。
  bool _codeAvailable =
 
 false;
  /// 手機號文字欄位是否符合格式。
  bool _phoneActivation = false;
  /// 驗證碼文字欄位是否符合格式。
  bool _codeActivation = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 1,
          child: SizedBox(),
        ),
        Expanded(
          flex: 8,
          child: Column(
            children: <Widget>[
              // TODO: 實現“手機號輸入框”。
              // TODO: 第3步：實現“驗證碼輸入框”。
              // TODO: 第4步：實現“登入按鈕”。
            ],
          ),
        ),
        Expanded(
          flex: 1,
          child: SizedBox(),
        ),
      ]
    );
  }
}

通過《Flutter佈局錦囊—帶彩條的文字欄位》中實現的LoginFormField元件，你可以迅速實現“手機號輸入框”。

              // TODO: 實現“手機號輸入框”。
              SizedBox(height: 20.0),
              LoginFormField(
                hintText: '請輸入手機號',
                textEditingController: _phoneController,
                maxLength: 11,
                minLength: 7,
                legitimateCallback: () {
                  setState(() {
                    _phoneActivation = true;
                    _codeAvailable = true;         
                  });
                },
                illegalCallback: () {
                  setState(() {
                    _phoneActivation = false;
                    _codeAvailable = false;         
                  });
                },
              ),

第3步：實現“驗證碼輸入框”

通過《Flutter佈局錦囊—帶彩條的文字欄位》中實現的LoginFormField元件、《Flutter佈局錦囊—驗證碼倒計時》中實現的LoginFormCode元件，你可以迅速實現“驗證碼輸入框”。

              // TODO: 第3步：實現“驗證碼輸入框”。
              SizedBox(height: 30.0),
              Stack(
                children: <Widget>[
                  LoginFormField(
                    hintText: '請輸入驗證碼',
                    textEditingController: _codeController,
                    maxLength: 6,
                    minLength: 6,
                    legitimateCallback: () {
                      setState(() {
                        _codeActivation = true;
                      });
                    },
                    illegalCallback: () {
                      setState(() {
                        _codeActivation = false;
                      });
                    },
                  ),
                  // 對齊（`Align`）元件，用於將其子項與其自身對齊，並根據子級的大小自行調整大小。
                  Align(
                    // 高度因子（`heightFactor`）屬性，如果為非空值，則將其高度設定為子元件高度乘以此係數。
                    // 可以更大也可以小於`1.0`，但必須是正數。
                    heightFactor: 1.7,
                    // 對準（`alignment`）屬性，如何調整子元件。
                    // 對準（`Alignment`）類的中心右邊（`centerRight`）常量，沿右邊的中心點對準。
                    alignment: Alignment.centerRight,
                    child: LoginFormCode(
                      countdown: 60,
                      available: _codeAvailable,
                      onTapCallback: () {
                        print(_codeController.text);
                      },
                    ),
                  ),
                ],
              ),

第4步：實現“登入按鈕”

最後，通過《Flutter佈局錦囊—塗鴉風格按鈕》中的DoodleButton元件，迅速實現“登入按鈕”。

              // TODO: 第4步：實現“登入按鈕”。
              SizedBox(height: 48.0),
              DoodleButton(
                promptText: '登入',
                activation: _codeActivation && _phoneActivation,
                onTapCallback: (){
                  print('點選了“登入”按鈕');
                },
              ),

第5步：還原效果