Flutter Hero animation does not use theme colors?

Jesse de Wit

When creating a simple Hero animation with an icon in the appbar in a MaterialApp, the hero animation does not seem to use the theme color unless the color is explicitly specified in the icon itself. Can someone explain why the color of the icon is changing during flight when the icon color is not explicitly set? Does the Hero not have access to the Theme data? Or does it use another color set?

Example:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Hero(
          tag: "mytag",
          child: Material(
            color: Colors.transparent,
            child: IconButton(
              icon: Icon(
                Icons.menu,
                // uncomment below line and the flying icon is white as expected...
                // color: Theme.of(context).primaryIconTheme.color
              ),
              onPressed: () {
                Navigator.of(context).push(
                  PageRouteBuilder(
                    pageBuilder: 
                      (context, animation, secondaryAnimation) => SecondPage()
                  )
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget> [
          Hero(
            tag: "mytag",
            child: Material(
              color: Colors.transparent,
                child: IconButton(
                icon: Icon(
                  Icons.menu,
                  // uncomment below line and the reverse flying icon is white as expected...
                  // color: Theme.of(context).primaryIconTheme.color
                ),
                onPressed: () {
                  Navigator.of(context).pop();
                },
              ),
            ),
          ),
        ]
      ),
    );
  }
}

enter image description here

Rémi Rousselet

This happens because the flight animation of Hero is an OverlayEntry on MaterialApp. So while the widget used is the same (Icon), its location is not.

The thing is, in your case IconTheme.of(context) returns a different value based on that location:

  • As a child of AppBar, IconTheme is overridden to handle primaryColor as background
  • Everywhere else, it uses the default theme specified on MaterialApp.

So during the animation, the IconTheme used is a different one, leading to such issue.


A potential solution is to fix that value to make sure the IconTheme used is always the same:

AppBar(
  leading: Builder(
    builder: (context) {
      return Hero(
        child: IconTheme(
          data: Theme.of(context).primaryIconTheme,
          child: Icon(Icons.whatshot),
        ),
      );
    },
  ),
);

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Hero Animation Not Working in Flutter

Flutter: Hero animation in Same Screen

Flutter Change Colors by Theme

How can I use animation/animation not running during a Hero transition in Flutter?

Can't reproduce Hero animation in flutter

Flutter: Hero transition + widget animation at the same time?

Flutter Hero like animation with AnimatedContainer in a ListView

How to create a hero style animation on the same screen route with Flutter?

Cannot use palette colors from MUI theme

How to make ColorTween animation with multiple colors in flutter

how to add animation for theme switching in flutter?

How to use theme colors in ngx-admin theme

Hero animation with an AlertDialog

Why the dark-theme colors written in the SCSS file does not apply?

Theme.of(context).colorScheme does not have the expected colors

VueJS/Tailwindcss/VITE use env variables as colors for tailwind theme

How do I use Material UI theme colors inside a div?

Android: how to use the current theme's colors in a drawable xml?

is there an easy way to use theme colors in react-autosuggest items

How can I use Material Theme colors for custom things?

angular material, how to use dark() function when define theme colors?

Force Firefox Title Bar to use Windows operating system theme colors

How to make a Flutter button use themed colors

Flutter - Use Custom colors and themes in ThemeData

Hero animation causes (minimal) overflow

Hero ViewController animation with collectionView - swift

Hero Animation intially overflows then adjusts

How to use Hero framework?

Changing bootstrap theme and colors