Skip to main content

Flutter 官方文档再过一遍

官方文档的链接可以点击这里.

读相关的工程源码​

Flutter 提供了许多的sample.

  1. Gallery: https://github.com/flutter/gallery.git

Cookbook​

Animate a page route transition 转场动画​

地址: https://docs.flutter.dev/cookbook/animation/page-route-animation

转场动画的创建步骤如下:

  1. 设置 PageRouteBuilder
  2. 创建 Tween
  3. 添加 AnimatedWidget
  4. 使用 CurveTween
  5. 混合两个 Tweens

如下是具体细节.

设置 PageRouteBuilder​

要开始的话, 使用 PageRouteBuilder 来创建 Route. PageRouteBuilder 有两个回调, 一个用于创建 route(pageBuilder), 一个用于创建转场(transistionsBuilder).

目前框架可以保证 pageBuilder 只调用一次, 即只会在 route 第一次 build 的时候调用.

下面的代码示例创建了两个 route:

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Page1(),
    ),
  );
}

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go!'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      return child;
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

创建一个 Tween​

这里想创建一个从下方往上走的动画, Offset 是从 (0, 1) 到 (0, 0)

动画路由​