Flutter开发中遇到的问题(1)

问题1：

项目地址在: github

在使用 FloatingActionButton 这个Widget的时候，在使用的时候把 FloatingActionButton 控件放置到 home所在的page中(也就是iOS中的ViewController 安卓中的Activity)。这个时候的设置是这个样子的：

//渲染多个浮动按钮
  Widget renderFloatingActionButton() {
    // 一组按钮ButtonBar
    return ButtonBar(
      // 按钮的在水平方向上的对齐方式。
      // spaceAround 分散对齐
      alignment: MainAxisAlignment.spaceAround,
      // 当前组中的组员
      children: <Widget>[
        // 第一个浮动按钮
        FloatingActionButton(
          //点击事件
          onPressed: () {
            choosePic(ImageSource.camera);
          },
          //这只是一个标识长按文字提示
          tooltip: 'photo_camera',
          // 按钮的设置
          child: Icon(Icons.photo_camera),
        ),
        // 第二个浮动按钮
        FloatingActionButton(
          onPressed: () {
            choosePic(ImageSource.gallery);
          },
          tooltip: 'photo_library',
          child: Icon(Icons.photo_library),
        )
      ],
    );
  }

看起来没有什么问题运行起来也没有用什么问题。但是。。当我把自己练习的demo放在一起的时候，这个页面的上一层是一个item，点击item跳转到当前page。。问题终于出现了。。。。

问题描述：点击item跳转到另外一个页面，另外一个页面底部有两个悬浮的button，点击之后页面黑屏，去掉一个按钮之后，页面正常显示。黑屏的时候控制台报错如下：

报错讯息可能有点长，可以忽略一大部分，这里给出一些能提示你找问题的地方(如果要看详细的报错信息请在页面最后查看)：

The following assertion was thrown during a scheduler callback:  
There are multiple heroes that share the same tag within a subtree.  
Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must have a unique non-null tag.  
In this case, multiple heroes had the following tag: <default FloatingActionButton tag>

大意是：一个子树只能拥有一个tag值。不同子树的tag值不能相同，而你现在的路径中有不止一个子树，这些子树都用了一个默认的tag值。这样就报错了。知道问题描述了，下面开始追踪到底是哪里出了问题：

Hero(tag: <default FloatingActionButton tag>, state: _HeroState#7f098)  
...
 └Tooltip("photo_library", position: below, dependencies: [TickerMode], state:_TooltipState#232f8

OK，这里定位到了 FloatingActionButton 中的 Tooltip("photo_library"） 也就是我们所写的控件一。

既然说这里用的是默认tag，那么我们更改下tag值问题应该就不存在了吧。接着，我们来看 FloatingActionButton 给我们提供了哪些属性：

FloatingActionButton.extended({
    Key key,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.shape,
    this.isExtended = true,
    this.materialTapTargetSize,
    this.clipBehavior = Clip.none,
    this.focusNode,
    Widget icon,
    @required Widget label,
  })

我们看到一个属性 heroTag 而他返回了一个默认值; 我们来看一下这个 heroTag 以及它的默认值:

/// If this is not explicitly set, then there can only be one
  /// [FloatingActionButton] per route (that is, per screen), since otherwise
  /// there would be a tag conflict (multiple heroes on one route can't have the
  /// same tag). The material design specification recommends only using one
  /// floating action button per screen.

默认值：

class _DefaultHeroTag {  
  const _DefaultHeroTag();
  @override
  String toString() => '<default FloatingActionButton tag>';
}

根据 heroTag 的定义我们可以知道，在一个页面中，只能存在一个相同的tag值，多个heroes不能使用相同的tag值。而我们的 floating action button 就是一个 hero ，并且一个页面出现了两次，如果不设置 heroTag 就会产生冲突。我们对这个两个 FloatingActionButton 添加 heroTag 之后，冲突就解决了。(这个herotag主要是方便做动画效果，具体可参考hero动画)

错误描述全部：

flutter: ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════  
flutter: The following assertion was thrown during a scheduler callback:  
flutter: There are multiple heroes that share the same tag within a subtree.  
flutter: Within each subtree for which heroes are to be animated (i.e. a PageRoute subtree), each Hero must  
flutter: have a unique non-null tag.  
flutter: In this case, multiple heroes had the following tag: <default FloatingActionButton tag>  
flutter: Here is the subtree for one of the offending heroes:  
flutter: # Hero(tag: <default FloatingActionButton tag>, state: _HeroState#7f098)  
flutter: # └SizedBox(renderObject: RenderConstrainedBox#0b125 relayoutBoundary=up8 NEEDS-PAINT)  
flutter: #  └Offstage(offstage: false, renderObject: RenderOffstage#81335 relayoutBoundary=up9 NEEDS-PAINT)  
flutter: #   └TickerMode(mode: enabled)  
flutter: #    └KeyedSubtree-[GlobalKey#9c6ce]  
flutter: #     └Tooltip("photo_library", position: below, dependencies: [TickerMode], state:  
flutter: _TooltipState#232f8(ticker inactive))  
flutter: #      └GestureDetector(startBehavior: start)  
flutter: #       └RawGestureDetector(state: RawGestureDetectorState#58fc4(gestures: [long press], behavior:  
flutter: opaque))  
flutter: #        └Listener(listeners: [down], behavior: opaque, renderObject: RenderPointerListener#24b9a  
flutter: relayoutBoundary=up10 NEEDS-PAINT)  
flutter: #         └Semantics(container: false, properties: SemanticsProperties, label: "photo_library",  
flutter: value: null, hint: null, hintOverrides: null, dependencies: [Directionality], renderObject:  
flutter: RenderSemanticsAnnotations#c6cc8 relayoutBoundary=up11 NEEDS-PAINT)  
flutter: #          └RawMaterialButton(state: _RawMaterialButtonState#681f5)  
flutter: #           └Semantics(container: true, properties: SemanticsProperties, label: null, value: null,  
flutter: hint: null, hintOverrides: null, renderObject: RenderSemanticsAnnotations#86632  
flutter: relayoutBoundary=up12 NEEDS-PAINT)  
flutter: #            └_InputPadding(renderObject: _RenderInputPadding#90535 relayoutBoundary=up13  
flutter: NEEDS-PAINT)  
flutter: #             └Focus(dependencies: [_FocusMarker], state: _FocusState#ee3c4)  
flutter: #              └_FocusMarker  
flutter: #               └ConstrainedBox(BoxConstraints(w=56.0, h=56.0), renderObject:  
flutter: RenderConstrainedBox#c2ddc relayoutBoundary=up14 NEEDS-PAINT)  
flutter: #                └Material(type: button, elevation: 6.0, color: Color(0xff2196f3),  
flutter: textStyle.debugLabel: (((englishLike button 2014).merge(whiteCupertino button)).copyWith).copyWith,  
flutter: textStyle.inherit: false, textStyle.color: Color(0xffffffff), textStyle.family: .SF UI Text,  
flutter: textStyle.size: 14.0, textStyle.weight: 500, textStyle.letterSpacing: 1.2, textStyle.baseline:  
flutter: alphabetic, textStyle.decoration: TextDecoration.none, shape:  
flutter: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), dependencies: [TickerMode],  
flutter: state: _MaterialState#9380e)  
flutter: #                 └_MaterialInterior(duration: 200ms, shape:  
flutter: CircleBorder(BorderSide(Color(0xff000000), 0.0, BorderStyle.none)), elevation: 6.0, color:  
flutter: Color(0xff2196f3), shadowColor: Color(0xff000000), dependencies: [TickerMode, Directionality],  
flutter: state: _MaterialInteriorState#374a9(ticker inactive))  
flutter: #                  └PhysicalShape(clipper: ShapeBorderClipper, elevation: 6.0, color:  
flutter: Color(0xff2196f3), shadowColor: Color(0xff000000), renderObject: RenderPhysicalShape#81092  
flutter: NEEDS-PAINT)  
flutter: #                   └_ShapeBorderPaint(dependencies: [Directionality])  
flutter: #                    └CustomPaint(renderObject: RenderCustomPaint#79891 NEEDS-PAINT)  
flutter: #                     └NotificationListener<LayoutChangedNotification>  
flutter: #                      └_InkFeatures-[GlobalKey#4fbd0 ink renderer](renderObject:  
flutter: _RenderInkFeatures#a166b NEEDS-PAINT)  
flutter: #                       └AnimatedDefaultTextStyle(duration: 200ms, debugLabel: (((englishLike button  
flutter: 2014).merge(whiteCupertino button)).copyWith).copyWith, inherit: false, color: Color(0xffffffff),  
flutter: family: .SF UI Text, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration:  
flutter: TextDecoration.none, softWrap: wrapping at box width, overflow: clip, dependencies: [TickerMode],  
flutter: state: _AnimatedDefaultTextStyleState#0aef0(ticker inactive))  
flutter: #                        └DefaultTextStyle(debugLabel: (((englishLike button  
flutter: 2014).merge(whiteCupertino button)).copyWith).copyWith, inherit: false, color: Color(0xffffffff),  
flutter: family: .SF UI Text, size: 14.0, weight: 500, letterSpacing: 1.2, baseline: alphabetic, decoration:  
flutter: TextDecoration.none, softWrap: wrapping at box width, overflow: clip)  
flutter: #                         └InkWell(gestures: [tap], clipped to BoxShape.rectangle, dependencies:  
flutter: [_FocusMarker], state: _InkResponseState<InkResponse>#527c4)  
flutter: #                          └Listener(listeners: [enter, exit], behavior: translucent, renderObject:  
flutter: RenderPointerListener#e73bd NEEDS-PAINT)  
flutter: #                           └GestureDetector(startBehavior: start)  
flutter: #                            └RawGestureDetector(state: RawGestureDetectorState#14fe4(gestures:  
flutter: [tap], behavior: opaque))  
flutter: #                             └_GestureSemantics(renderObject: RenderSemanticsGestureHandler#18230  
flutter: NEEDS-PAINT)  
flutter: #                              └Listener(listeners: [down], behavior: opaque, renderObject:  
flutter: RenderPointerListener#0c4e6 NEEDS-PAINT)  
flutter: #                               └Builder(dependencies: [IconTheme])  
flutter: #                                └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))  
flutter: #                                 └Container(padding: EdgeInsets.zero)  
flutter: #                                  └Padding(padding: EdgeInsets.zero, dependencies:  
flutter: [Directionality], renderObject: RenderPadding#48145 NEEDS-PAINT)  
flutter: #                                   └Center(alignment: center, widthFactor: 1.0, heightFactor: 1.0,  
flutter: dependencies: [Directionality], renderObject: RenderPositionedBox#bd5b3 NEEDS-PAINT)  
flutter: #                                    └Builder(dependencies: [IconTheme])  
flutter: #                                     └IconTheme(IconThemeData#15fa8(color: Color(0xffffffff)))  
flutter: #                                      └Icon(IconData(U+0E413), dependencies: [Directionality,  
flutter: IconTheme])  
flutter: #                                       └Semantics(container: false, properties:  
flutter: SemanticsProperties, label: null, value: null, hint: null, hintOverrides: null, renderObject:  
flutter: RenderSemanticsAnnotations#9a63c relayoutBoundary=up1 NEEDS-PAINT)  
flutter: #                                        └ExcludeSemantics(excluding: true, renderObject:  
flutter: RenderExcludeSemantics#b80fe relayoutBoundary=up2 NEEDS-PAINT)  
flutter: #                                         └SizedBox(width: 24.0, height: 24.0, renderObject:  
flutter: RenderConstrainedBox#b6771 relayoutBoundary=up3 NEEDS-PAINT)  
flutter: #                                          └Center(alignment: center, dependencies:  
flutter: [Directionality], renderObject: RenderPositionedBox#d5b8f NEEDS-PAINT)  
flutter: #                                           └RichText(textDirection: ltr, softWrap: wrapping at box  
flutter: width, overflow: visible, maxLines: unlimited, text: "", dependencies:  
flutter: [_LocalizationsScope-[GlobalKey#955e1]], renderObject: RenderParagraph#df683 relayoutBoundary=up1  
flutter: NEEDS-PAINT)  
flutter:  
flutter:  
flutter: When the exception was thrown, this was the stack:  
flutter: #0      Hero._allHeroesFor.addHero.<anonymous closure> (package:flutter/src/widgets/heroes.dart:265:11)  
flutter: #1      Hero._allHeroesFor.addHero (package:flutter/src/widgets/heroes.dart:275:8)  
flutter: #2      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:288:20)  
flutter: #3      SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #4      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #5      ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #6      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #7      SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #8      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #9      MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)  
flutter: #10     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #11     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #12     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #13     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #14     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #15     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #16     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #17     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #18     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #19     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #20     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #21     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #22     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #23     MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)  
flutter: #24     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #25     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #26     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #27     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #28     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #29     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #30     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #31     MultiChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5181:16)  
flutter: #32     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #33     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #34     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #35     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #36     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #37     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #38     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #39     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #40     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #41     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #42     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #43     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #44     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #45     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #46     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #47     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #48     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #49     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #50     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #51     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #52     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #53     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #54     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #55     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #56     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #57     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #58     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #59     ComponentElement.visitChildren (package:flutter/src/widgets/framework.dart:3955:14)  
flutter: #60     Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:302:15)  
flutter: #61     SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5080:14)  
flutter: #62     Element.visitChildElements (package:flutter/src/widgets/framework.dart:2820:5)  
flutter: #63     Hero._allHeroesFor (package:flutter/src/widgets/heroes.dart:305:13)  
flutter: #64     HeroController._startHeroTransition (package:flutter/src/widgets/heroes.dart:783:51)  
flutter: #65     HeroController._maybeStartHeroTransition.<anonymous closure> (package:flutter/src/widgets/heroes.dart:757:11)  
flutter: #66     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1016:15)  
flutter: #67     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:966:9)  
flutter: #68     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:874:5)  
flutter: #72     _invoke (dart:ui/hooks.dart:236:10)  
flutter: #73     _drawFrame (dart:ui/hooks.dart:194:3)  
flutter: (elided 3 frames from package dart:async)  
flutter: ════════════════════════════════════════════════════════════════════════════════════════════════════

QQ技术交流群：214541576

热爱生活，分享快乐。好记性不如烂笔头。多写，多记，多实践，多思考。

问题1：

Recommend

Simple trading bot in JavaScript using ~40 lines of code

Progressed to Stage 3! ? · tc39/proposal-nullish-coalescing@c259ae1 · GitHub

快 30 岁了，还没有小孩，是否是失败的人生？

中国民营运载火箭入轨第一家：星际荣耀一箭多星首发成功！

逃过了拼团却没逃过拼多多的“砍一刀”

交易所老板的真实生活：遇盗惊魂夜不能寐

阿里平头哥首颗芯片玄铁910问世，联合四张「王牌」迎接云计算拐点

杨超越的粉丝为什么这么喜欢组织各种比赛，很上进似的？ - 知乎

孩子4岁总是慢半拍，总觉得很笨，怎么调节自己心态？ - 知乎

如何评价HDU Claris? - 知乎

About Joyk