产品要求实现效果
image.png
技术参数
image.png
参考实现代码
核心自定义按钮的逻辑-仅供参考
Widget buildCustomButtonItem(title,count,colors,onTapHandler){
return Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: colors
),
borderRadius: BorderRadius.all(Radius.circular(6))),
child: InkWell(
//borderRadius: BorderRadius.all(Radius.circular(8)),
child: Container(
//padding: EdgeInsets.symmetric(vertical: 8, horizontal: 15),
width: 80,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
new Padding(
padding: new EdgeInsets.only(top: 12),
child:
Text(
"${count>99?'99+':count}",
style: TextStyle(
color: Colors.white,
fontSize:20,
fontWeight: FontWeight.w600,
),
),
),
new Padding(
padding: new EdgeInsets.only(bottom: 10),
child:Text(
title,
style: TextStyle(
color: Colors.white,
fontSize:16,
fontWeight: FontWeight.w400),
),
),
],
),
),
onTap: () {},
),
);
}
LinearGradient-渐变色渲染
Padding-辅助组件定位
最终实现效果
image.png
flutter 布局结果分析
image.png
