直播平台源代码，flutter 自定义九宫格，计算器布局，验证码认证

1、先写几个接收验证码的文本框

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

2、代码循环生成对应按钮模块

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

3、修改边框，对应特殊符号等按钮

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