1、带数字的小圆点
预览
实现
Widget getWidget() {
return ClipOval(
child: Container(
width: 24.0,
height: 24.0,
color: Color(0xFF33C298),
child: Center (
child: Text(
'1',
style: TextStyle(color: Colors.white, fontSize: 16.0),
),
),
),
);
}
延伸
// 圆角矩形
ClipRRect(
borderRadius: const BorderRadius.all(const Radius.circular(30.0)),
child: new Container(
width: 90.0,
height: 90.0,
color: Colors.red,
),
)
// 设置矩形宽高比例,heightFactor 为高/宽比例
ClipRect(
child: new Align(
alignment: Alignment.topCenter,
heightFactor: 1.0,
child: new Container(color: Colors.yellow,height:90.0,width: 90.0,),
),
)
2、中空圆形,数字内容
预览
实现
Widget getWidget() {
return new Container(
width: 24.0,
height: 24.0,
decoration: BoxDecoration(
border: Border.all(color: AppColors.GrayCC),
borderRadius: BorderRadius.circular(12.0),
),
child: Center(
child: Text(
'2',
style: TextStyle(color: AppColors.GrayCC, fontSize: 16.0),
),
),
);
}
3、TextField 默认字符、去掉下滑线、去掉底部字符数计数
Widget getWidget() {
return TextField(
decoration: InputDecoration(
hintText: '请输入', // 默认提示字符
border: InputBorder.none, // 去掉下滑线
counterText: '', // 去掉底部的字符计数
),
);
}
4、虚线边框
可以直接用这个开源库:https://pub.dev/packages/dotted_border
使用:
DottedBorder(
color: Colors.black,
gap: 3,
strokeWidth: 1,
child: FlutterLogo(size: 148),
)
5、给 Container 添加点击事件
Widget getWidget() {
return GestureDetector(
onTap: () {
// 点击事件
},
child: Container(),
);
}