基于Flutter实现图中白色圆形凸起按钮的设计需求

没问题！我来帮你搞定这个UI实现，把图里的白色圆形做成RaisedButton其实很简单，直接通过自定义按钮形状就能实现，下面是具体的代码示例：

基础实现代码 #

如果只是单独实现这个圆形凸起按钮，可以用下面的代码：

import 'package:flutter/material.dart';

class RoundButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 模拟图中的深色背景，你可以根据实际需求调整
      backgroundColor: const Color.fromARGB(255, 30, 30, 30),
      body: Center(
        child: RaisedButton(
          // 按钮点击事件逻辑
          onPressed: () {
            debugPrint("圆形按钮被触发啦");
          },
          // 设置按钮为白色
          color: Colors.white,
          // 核心：把按钮形状设为圆形
          shape: const CircleBorder(),
          // 通过padding调整按钮的大小，数值越大按钮越大
          padding: const EdgeInsets.all(32),
          // 按钮内部可以放图标或文字，这里用图标示例，你可以换成自己需要的内容
          child: const Icon(
            Icons.play_arrow,
            color: Colors.black87,
            size: 40,
          ),
        ),
      ),
    );
  }
}

适配复杂背景的方案 #

如果你的UI里还有其他背景元素（比如渐变、装饰图案），可以用Stack把按钮叠加在背景之上，示例如下：

Stack(
  children: [
    // 这里放你的背景组件，比如渐变容器
    Container(
      decoration: const BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.deepPurple, Colors.black87],
          begin: Alignment.topCenter,
          end: Alignment.bottomCenter,
        ),
      ),
    ),
    // 把圆形按钮放在中心位置
    const Center(
      child: RaisedButton(
        onPressed: null,
        color: Colors.white,
        shape: CircleBorder(),
        padding: EdgeInsets.all(32),
        child: Icon(Icons.play_arrow, size: 40),
      ),
    ),
  ],
)

小提示 #

注意哦，在Flutter的新版本中，RaisedButton已经被标记为过时组件，官方推荐使用ElevatedButton来替代，用法几乎完全一致，只需要把代码里的RaisedButton换成ElevatedButton就可以获得一样的凸起效果啦。

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