产品设计效果

image.png

技术参数

实现代码

核心涉及到了ButtonBar 和 TextButton两个组件

Widget build(BuildContext context) {
    List<Widget> buttons = [];

    buttons.add(buildButtonItem("成果",Icons.redeem,));
    buttons.add(buildButtonItem("延期",Icons.timer,));
    buttons.add(buildButtonItem("销项",Icons.auto_delete,));
    buttons.add(buildButtonItem("变更",Icons.transform,));
    buttons.add(buildButtonItem("进展",Icons.insert_drive_file_outlined,));
    buttons.add(buildButtonItem("流程",Icons.nat,));

    return ButtonBar(
      alignment: MainAxisAlignment.end,
      children: buttons,
    );
  }

  //上图下文字
  Widget buildButtonItem(title,icon){
    return TextButton(
      onPressed: () => {},
      style: ButtonStyle(
        minimumSize: MaterialStateProperty.all(Size(40, 48)),
        visualDensity: VisualDensity.compact,
        padding: MaterialStateProperty.all(EdgeInsets.zero),
      ),
      child: Column(
        children: [
          Icon(
            icon,
            color: Color(0xff1890ff),
            size: 32,
          ),
          Text(
            title,
            style: TextStyle(
              color: Color(0xff1890ff),
              fontSize: 16,
            ),
          ),
        ],
      ),
    );
  }