Flutter圆形按钮创建问题：ElevatedButton报错，FloatingActionButton无效

代码错误分析 #

• Container组件未指定child:属性，直接嵌套ElevatedButton会触发语法报错
• ElevatedButton的backgroundColor参数已废弃，需通过ButtonStyle配置背景色
• 未设置按钮形状，无法实现圆形效果

修正后的圆形ElevatedButton代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Menu()));

class Menu extends StatefulWidget {
  const Menu({super.key});

  @override
  State<Menu> createState() => _MenuState();
}

class _MenuState extends State<Menu> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          width: 70,
          height: 70,
          child: ElevatedButton(
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.amberAccent,
              shape: const CircleBorder(),
              padding: EdgeInsets.zero,
            ),
            onPressed: () {},
            child: const Icon(
              Icons.train,
              size: 35,
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

补充优化方案 #

1. 无需外层Container时，可直接通过fixedSize控制按钮尺寸：

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.amberAccent,
    shape: const CircleBorder(),
    fixedSize: const Size(70, 70),
    padding: EdgeInsets.zero,
  ),
  onPressed: () {},
  child: const Icon(Icons.train, size: 35, color: Colors.black),
)

2. 自定义FloatingActionButton实现需求：
   如果想用FloatingActionButton实现自定义圆形按钮，可调整其属性适配：

FloatingActionButton(
  backgroundColor: Colors.amberAccent,
  onPressed: () {},
  shape: const CircleBorder(),
  child: const Icon(Icons.train, size: 35, color: Colors.black),
  // 需调整大小时用SizedBox包裹
)

内容的提问来源于stack exchange，提问作者duda