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,
          ),
        ),
      );
    }
  }