直播平臺原始碼，flutter 自定義九宮格，計算器佈局，驗證碼認證

直播平臺原始碼，flutter 自定義九宮格，計算器佈局，驗證碼認證

1、先寫幾個接收驗證碼的文字框

return Scaffold(
      backgroundColor: ColorsUtil.hexStringColor("#B1B1B1"),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Container(
                  margin: EdgeInsets.only(right: 12, left: 12),
                  width: 40,
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              width: 2,
                              color: ColorsUtil.hexStringColor("#F6F7FA")))),
                  child: Text(
                    "*",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: ColorsUtil.hexStringColor("#FFFFFF"),
                      fontSize: 24,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 12, left: 12),
                  width: 40,
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              width: 2,
                              color: ColorsUtil.hexStringColor("#F6F7FA")))),
                  child: Text(
                    "*",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: ColorsUtil.hexStringColor("#FFFFFF"),
                      fontSize: 24,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 12, left: 12),
                  width: 40,
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              width: 2,
                              color: ColorsUtil.hexStringColor("#F6F7FA")))),
                  child: Text(
                    "*",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: ColorsUtil.hexStringColor("#FFFFFF"),
                      fontSize: 24,
                    ),
                  ),
                ),
                Container(
                  margin: EdgeInsets.only(right: 12, left: 12),
                  width: 40,
                  decoration: BoxDecoration(
                      border: Border(
                          bottom: BorderSide(
                              width: 2,
                              color: ColorsUtil.hexStringColor("#F6F7FA")))),
                  child: Text(
                    "*",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                      color: ColorsUtil.hexStringColor("#FFFFFF"),
                      fontSize: 24,
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 36,
            ),
            buildNumber(),
          ],
        ),
      ),
    );

2、程式碼迴圈生成對應按鈕模組

  buildNumber() {
    List<Widget> tiles = [];
    Widget content;
    for (int i = 1; i <= 12; i++) {
      tiles.add(
        InkWell(child: getContainer(i),onTap: (){
          print(i.toString());
        },),
      );
    }
    content = Container(
      width: 300,
      alignment: Alignment.center,
      child: Wrap(
        children: tiles,
      ),
    );
    return content;
  }

3、修改邊框，對應特殊符號等按鈕

Widget getContainer(int index) {
    if (index == 10) {
      return Container(
        width: 89,
        height: 40,
      );
    } else if(index == 12){
      return Container(
        width: 89,
        height: 40,
        child: Icon(Icons.waterfall_chart),
      );
    }else {
      return Container(
        width: 89,
        height: 40,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(
            width: 0,
            color: ColorsUtil.hexStringColor("#000000", alpha: 0.5),
          ),
        ),
        child: Text(
          index.toString(),
          style: TextStyle(
            fontSize: 16,
          ),
        ),
      );
    }
  }

以上就是直播平臺原始碼，flutter 自定義九宮格，計算器佈局，驗證碼認證， 更多內容歡迎關注之後的文章