Discovery example (There are multiple heroes that share the same tag within a subtree.)

[dt-justin]

Describe the bug
I'm trying to use the Discovery example on a FloatingActionButton in the Scaffold.

To Reproduce
I had to mod the Painter code as for some release the combine action was not working at all no matter what I tried (I displayed each path and they were perfect boot combine difference wasn't subtracting it). This is my new Painter but I doubt that it's issue as it has nothing to do with Hero Animation. Everything else is from the example. This painter has a weird issue where the centre doesn't seem to be actually transparent and I can't see the barrier or background widgets through it, it's just white. But still looks better than no donut hole. But that's not the issue for this ticket. The There are multiple heroes that share the same tag within a subtree. is the issue, it's not a blocking bug, but I'd like to not see it at all in the logs.

import 'package:flutter/material.dart';

class DonutPainter extends CustomPainter {
  const DonutPainter(this.color, {this.innerCircleRadius = 40});

  final Color color;
  final double innerCircleRadius;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, size.width / 2, paint);

    // Draw the inner circle with a blend mode to create the "hole"
    final innerPaint = Paint()
      ..color = Colors.transparent // Or the background color
      ..style = PaintingStyle.fill
      ..blendMode = BlendMode.clear; // Clears the pixels covered by the inner circle

    canvas.drawCircle(center, innerCircleRadius, innerPaint);
  }

  @override
  bool shouldRepaint(DonutPainter oldDelegate) {
    return color != oldDelegate.color;
  }
}

Expected behaviour
No error

[fzyzcjy]

Hi,

There are multiple heroes that share the same tag within a subtree.

Firstly maybe check whether we can make heros have different tags

[dt-justin]

I'm sorry are you asking me to? I'm not using Heros are all so I'm not sure where to look. I have one FloatingActionButton and that's all, if I remove the Discovery I get no errors. I dont' want to remove it as I love it, but I'm not sure how to correct the issue with it. Googling does say that flutter_portal can cause this issue but there is no resolution for it.

[fzyzcjy]

Hmm I think maybe the Hero inside FAB or Discovery has some incompatibility issues. Could you please provide a min repro sample, e.g. where is the flutter portal put

[dt-justin]

I'll see if I can trim things down and make an example on dartpad. Can't be done since I use other packages. I think this might run, I wanted to get all the packages in there incase they conflict. I haven't tested this. But should give the general idea. Obviously I had to cut LOTS out and stick up a few places since I removed the splash completely.

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

// animated_bottom_navigation_bar: ^1.4.0
import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
// flutter_native_splash: ^2.4.6
import 'package:flutter_native_splash/flutter_native_splash.dart';
// flutter_portal: ^1.1.4
import 'package:flutter_portal/flutter_portal.dart';
// loader_overlay: ^5.0.0
import 'package:loader_overlay/loader_overlay.dart';
// provider: ^6.1.5
import 'package:provider/provider.dart';

final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
// Fixme move all to AppAppState()
int bottomNavIndex = 0;

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(
    const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, // Make the status bar transparent
    ),
  );
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown,
  ]).then(
    (_) => runApp(
      ChangeNotifierProvider(
        create: (context) => AppAppState(),
        child: const MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return GlobalLoaderOverlay(
      overlayColor: Colors.black.withValues(alpha: 0.5),
      child: Portal(
        child: MaterialApp(
          navigatorKey: navigatorKey,
          title: 'My Example',
          theme: ThemeData(i
            primarySwatch: Colors.purple,
            useMaterial3: true,
            fontFamily: 'Poppins',
            scaffoldBackgroundColor: Colors.white,
          ),
          home: Consumer<AppAppState>(
            builder: (context, appState, child) {
              return const Splash();
            },
          ),
        ),
      ),
    );
  }
}

class AppAppState extends ChangeNotifier {
  int _bottomNavIndex = 0;
  int get bottomNavIndex => _bottomNavIndex;
  set bottomNavIndex(int bottomNavIndex) {
    _bottomNavIndex = bottomNavIndex;
    notifyListeners();
  }
}

class Splash extends StatefulWidget {
  const Splash({super.key});

  @override
  SplashState createState() => SplashState();
}

class SplashState extends State<Splash> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  bool isFirstRun = true;

  void endFirstRun() {
    isFirstRun = false;
  }

  @override
  void initState() {
    super.initState();

    FlutterNativeSplash.remove();
    context.loaderOverlay.hide();
  }

  @override
  Widget build(BuildContext context) {
    final appState = Provider.of<AppAppState>(context);

    return Scaffold(
      floatingActionButton: (appState.bottomNavIndex == 0)
          ? Discovery(
              innerCircleRadius: 32,
              visible: isFirstRun,
              description: Center(
                child: Text(
                  'Log your latest meal!',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.blue,
                  ),
                ),
              ),
              onClose: () async => endFirstRun(),
              child: FloatingActionButton(
                elevation: 0,
                focusElevation: 0,
                hoverElevation: 0,
                tooltip: (isFirstRun == true) ? '' : 'Add a meal',
                backgroundColor: Colors.blue,
                onPressed: () {
                  if (isFirstRun == true) {
                    endFirstRun();
                  }

                  showModalBottomSheet(
                    context: context,
                    backgroundColor: Colors.grey.shade100,
                    isScrollControlled: true,
                    constraints: BoxConstraints(
                      maxWidth: MediaQuery.sizeOf(context).width > 800
                          ? MediaQuery.sizeOf(context).width * 0.6
                          : MediaQuery.sizeOf(context).width,
                      minHeight: MediaQuery.sizeOf(context).height / 2,
                    ),
                    shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                      ),
                    ),
                    builder: (BuildContext context) {
                      return Container();
                    },
                  );
                },
                shape: const CircleBorder(),
                child: Icon(
                  Icons.add,
                  color: Colors.white,
                  size: 25,
                ),
              ),
            )
          : null,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      key: _scaffoldKey,
      appBar: AppBar(title: Text('Home')),
      bottomNavigationBar: const BottomNav(),
      backgroundColor: Colors.grey.shade100,
      body: SafeArea(
        child: SingleChildScrollView(
          child: Center(
            child: Stack(
              children: [
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Discovery extends StatelessWidget {
  const Discovery({
    super.key,
    required this.visible,
    required this.onClose,
    required this.description,
    required this.child,
    this.innerCircleRadius = 40,
  });

  final Widget child;
  final Widget description;
  final bool visible;
  final VoidCallback onClose;
  final double innerCircleRadius;

  @override
  Widget build(BuildContext context) {
    return Barrier(
      visible: visible,
      onClose: onClose,
      child: PortalTarget(
        visible: visible,
        closeDuration: kThemeAnimationDuration,
        anchor: const Aligned(
          target: Alignment.center,
          follower: Alignment.center,
        ),
        portalFollower: Stack(
          children: [
            CustomPaint(
              painter: DonutPainter(
                Colors.blueAccent,
                innerCircleRadius: innerCircleRadius,
              ),
              child: TweenAnimationBuilder<double>(
                duration: kThemeAnimationDuration,
                curve: Curves.easeOut,
                tween: Tween(begin: 50, end: visible ? 200 : 50),
                builder: (context, radius, _) {
                  return Padding(
                    padding: EdgeInsets.all(radius),
                    child: child,
                  );
                },
              ),
            ),
            Positioned(
              top: 100,
              left: 50,
              width: 350,
              child: TweenAnimationBuilder<double>(
                duration: kThemeAnimationDuration,
                curve: Curves.easeOut,
                tween: Tween(begin: 0, end: visible ? 1 : 0),
                builder: (context, opacity, _) {
                  return Opacity(
                    opacity: opacity,
                    child: description,
                  );
                },
              ),
            )
          ],
        ),
        child: child,
      ),
    );
  }
}

class Barrier extends StatelessWidget {
  const Barrier({
    super.key,
    required this.onClose,
    required this.visible,
    required this.child,
  });

  final Widget child;
  final VoidCallback onClose;
  final bool visible;

  @override
  Widget build(BuildContext context) {
    return PortalTarget(
      visible: visible,
      closeDuration: kThemeAnimationDuration,
      portalFollower: GestureDetector(
        behavior: HitTestBehavior.opaque,
        onTap: onClose,
        child: TweenAnimationBuilder<Color>(
          duration: kThemeAnimationDuration,
          tween: ColorTween(
            begin: Colors.transparent,
            end: visible ? Colors.black54 : Colors.transparent,
          ),
          builder: (context, color, child) {
            return ColoredBox(color: color);
          },
        ),
      ),
      child: child,
    );
  }
}

/// Non-nullable version of ColorTween.
class ColorTween extends Tween<Color> {
  ColorTween({required Color begin, required Color end})
      : super(begin: begin, end: end);

  @override
  Color lerp(double t) => Color.lerp(begin, end, t)!;
}

class DonutPainter extends CustomPainter {
  const DonutPainter(this.color, {this.outlineColor = Colors.transparent, this.innerCircleRadius = 40});

  final Color color;
  final Color outlineColor;
  final double innerCircleRadius;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final paint = Paint()
      ..color = outlineColor
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, (size.width / 2) + 5, paint..blendMode = BlendMode.clear);
    canvas.drawCircle(center, (size.width / 2) + 5, paint..blendMode = BlendMode.dstOver);

    final circlePaint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, size.width / 2, circlePaint..blendMode = BlendMode.clear);
    canvas.drawCircle(center, size.width / 2, circlePaint..blendMode = BlendMode.dstOver);

    final innerPaint = Paint()
      ..color = outlineColor
      ..style = PaintingStyle.fill;

    canvas.drawCircle(center, innerCircleRadius, innerPaint..blendMode = BlendMode.clear);
    canvas.drawCircle(center, innerCircleRadius, innerPaint..blendMode = BlendMode.dstOver);
  }

  @override
  bool shouldRepaint(DonutPainter oldDelegate) {
    return color != oldDelegate.color;
  }
}

[fzyzcjy]

Hmm the demo looks reasonable at a first glance. Unfortunately I do not have time recently to dig deeper :(

[dt-justin]

it seems to be this code cause it

              child: TweenAnimationBuilder<double>(
                duration: kThemeAnimationDuration,
                curve: Curves.easeOut,
                tween: Tween(begin: 50, end: visible ? 150 : 50),
                builder: (context, radius, _) {
                  return Padding(padding: EdgeInsets.all(radius), child: child);
                },
              ),

if I comment that out of the CustomPaint, the error goes away. Still digging in but since this is my only issue atm I'm going to try to focus on it.

[dt-justin]

it's child, which is a copy of the Floatingaction, wonder if there is a way to inject a key into it to make it different, to just get the size of it and make a round container? I see now it does this to report it over the barrier otherwise the action button would be bellow the barrier.

[dt-justin]

BTW this painter fixes web for your example

class DonutPainter extends CustomPainter {
  const DonutPainter(this.color, {this.innerRadius = 40});

  final Color color;
  final double innerRadius;

  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final outerRadius = (size.width / 2);
    final Path path = Path();

    path.fillType = PathFillType.evenOdd;
    path.addOval(Rect.fromCircle(center: center, radius: outerRadius));
    path.addOval(Rect.fromCircle(center: center, radius: innerRadius));

    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return oldDelegate is! DonutPainter || oldDelegate.color != color || oldDelegate.innerRadius != innerRadius;
  }
}

[dt-justin]

Okay I converted Discovery() to use callable Widget Function() like

            Discovery(
              child: () {
                return AddActionButton(
                  key: UniqueKey(),
                  tooltip: (showDiscovery) ? '' : 'click me',
                  closeDiscovery: closeActionDiscovery,
                );
              },
            )

then in Discovery I call it in

    return Barrier(
      visible: visible,
      onClose: onClose,
      child: PortalTarget(
        visible: visible,
        closeDuration: kThemeAnimationDuration,
        anchor: const Aligned(target: Alignment.center, follower: Alignment.center),
        portalFollower: Stack(
          children: [
            CustomPaint(
              painter: DonutPainter(
                kAppTheme['highlightColor'],
                innerRadius: innerRadius,
              ),
              child: TweenAnimationBuilder<double>(
                duration: kThemeAnimationDuration,
                curve: Curves.easeOut,
                tween: Tween(begin: 50, end: visible ? 150 : 50),
                builder: (context, radius, _) {
                  return Padding(padding: EdgeInsets.all(radius), child: child());
                },
              ),
            ),
            Positioned(
              top: 80,
              left: 30,
              width: 270,
              child: TweenAnimationBuilder<double>(
                duration: kThemeAnimationDuration,
                curve: Curves.easeOut,
                tween: Tween(begin: 0, end: visible ? 1 : 0),
                builder: (context, opacity, _) {
                  return Opacity(opacity: opacity, child: Center(child: description));
                },
              ),
            ),
          ],
        ),
        child: child(),
      ),
    );

since I'm calling the Widget and the widget sets UniqueKey per call, the error should go away, but it doesn't :(. I'm out of ideas now, that was lots of work for nothing :. Hoping you'll have better luck since you understand the inner workings.