直播系统app源码，自定义九宫格，计算器布局，验证码认证
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,
),
),
);
}
}
以上就是直播系统app源码，自定义九宫格，计算器布局，验证码认证， 更多内容欢迎关注之后的文章
标签：hexStringColor,自定义,color,ColorsUtil,九宫格,width,源码,child,12 From： https://www.cnblogs.com/yunbaomengnan/p/16952128.html