More than one floating action button on same screen displays black screen

Question

I tried to add two floating action buttons on one of my screens and the result was a black screen after the first reload of the app.

Column(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
            FloatingActionButton(
                onPressed: () {
                },
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.map, size: 36.0),
           ),
           SizedBox(
                height: 16.0,
           ),
           FloatingActionButton(
                onPressed: () {},
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.add_location, size: 36.0),
           ),
    ],
),

From the debug log I noted the below line

 Within each subtree for which heroes are to be animated (typically a PageRoute subtree),
 each Hero must have a unique non-null tag.In this case, multiple heroes
 had the following tag: <default FloatingActionButton tag>

Answer 1

The debug information suggests that the issue is with hero animation of the floating action button.

If you don't want hero animations on FAB, make the heroTag property of both the FAB as null.

Column(
   mainAxisSize: MainAxisSize.min,
   children: <Widget>[
        FloatingActionButton(
            heroTag: null,
            onPressed: () {
            },
            materialTapTargetSize: MaterialTapTargetSize.padded,
            backgroundColor: Colors.green,
            child: const Icon(Icons.map, size: 36.0),
       ),
       SizedBox(
            height: 16.0,
       ),
       FloatingActionButton(
            heroTag: null,
            onPressed: () {},
            materialTapTargetSize: MaterialTapTargetSize.padded,
            backgroundColor: Colors.green,
            child: const Icon(Icons.add_location, size: 36.0),
       ),
    ],
),

If you prefer default hero animations with the FAB, add unique hero tags to the FABs.

Column(
       mainAxisSize: MainAxisSize.min,
       children: <Widget>[
            FloatingActionButton(
                heroTag: 'unq1',
                onPressed: () {
                },
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.map, size: 36.0),
           ),
           SizedBox(
                height: 16.0,
           ),
           FloatingActionButton(
                heroTag: 'unq2'
                onPressed: () {},
                materialTapTargetSize: MaterialTapTargetSize.padded,
                backgroundColor: Colors.green,
                child: const Icon(Icons.add_location, size: 36.0),
           ),
        ],
),