IllegalFloatingActionButtonSizeException 浮动动作按钮必须是圆形

Question

我收到以下错误：

IllegalFloatingActionButtonSizeException：浮动操作按钮必须 是一个圆圈文件“circular_notch_and_corner_clipper.dart”，第 25 行， 在 CircularNotchedAndCorneredRectangleClipper.getClip 文件中 _RenderCustomClip._updateClip 文件中的“proxy_box.dart”，第 1314 行 “proxy_box.dart”，第 1935 行，在 RenderPhysicalShape.paint 文件中 “object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件中 “object.dart”，第 189 行，在 PaintingContext.paintChild 文件中 “box.dart”，第 2826 行，在 RenderBoxContainerDefaultsMixin.defaultPaint 文件“custom_layout.dart”，第 407 行，在 RenderCustomMultiChildLayoutBox.paint 文件“object.dart”，第 2311 行， 在 RenderObject._paintWithContext 文件“object.dart”，第 189 行，在 PaintingContext.paintChild 文件“proxy_box.dart”，第 131 行，在 RenderProxyBoxMixin.paint 文件“material.dart”，第 555 行，在 _RenderInkFeatures.paint 文件“object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件“object.dart”，第 189 行，在 PaintingContext.paintChild 文件“proxy_box.dart”，第 131 行，在 RenderProxyBoxMixin.paint 文件“object.dart”，第 396 行，在 PaintingContext.pushLayer 文件“proxy_box.dart”，第 1862 行，在 RenderPhysicalModel.paint 文件“object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件“object.dart”，第 189 行，在 PaintingContext.paintChild 文件“proxy_box.dart”，第 131 行，在 RenderProxyBoxMixin.paint 文件“object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件“object.dart”，第 189 行，在 PaintingContext.paintChild 文件“proxy_box.dart”，第 131 行，在 RenderProxyBoxMixin.paint 文件“object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件“object.dart”，第 189 行，在 PaintingContext.paintChild 文件“proxy_box.dart”，第 131 行，在 RenderProxyBoxMixin.paint 文件“object.dart”，第 2311 行，在 RenderObject._paintWithContext 文件“object.dart”，第 140 行，在 PaintingContext._repaintCompositedChild 文件“object.dart”，行 100、在 PaintingContext.repaintCompositedChild 文件“object.dart”中， 第 978 行，在 PipelineOwner.flushPaint 文件“binding.dart”中，第 438 行， 在 RendererBinding.drawFrame 文件“binding.dart”，第 914 行，在 WidgetsBinding.drawFrame 文件“binding.dart”，第 302 行，在 RendererBinding._handlePersistentFrameCallback 文件“binding.dart”， 第 1117 行，在 SchedulerBinding._invokeFrameCallback 文件中 “binding.dart”，第 1055 行，在 SchedulerBinding.handleDrawFrame 文件中 “binding.dart”，第 971 行，在 SchedulerBinding._handleDrawFrame 文件中 “zone.dart”，第 1190 行，在 _rootRun 文件中“zone.dart”，第 1093 行，在 _CustomZone.run 文件“zone.dart”，第 997 行，_CustomZone.runGuarded 文件“hooks.dart”，第 251 行，_invoke 文件“hooks.dart”，第 209 行，_drawFrame

我想这可能与设备类型有关，但我不确定。这是我看到错误的设备之一：

品牌：“三星”，设备：“crownlte”，型号：“SM-N960F”

相关代码：

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';

AnimationController _animationController;
  Animation<double> animation;

  @override
  void initState() {
    _animationController = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    CurvedAnimation curve = CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.5,
        1.0,
        curve: Curves.fastOutSlowIn,
      ),
    );

    animation = Tween<double>(
      begin: 0,
      end: 1,
    ).animate(curve);

    WidgetsBinding.instance.addPostFrameCallback(
      (_) {
        _handleInternetConnection();

        Future.delayed(
          Duration(seconds: 1),
          () {
            if (mounted) _animationController.forward();
          },
        );
      },
    );

    super.initState();
  }

...
floatingActionButton: (_currentIndex != 3 && showFAB)
            ? ScaleTransition(
                scale: animation,
                child: FloatingActionButton(
                  elevation: 8,
                  foregroundColor: Colors.white,
                  child: Icon(
                    _currentIndex == 0
                        ? Icons.edit
                        : Icons.face_retouching_natural,
                    size: 36,
                  ),
                  onPressed: () => _currentIndex == 0
                      ? NewStory.show(context, null)
                      : NewMood.show(context, null),
                ),
              )
            : null,
floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          bottomNavigationBar: AnimatedBottomNavigationBar(
            icons: allDestinations()
                .map((NavbarOption destination) => destination.icon)
                .toList(),
            activeColor: Colors.white,
            splashColor: Theme.of(context).primaryColor,
            activeIndex: _currentIndex,
            gapLocation: GapLocation.center,
            inactiveColor: Colors.white60,
            notchAndCornersAnimation: animation,
            backgroundColor: Theme.of(context).primaryColor,
            notchSmoothness: NotchSmoothness.softEdge,
            onTap: (index) => setState(() => _currentIndex = index),
          ),
        ),

Answer 1

也许以下原因可能会导致错误，因为您提到它不会每次都发生

也许，从 0 (begin:0) 开始的比例转换会导致错误，因为当它被缩放到 0 时，它不再是一个圆。因此，将开始更改为大约的值。 0 可能会解决错误，即begin:0.00001。

或

 WidgetsBinding.instance.addPostFrameCallback(
      (_) {
        _handleInternetConnection();

        Future.delayed(
          Duration(seconds: 1),
          () {
            if (mounted) _animationController.forward();
          },
        );
      },
    );

解决方案：

1. 设置开始于begin:0.00001

2. 此外，如果您希望小部件在构建后立即进行动画处理，则最好使用隐式动画。我修改了代码以包含隐式动画而不是显式动画（其中必须显式调用 forward() 以进行动画处理）。

试试这个例子（使用空安全）

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      floatingActionButton: _selectedIndex == 0
          ? TweenAnimationBuilder<double>(
              tween: Tween<double>(
                begin: 0.00001,
                end: 1,
              ),
              curve: Interval(
                0.5,
                1.0,
                curve: Curves.fastOutSlowIn,
              ),
              duration: Duration(milliseconds: 700),
              builder: (_, double scaleValue, __) {
                return Transform.scale(
                    scale: scaleValue,
                    child: FloatingActionButton(
                      elevation: 8,
                      foregroundColor: Colors.white,
                      child: Icon(
                        Icons.face_retouching_natural,
                        size: 36,
                      ),
                      onPressed: () {
                        print("hi");
                      },
                    ));
              })
          : null,
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Answer 2

首先，尝试使用最新版本的库和颤振运行它。如果它仍然存在，请告诉我。我不能复制它，所以如果你能复制，请提供一个最小的可复制样本。

其次，关于“我猜可能与设备类型有关，但我不确定。”，可能与设备无关，因为Flutter是跨平台的，您的代码似乎不相关到本机代码。

第三，尝试使用“二进制搜索调试”技术。例如，尝试从 AnimatedBottomNavigationBar() 中删除所有参数并查看它是否有效。如果是这样，请添加一些参数并重试。如果再次起作用，请添加更多参数；否则删除一些。通过这样做，您将看到哪个参数导致了问题。