IllegalFloatingActionButtonSizeException Floating action button must be a circle

flutter dart widget floating-action-button

428

Maybe the following reasons might be causing the error since you mentioned that it doesn't happen every time

Maybe, the scale transition beginning from 0 ( begin:0) is causing the error because when it is scaled to 0 it is no longer a circle. So changing the begins to a value that is approx. 0 might solve the error i.e. begin:0.00001.

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

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

Solution:

Setting begin to begin:0.00001
Also, it's better to use implicit animation if you want a widget to animate as soon as it is built. I've modified the code to include implicit animation instead of explicit animation ( where forward() must be called explicitly to animate).

Try this example (Uses null safety)

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,
      ),
    );
  }
}

428

Author by

Felipe Augusto

Updated on December 25, 2022

Comments

Felipe Augusto over 1 year
I'm getting the following error:

IllegalFloatingActionButtonSizeException: Floating action button must be a circle File "circular_notch_and_corner_clipper.dart", line 25, in CircularNotchedAndCorneredRectangleClipper.getClip File "proxy_box.dart", line 1314, in _RenderCustomClip._updateClip File "proxy_box.dart", line 1935, in RenderPhysicalShape.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "box.dart", line 2826, in RenderBoxContainerDefaultsMixin.defaultPaint File "custom_layout.dart", line 407, in RenderCustomMultiChildLayoutBox.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "proxy_box.dart", line 131, in RenderProxyBoxMixin.paint File "material.dart", line 555, in _RenderInkFeatures.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "proxy_box.dart", line 131, in RenderProxyBoxMixin.paint File "object.dart", line 396, in PaintingContext.pushLayer File "proxy_box.dart", line 1862, in RenderPhysicalModel.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "proxy_box.dart", line 131, in RenderProxyBoxMixin.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "proxy_box.dart", line 131, in RenderProxyBoxMixin.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 189, in PaintingContext.paintChild File "proxy_box.dart", line 131, in RenderProxyBoxMixin.paint File "object.dart", line 2311, in RenderObject._paintWithContext File "object.dart", line 140, in PaintingContext._repaintCompositedChild File "object.dart", line 100, in PaintingContext.repaintCompositedChild File "object.dart", line 978, in PipelineOwner.flushPaint File "binding.dart", line 438, in RendererBinding.drawFrame File "binding.dart", line 914, in WidgetsBinding.drawFrame File "binding.dart", line 302, in RendererBinding._handlePersistentFrameCallback File "binding.dart", line 1117, in SchedulerBinding._invokeFrameCallback File "binding.dart", line 1055, in SchedulerBinding.handleDrawFrame File "binding.dart", line 971, in SchedulerBinding._handleDrawFrame File "zone.dart", line 1190, in _rootRun File "zone.dart", line 1093, in _CustomZone.run File "zone.dart", line 997, in _CustomZone.runGuarded File "hooks.dart", line 251, in _invoke File "hooks.dart", line 209, in _drawFrame

I guess maybe it's related to the device type, but I'm not sure. Here one of the devices where I saw the error:

brand: "samsung", device: "crownlte", model: "SM-N960F"

The relevant code:
```
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),
          ),
        ),
```
- deczaloth almost 3 years
  
  Are you sure you can reproduce that issue with the latest release of animated_bottom_navigation_bar (0.3.2)?
- Apps 247 almost 3 years
  
  Can we see the code for the floating action button?
- Felipe Augusto almost 3 years
  
  @Deczaloth yes, it's happening on this last version, though it's a intermittent issue, I can't reproduce it every time
- Felipe Augusto almost 3 years
  
  @Apps247 I've added the code
- Kevin about 2 years
  
  I'm getting this problem as well, I may switch to a different bottom navigation library, how did you get around this?
Felipe Augusto almost 3 years

It still exists on the latest version. About the device specific case, I remember a setting called 'Don't keep activities' which lead me to specific errors even with Flutter, I believe it's possible (I'm gonna test with that, but can be any other thing). I'm gonna try to debug more, but as I said it happens sometimes and sometimes not (it's a public app and I see the errors with Sentry)
Niteesh almost 3 years

let me know if you're still getting the error.
Felipe Augusto almost 3 years

Thank you! I'm gonna try that.
Felipe Augusto almost 3 years

In my case I need the controller, since when user changes the bottom navigation I hide the action button, is it possible to do that with implicit animation?
Niteesh almost 3 years

I've updated the example code, it demonstrates the same.
Felipe Augusto almost 3 years

I think you missed where to assign the controller inside the component, I don't know how to do that.
Niteesh almost 3 years

For what purpose do you want the controller ? What I understood when you select the option from the bottom navigation bar, for certain options you want to show the floating button and for other you don't want to show, right ?
Niteesh almost 3 years

If that's the case then why not use the ternary operator ? to show and hide the floating action button based on selected Index of bottom navigation bar. Also did you run the example code to see how it's working ?.
Felipe Augusto almost 3 years

Ohh, now I got it! Yes, it's possible to do that way.
Felipe Augusto almost 3 years

With the option of begin:0.00001 the error still exists, I'm gonna try to implicit animation now.