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();
},
),
),
),
]
),
);
}
}
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:
AppBar
, IconTheme
is overridden to handle primaryColor
as backgroundMaterialApp
.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.
Comments