时间戳

首页 > 解决方案 > Android 10 页面过渡

flutter - Android 10 页面过渡

问题描述

我想在我的应用程序中为所有设备（包括 29 以下的 sdk 版本）创建类似 Android 10 的页面转换。

我知道在 Flutter 中我们可以构建自己的自定义页面过渡动画，但我不知道如何拥有 Android 10 设备所具有的缩放效果。

至今

import 'package:flutter/material.dart';

Route zoomTransitionRoute(Widget child) {
  return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnim) {
        return ScaleTransition(
          scale: animation,
          child: child,
        );
      },
      transitionsBuilder: (context, animation, secondaryAnim, child) {
        var begin = Offset(0.0, 0.1);
        var end = Offset(0.0, 0.0);

        var curve = Curves.ease;
        var tween = Tween(begin: begin, end: end);
        var curvedAnim = CurvedAnimation(parent: animation, curve: curve);
        return SlideTransition(
          position: tween.animate(curvedAnim),
          child: child,
        );
      },
      transitionDuration: Duration(milliseconds: 200));
}

这看起来不像我想要的任何东西。谁能帮我吗？

编辑

这就是我想要实现的

在此处输入图像描述

请注意父页面如何缩放一点然后子页面也从几乎缩放.9

标签： flutterdart

解决方案

我找到了一种使用内置PageTransitionsTheme来解决这个问题的方法。

在父级MaterialApp中，

MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: lightTheme,
      darkTheme: darkTheme,
      themeMode: ThemeMode.system,
      home: RegisterPage(),
    );

lightThemeanddarkTheme可以有一个pageTransitionsTheme属性，

ThemeData lightTheme = ThemeData(
  //...
  pageTransitionsTheme: myPageTransitionsTheme,
  //...
);

并且myPageTransitionsTheme被初始化为，

PageTransitionsTheme pageTransitionsTheme = PageTransitionsTheme(builders: {
  TargetPlatform.android: ZoomPageTransitionsBuilder(),
  TargetPlatform.iOS: ZoomPageTransitionsBuilder()
});

在 iOS 和 Android 上测试，工作正常！

推荐阅读