Cinematic sequences

A cutscene is an animation of switching routes

There are several ways you can do this

  1. inheritancePageRouteLet’s do, duplicate 5 abstract methods, and abstractbuildTransitions
  2. Inherits an existing system class, such as MaterialPageRoute or CupertinoPageRoute
  3. Once and for all solution, usePageTransitionsThemeClass that combines the Theme of the MaterialApppageTransitionsThemeattribute

PageTransitionsTheme = PageTransitionsTheme = PageTransitionsTheme = PageTransitionsTheme = PageTransitionsTheme = PageTransitionsTheme = PageTransitionsTheme

It has the following benefits:

  1. Set up once for all of youMaterialPageRouteIt all works
  2. For named routes, that ispushNamedThe system also works

Analyze the source code first

Why analyze source code? Because if it comes up, it doesn’t look high-end

Start with a well-known pointcut, as most cutscenes are implemented using the navigator.push method

If you look at the implementation of a method, you’ll see a lot of common things. For example, each Route has its own OverlayEntry

There is then an install method

In the actual call, the Overlay will be inserted into the Overlay stack and displayed on the interface

After this string of calls, we associate the Navigator push with Route. How can we associate the theme with Route

We see that we find pageTransitionsTheme from Theme and call the pageTransitionsTheme buildTransitions method to complete the build, So this is the main reason why we can make multiple changes to the theme at once

How to use

Now that you’ve seen how the source code is associated with the pageTransitionsTheme property, it’s time to customize it

Modify your MyApp and modify the pageTransitionsTheme property


class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        pageTransitionsTheme: PageTransitionsTheme(
          builders: <TargetPlatform, PageTransitionsBuilder>{
            TargetPlatform.iOS: createTransition(),
            TargetPlatform.android: createTransition(),
          },
        ),
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page')); }}Copy the code

Use some animations provided by the system


PageTransitionsBuilder createTransition() {
  return FadeUpwardsPageTransitionsBuilder();
}

Copy the code

The effect is as follows:

According to the notes, the SDK has the following types of animations

Including FadeUpwardsPageTransitionsBuilder corresponding to the android default, PageTransitionsBuilder nature is corresponding to the iOS

ZoomPageTransitionsBuilder:

OpenUpwardsPageTransitionsBuilder:

The custom

In addition to the existing ones, we can also customize animations, which can be combined with animation components to achieve cool animation effects. For details, please refer to the animation section on the official website

Custom MyPageTransitionsBuilder

import 'package:flutter/material.dart';

PageTransitionsBuilder createTransition() {
  // return FadeUpwardsPageTransitionsBuilder();
  // return OpenUpwardsPageTransitionsBuilder();
  // return ZoomPageTransitionsBuilder();
  return MyPageTransitionsBuilder();
}

class MyPageTransitionsBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
      PageRoute<T> route,
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    returnScaleTransition( scale: animation, child: RotationTransition( turns: animation, child: child, ), ); }}Copy the code

Results the following

Afterword.

The warehouse address

If you have any questions, please leave a message on my blog (login on Github).