如何在颤动中改变英雄动画的速度 [英] How to change speed of a hero animation in flutter

问题描述

我按照

import 'package:flutter/material.dart';无效的主要()=>运行应用程序(我的应用程序())；MyApp 类扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回材料应用程序(主页:第 1 页()，);}}类 Page1 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回脚手架(身体:中心(孩子:列(mainAxisAlignment: MainAxisAlignment.spaceAround,孩子们:<小部件>[凸起按钮(孩子:文本('Page2')，onPressed: () =>导航器.push(语境，页面路由生成器(transitionDuration:持续时间(秒:2)，pageBuilder: (_, __, ___) =>第2页()))，),英雄(标签:'家'，孩子:图标(Icons.home))],),),);}}类 Page2 扩展 StatelessWidget {@覆盖小部件构建(BuildContext 上下文){返回脚手架(身体:中心(孩子:英雄(标签: '家',孩子:图标(图标.home,),),),);}}

I have made simple hero animation following instructions from Flutter's website

It works as described in the instructions but in my case, I would like it to animate much more slowly from the first to the second screen. do anyone know how to change the speed of this animation?

解决方案

To modify the transition speed, you'll have to adjust the PageRoute transition duration (as already pointed out by @diegoveloper).

If you wanna keep the default transition, you can create a class implementing MaterialPageRoute. If you already have your own transition or want to create one you can use the PageRouteBuilder to easily build your own. Simply adjust the transitionDuration.

Here's a small standalone example, using the PageRouteBuilder:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              child: Text('Page2'),
              onPressed: () => Navigator.push(
                  context,
                  PageRouteBuilder(
                      transitionDuration: Duration(seconds: 2),
                      pageBuilder: (_, __, ___) => Page2())),
            ),
            Hero(tag: 'home', child: Icon(Icons.home))
          ],
        ),
      ),
    );
  }
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'home',
          child: Icon(
            Icons.home,
          ),
        ),
      ),
    );
  }
}

这篇关于如何在颤动中改变英雄动画的速度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！