产品要求实现效果

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