“This is the 13th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021”

preface

Continuing with the Hero component, this article introduces another property of the Hero component, flightShuttleBuilder. This property is used to set components during flight. By default, the Hero component uses the Hero child of the source page during flight. With flightShuttleBuilder, we can change components as we go.

FlightShuttleBuilder definition

FlightShuttleBuilder is a return to flight process method defined as follows:

typedef HeroFlightShuttleBuilder = Widget Function(
  BuildContext flightContext,
  Animation<double> animation,
  HeroFlightDirection flightDirection,
  BuildContext fromHeroContext,
  BuildContext toHeroContext,
);
Copy the code

FlightDirection is an enumeration to distinguish between push and pop. The animation thought it would change during the animation, but debug found only one starting value. Three contexts can be used when needed, but generally not. We can use flightDirection to define components in push and POP.

The sample

The example starts out simple, using two simple color blocks as in-flight components.

flightShuttleBuilder: (_, animation, direction, __, ___) {
  if (direction == HeroFlightDirection.push) {
    return ClipOval(
      child: Opacity(
        child: Container(color: Colors.pink),
        opacity: 0.4,),); }else {
    return ClipOval(
      child: Opacity(
        child: Container(color: Colors.blue),
        opacity: 0.4,),); }},Copy the code

Note that this only needs to be defined in the Hero component of the source page, not in the target Hero component. Here’s how it works. From current use, the feel benefit is that if there is a difference between the components of the Hero before and after, it may feel more consistent to use the components of the flight to and from the Hero. Others don’t seem to have much use and may need to be explored further.

Platform differentiation

Note that Hero components are different between iOS and Android. The biggest difference is that iOS compatibility is a bit shaky. For example, iOS requires transitionOnUserGestures to be true on the emulator to return gestures.

If not, clicking the back button in the navigation bar a few times will result in an error: ‘_backGestureController! = null’: is not true. The Internet said there was a problem with the simulator. The real one hasn’t been verified yet. When enabled, there is no error, but clicking on the Hero component of the target page does not return to the source page. There’s nothing wrong with hitting the back button or using gestures. Android doesn’t have this problem.

This issue needs to be dealt with platform by platform, so iOS needs to be paid special attention to. One solution is to set the fullscreenDialog property of the MaterialPageRoute to true on iOS. This does not support sideslip return. As follows:

Navigator.of(context).push(
  MaterialPageRoute(
    fullscreenDialog: true./ /...))Copy the code

Therefore, on iOS, it is recommended to set fullscreenDialog to True if the Hero component is clicked and interactive. If not, set transitionOnUserGestures to True to support gesture gestures.

conclusion

This paper introduces the use of Hero component flightShuttleBuilder, as well as iOS and Android platform in Hero component differentiation processing. So what are the application scenarios of the Hero component? I’ll talk about two application cases. The source code of Flutter has been uploaded to: Start with Flutter and Combat – animation source code.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder.

👍🏻 : feel the harvest please point a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!