Flutter项目BorderRadius编译错误，请求有效解决方案

问题重现 #

使用FloatingActionButton并设置floatingActionButtonLocation: FloatingActionButtonLocation.endDocked时，触发大量BorderRadius相关错误，导致代码无法编译。相关代码及配置如下：

核心代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp1());
}

class MyApp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FAB',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.lightBlue[50],
      appBar: AppBar(
        title: Text("FloatingActionButton"),
        backgroundColor: Colors.green,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        backgroundColor: Colors.green,
        onPressed: () {
          setState(() {});
        },
      ),
    );
  }
}

pubspec.yaml配置 #

name: screen
description: A new Flutter project.
publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=2.19.6 <3.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

错误截图 #

错误原因 #

在Flutter 2.19.x版本中，当FloatingActionButton设置为endDocked位置，但未搭配BottomAppBar或BottomNavigationBar时，系统会尝试计算FAB与底部栏配合的圆角参数，由于缺少对应底部组件，导致圆角计算逻辑抛出异常。

可行解决办法 #

方案1：修改FAB位置为非dock类型 #

将floatingActionButtonLocation改为不需要依赖底部栏的位置，比如endFloat：

floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,

方案2：添加BottomAppBar配合dock位置 #

给Scaffold添加BottomAppBar，让FAB的dock位置有对应的组件配合：

return Scaffold(
  // 其他属性不变
  bottomNavigationBar: BottomAppBar(
    color: Colors.green,
    shape: CircularNotchedRectangle(), // 生成与FAB配合的缺口
  ),
);

方案3：显式指定FAB的shape属性 #

通过自定义shape覆盖系统默认的圆角计算逻辑：

floatingActionButton: FloatingActionButton(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(16.0), // 自定义圆角大小，可按需调整
  ),
  // 其他属性不变
),

方案4：升级Flutter到稳定版 #

该bug在后续Flutter版本中已被修复，执行以下命令升级：

flutter upgrade

验证 #

修改完成后，执行flutter run重新启动项目，检查编译是否通过，FAB是否正常显示。

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