是否可以使用 BottomSheet 制作英雄动画

Sun*_*Man 7 dart flutter flutter-layout flutter-animation

我一直在尝试在启动 BottomSheet 时为英雄图像设置动画。由于您不使用导航器,是否可以执行或必须编写自定义动画?

我只是想知道在探索自定义动画或为 BottomSheet 制作自定义小部件之前是否有快速修复方法。

这是我用来测试的代码:

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Test Hero'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({this.title});
  final String title;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Hero(
            tag: 'logo',
            child: FlutterLogo(size: 300,),
          ),
          GestureDetector(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Screen2()),
              );
            },
            child: Container(
              height: 50,
              width: 150,
              color: Colors.grey,
              child: Center(child: Text('Go to Screen 2')),
            ),
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          showModalBottomSheet(context: context, builder: (context){
            return GestureDetector(
              onTap: (){
                Navigator.pop(context);
              },
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.white,
                    child: Center(
                      child: Hero(
                        tag:'logo',
                        child: FlutterLogo(
                          size: 50,
                        ),
                      ),
                    ),
                  ),
                  Text('Click me to go back',style: TextStyle(color: Colors.black),)
                ],
              ),
            );
          },
          );
        },
        tooltip: '',
        child: Text('Bottom Sheet',style: TextStyle(fontSize: 10),),
      ), 
    );
  }
}

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(50.0),
        child: Column(
          children: <Widget>[
            Container(
              height: 50,
              width: 50,
              child: Hero(
                tag:'logo',
                child: GestureDetector(
                  onTap:(){
                    Navigator.pop(context);
                  },
                  child: FlutterLogo(),
                ),
              ),
            ),
            Text('Click me to go back',style: TextStyle(color: Colors.black),)
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)