[Flutter]画面遷移で起きたエラー

#エラー内容

##事象
画面遷移を実装していた時に遷移すると画面が真っ暗になる不具合に遭遇した
![Flutter遷移失敗.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249334/ec9a3e29-7541-a325-307f-85352f0a7d79.gif)

実装は以下のようになっていた

```dart
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) {
                      return SecondPage();
                  }),
                );
              },
              child: Text('Go Second'),
            ),
          ],
        ),
      ),
      floatingActionButton: Column(
        verticalDirection: VerticalDirection.up,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container( 
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              backgroundColor: Colors.redAccent,
              onPressed: _incrementCounter,
              child: Icon(Icons.add),
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              backgroundColor: Colors.amberAccent,
              onPressed: _decrementCounter,
              child: Icon(Icons.remove),
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              backgroundColor: Colors.green,
              onPressed: _deleteAll,
              child: Icon(Icons.delete),
            ),
          ),
        ],
      ),
    );
  }
```
ログをみてみると以下のようなエラーが発生していた

```
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>

Here is the subtree for one of the offending heroes: Hero
  tag: <default FloatingActionButton tag>
  state: _HeroState#6468c
When the exception was thrown, this was the stack: 
#0      Hero._allHeroesFor.inviteHero.<anonymous closure> (package:flutter/src/widgets/heroes.dart:265:11)
#1      Hero._allHeroesFor.inviteHero (package:flutter/src/widgets/heroes.dart:276:8)
#2      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:295:21)
#3      SingleChildRenderObjectElement.visitChildren (package:flutter/src/widgets/framework.dart:5433:14)
#4      Hero._allHeroesFor.visitor (package:flutter/src/widgets/heroes.dart:308:15)
...
```

ふむふむ、よくわからん(英語読めない)
FloatingActionButtonがどうのこうの言っている？

翻訳してみた
>There are multiple heroes that share the same tag within a subtree.
>サブツリー内で同じタグを共有する複数のヒーローがいます。

Flutterは複数のヒーローを認めていないらしい(冗談です)

いろいろ調べるとHeroClassと言うものがあるらしく、それらを複数使用する時は**heroTag**を指定してあげる必要があるらしい

#解決
各FloatingActionButtonに**heroTag**を指定することで解決した

```dart
     floatingActionButton: Column(
        verticalDirection: VerticalDirection.up,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              heroTag: "hero1", // HeroTag設定
              backgroundColor: Colors.redAccent,
              onPressed: _incrementCounter,
              child: Icon(Icons.add),
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              heroTag: "hero2", // HeroTag設定
              backgroundColor: Colors.amberAccent,
              onPressed: _decrementCounter,
              child: Icon(Icons.remove),
            ),
          ),
          Container(
            margin: EdgeInsets.only(bottom: 16.0),
            child: FloatingActionButton(
              heroTag: "hero3", // HeroTag設定
              backgroundColor: Colors.green,
              onPressed: _deleteAll,
              child: Icon(Icons.delete),
            ),
          ),
        ],
      ),
```

またHeroClassを使う時も単体であれば問題は内容だった
ボタンのコンポーネントを別のものに置き換えることでも解決した

*↓ボタンを一つにした時*
![Flutter遷移0.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249334/24e598c1-7fea-02d1-c2ee-2b5577178958.gif)

*↓ボタンのコンポーネントを別のものに変更*
![Flutter遷移.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/249334/b25ab3c9-8f55-0db5-c563-e67e5028519a.gif)