Flutter: exception when having 2 FloatingActionButton

Question

Flutter: exception when having 2 FloatingActionButton

I receive an exception at first time the page is built, when this build involves 2 FloatingActionButton.

However, if I comment out one of the 2 FloatingActionButton, run the app and at a later stage, I uncomment and proceed with a Hot Reload, it works.

The following piece of code implements an image picker and gives the user the choice of selecting from either the gallery or the camera.

Could somebody have a look at this at tell me what I am doing wrong?

I have highlighted the part of the code that causes the exception.

Here is the code:

class ProfilePage extends StatefulWidget {
  ProfilePage(this.profileId);
  final int profileId;
  @override
  _ProfilePageState createState() => new _ProfilePageState();
}

class _ProfilePageState extends State<ProfilePage> {
  var _imageInfo;

  @override
  void initState() {
    _imageInfo = mid.currentProfile['Photo'];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(Translations
            .of(context)
            .text(widget.profileId == -1 ? 'profiles_add' : 'profiles_edit')),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.close),
            onPressed: () => Navigator.of(context).pop(null),
          ),
        ],
        leading: new Container(),
      ),
      body: _build_body(),
    );
  }

  _build_body() {
    var profileImage;
    profileImage = new Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          new GestureDetector(
            child: new Container(
              child: new ProfilePicture(imageInfo: _imageInfo),
              width: 100.0,
              height: 100.0,
              alignment: Alignment.center,
            ),
            onTap: () {},
          ),
  // ##################################  
          new FloatingActionButton(
            onPressed: () {
              getImage(ImageSource.camera);
            },
            tooltip: 'Take a Photo',
            child: new Icon(Icons.camera_alt)
          ),
          new FloatingActionButton(
              onPressed: () {
                getImage(ImageSource.gallery);
              },
              tooltip: 'Pick Image from gallery',
              child: new Icon(Icons.photo_library)
          ),
  // ##################################
        ],
      ),
    );

    return new Container(
      child: new Column(
        children: [profileImage],
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
      ),
    );
  }

  Future<dynamic> getImage(ImageSource source) async {
    var imageFile = await ImagePicker.pickImage(source: source);

    if (imageFile != null) {
      List<int> imageBytes = imageFile.readAsBytesSync();
      String base64Image = base64.encode(imageBytes);

      setState(() {
        _imageInfo = "base64:" + base64Image;
      });
    }
  }
}

Here is the exception:

I/flutter ( 9045): ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 9045): The following assertion was thrown during a scheduler callback:
I/flutter ( 9045): There are multiple heroes that share the same tag within a subtree.
I/flutter ( 9045): Within each subtree for which heroes are to be animated (typically a PageRoute subtree), each Hero
I/flutter ( 9045): must have a unique non-null tag.
I/flutter ( 9045): In this case, multiple heroes had the following tag: <default FloatingActionButton tag>
I/flutter ( 9045): Here is the subtree for one of the offending heroes:
I/flutter ( 9045): # Hero(tag: <default FloatingActionButton tag>, state: _HeroState#5ea48)
I/flutter ( 9045): # └KeyedSubtree-[GlobalKey#d064f]
I/flutter ( 9045): #  └RawMaterialButton(state: _RawMaterialButtonState#8f3c6)
I/flutter ( 9045): #   └Semantics(container: true, properties: SemanticsProperties, label: null, value: null, hint: null, renderObject: RenderSemanticsAnnotations#d7c9b relayoutBoundary=up5 NEEDS-PAINT)
I/flutter ( 9045): #    └ConstrainedBox(BoxConstraints(w=56.0, h=56.0), renderObject: RenderConstrainedBox#8437c relayoutBoundary=up6 NEEDS-PAINT)
I/flutter ( 9045): #     └Material(type: button, elevation: 6.0, color: Color(0xff2196f3), textStyle.debugLabel: ((englishLike button).merge(whiteMountainView button)).copyWith, textStyle.inherit: false, textStyle.color: Color(0xffffffff), textStyle.family: Roboto, textStyle.size: 14.0, textStyle.weight: 500, textStyle.letterSpacing: 1.2, textStyle.baseline: alphabetic, textStyle.decoration: TextDecoration.none, shape: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), state: _MaterialState#73b5e)
I/flutter ( 9045): #      └_MaterialInterior(duration: 200ms, shape: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), elevation: 6.0, color: Color(0xff2196f3), shadowColor: Color(0xff000000), state: _MaterialInteriorState#aa4b9(ticker inactive))
I/flutter ( 9045): #       └PhysicalShape(clipper: ShapeBorderClipper, elevation: 6.0, color: Color(0xff2196f3), shadowColor: Color(0xff000000), renderObject: RenderPhysicalShape#0486d NEEDS-PAINT)
I/flutter ( 9045): #        └_ShapeBorderPaint
I/flutter ( 9045): #         └CustomPaint(renderObject: RenderCustomPaint#7e004 NEEDS-PAINT)
I/flutter ( 9045): #          └NotificationListener<LayoutChangedNotification>
I/flutter ( 9045): #           └_InkFeatures-[GlobalKey#f1e6b ink renderer](renderObject: _RenderInkFeatures#34dbd NEEDS-PAINT)
I/flutter ( 9045): #            └AnimatedDefaultTextStyle(duration: 200ms, debugLabel: ((englishLike button).merge(whiteMountainView button)).copyWith, inherit: false, color: Color(0xffffffff), family: Roboto, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping at box width, overflow: clip, state: _AnimatedDefaultTextStyleState#c8a96(ticker inactive))
I/flutter ( 9045): #             └DefaultTextStyle(debugLabel: ((englishLike button).merge(whiteMountainView button)).copyWith, inherit: false, color: Color(0xffffffff), family: Roboto, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration: TextDecoration.none, softWrap: wrapping at box width, overflow: clip)
I/flutter ( 9045): #              └InkWell(gestures: [tap], clipped to BoxShape.rectangle, state: _InkResponseState<InkResponse>#32f3c)
I/flutter ( 9045): #               └GestureDetector
I/flutter ( 9045): #                └RawGestureDetector(state: RawGestureDetectorState#d6211(gestures: [tap], behavior: opaque))
I/flutter ( 9045): #                 └_GestureSemantics(renderObject: RenderSemanticsGestureHandler#d616c NEEDS-PAINT)
I/flutter ( 9045): #                  └Listener(listeners: [down], behavior: opaque, renderObject: RenderPointerListener#8a585 NEEDS-PAINT)
I/flutter ( 9045): #                   └Builder
I/flutter ( 9045): #                    └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))
I/flutter ( 9045): #                     └Container(padding: EdgeInsets.zero)
I/flutter ( 9045): #                      └Padding(padding: EdgeInsets.zero, renderObject: RenderPadding#45f72 NEEDS-PAINT)
I/flutter ( 9045): #                       └Center(alignment: center, widthFactor: 1.0, heightFactor: 1.0, renderObject: RenderPositionedBox#a4315 NEEDS-PAINT)
I/flutter ( 9045): #                        └SizedBox.expand(renderObject: RenderConstrainedBox#af3fc relayoutBoundary=up1 NEEDS-PAINT)
I/flutter ( 9045): #                         └Tooltip("Pick Image from gallery", vertical offset: 24.0, position: below, state: _TooltipState#36588(ticker inactive))
I/flutter ( 9045): #                          └GestureDetector
I/flutter ( 9045): #                           └RawGestureDetector(state: RawGestureDetectorState#6cd1d(gestures: [long press], behavior: opaque))
I/flutter ( 9045): #                            └Listener(listeners: [down], behavior: opaque, renderObject: RenderPointerListener#aae3f NEEDS-PAINT)
I/flutter ( 9045): #                             └Semantics(container: false, properties: SemanticsProperties, label: "Pick Image from gallery", value: null, hint: null, renderObject: RenderSemanticsAnnotations#5fa0a NEEDS-PAINT)
I/flutter ( 9045): #                              └Builder
I/flutter ( 9045): #                               └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))
I/flutter ( 9045): #                                └Icon(IconData(U+0E413))
I/flutter ( 9045): #                                 └Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null, renderObject: RenderSemanticsAnnotations#8a909 NEEDS-PAINT)
I/flutter ( 9045): #                                  └ExcludeSemantics(excluding: true, renderObject: RenderExcludeSemantics#fc581 NEEDS-PAINT)
I/flutter ( 9045): #                                   └SizedBox(width: 24.0, height: 24.0, renderObject: RenderConstrainedBox#f68c4 NEEDS-PAINT)
I/flutter ( 9045): #                                    └Center(alignment: center, renderObject: RenderPositionedBox#c38ac NEEDS-PAINT)
I/flutter ( 9045): #                                     └RichText(textDirection: ltr, softWrap: wrapping at box width, maxLines: unlimited, text: "", renderObject: RenderParagraph#8873e relayoutBoundary=up1 NEEDS-PAINT)
I/flutter ( 9045):
I/flutter ( 9045): When the exception was thrown, this was the stack:
I/flutter ( 9045): #0      Hero._allHeroesFor.visitor.<anonymous closure> (package:flutter/src/widgets/heroes.dart:130:13)
I/flutter ( 9045): #1      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:140:10)
I/flutter ( 9045): #2      ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #3      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #4      SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4625:14)
I/flutter ( 9045): #5      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #6      MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4725:16)
I/flutter ( 9045): #7      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #8      SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4625:14)
I/flutter ( 9045): #9      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #10     MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4725:16)
I/flutter ( 9045): #11     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #12     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #13     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #14     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #15     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #16     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #17     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #18     MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4725:16)
I/flutter ( 9045): #19     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #20     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #21     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #22     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #23     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #24     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #25     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #26     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4625:14)
I/flutter ( 9045): #27     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #28     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #29     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #30     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4625:14)
I/flutter ( 9045): #31     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #32     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #33     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #34     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #35     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #36     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #37     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #38     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #39     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #40     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #41     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #42     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #43     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #44     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3659:14)
I/flutter ( 9045): #45     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:144:15)
I/flutter ( 9045): #46     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:4625:14)
I/flutter ( 9045): #47     Element.visitChildElements (package:flutter/src/widgets/framework.dart:2625:5)
I/flutter ( 9045): #48     Hero._allHeroesFor (package:flutter/src/widgets/heroes.dart:146:13)
I/flutter ( 9045): #49     HeroController._startHeroTransition (package:flutter/src/widgets/heroes.dart:511:51)
I/flutter ( 9045): #50     HeroController._maybeStartHeroTransition.<anonymous closure> (package:flutter/src/widgets/heroes.dart:492:9)
I/flutter ( 9045): #51     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter ( 9045): #52     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:938:9)
I/flutter ( 9045): #53     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter ( 9045): #54     _invoke (dart:ui/hooks.dart:120:13)
I/flutter ( 9045): #55     _drawFrame (dart:ui/hooks.dart:109:3)
I/flutter ( 9045): ════════════════════════════════════════════════════════════════════════════════════════════════════

exception

flutter

asked on Stack Overflow Apr 22, 2018 by

boeledi

3 Answers

Ok, I found out that adding heroTag: null to the properties of the FloatingActionButton solved the issue.

The part of the code that caused the exception is now the following and seems to be working.

      new FloatingActionButton(
        onPressed: () {
          getImage(ImageSource.camera);
        },
        tooltip: 'Take a Photo',
        child: new Icon(Icons.camera_alt),
        heroTag: null,
      ),

      new FloatingActionButton(
          onPressed: () {
            getImage(ImageSource.gallery);
          },
          tooltip: 'Pick Image from gallery',
          child: new Icon(Icons.photo_library),
          heroTag: null,
      ),

answered on Stack Overflow Apr 22, 2018 by

boeledi • edited Jan 28, 2019 by

CopsOnRoad

Add a unique heroTag if you're using multiple FloatingActionButton per route or if your widgets are inside the IndexedStack widget.

      new FloatingActionButton(
        onPressed: () {
          getImage(ImageSource.camera);
        },
        tooltip: 'Take a Photo',
        child: new Icon(Icons.camera_alt),
        heroTag: 'openCameraBtn',
      ),

answered on Stack Overflow Sep 22, 2020 by

paulaysabellemedina

floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          new FloatingActionButton(
              child: Icon(Icons.zoom_in),
              heroTag: null,
              onPressed: () {
                mapController.animateCamera(CameraUpdate.zoomIn());
              }),
          SizedBox(
            height: 5,
          ),
          new FloatingActionButton(
              child: Icon(Icons.zoom_out),
              heroTag: null,
              onPressed: () {
                mapController.animateCamera(CameraUpdate.zoomOut());
              }),
          SizedBox(
            height: 5,
          ),
          new FloatingActionButton(
            onPressed: () {
              if (selectdStyle == oscurostyle) {
                selectdStyle = streetStyle;
              } else {
                selectdStyle = oscurostyle;
              }
              setState(() {});
            },
            child: Icon(Icons.add_to_home_screen),
            heroTag: null,
          ),
        ],
      ),

answered on Stack Overflow Oct 11, 2020 by

user14431990 • edited Oct 12, 2020 by

aboger

User contributions licensed under CC BY-SA 3.0