android - 动画中的英雄和showDialog动画

Question

我需要帮助来重新创建带有 flutter 的此示例动画，我尝试使用showDialog()，但我看不到动画，我使用了带有标签的Hero()，但不起作用，请帮助我!

Answer 1

可以使用Stack，AnimatedPositioned和AnimatedContainer来完成:



检查以下示例代码:

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  bool isOpen = false;

  // AnimatedContainer dimensions:
  double width = 55, height = 55;

  // AnimatedPositioned positions:
  double left = 20, bottom = 20;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: SafeArea(
        child: Container(
          color: Color(0xff151515),
          child: Stack(
            children: <Widget>[
              Positioned(
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text("TIMER", style: TextStyle(color: Colors.white, fontSize: 36, fontWeight: FontWeight.w700),),
                    Text("00 : 00", style: TextStyle(color: Colors.white, fontSize: 36, fontWeight: FontWeight.w700),),
                  ],
                ),
              ),
              Positioned(
                left: 0,
                top: 0,
                right: 0,
                bottom: 0,
                child: GestureDetector(
                  child: AnimatedOpacity(
                    // If the widget is visible, animate to 0.0 (invisible).
                    // If the widget is hidden, animate to 1.0 (fully visible).
                    opacity: isOpen ? 1.0 : 0.0,
                    duration: Duration(milliseconds: 500),
                    // The green box must be a child of the AnimatedOpacity widget.
                    child: Container(
                      width: 200.0,
                      height: 200.0,
                      color: Colors.black45,
                    ),
                  ),
                  onTap: () {
                    if (isOpen) {
                      setState(() {
                        width = 55; height = 55;
                        left = 20; bottom = 20;
                        isOpen = false;
                      });
                    }
                  },
                ),
              ),
              AnimatedPositioned(
                left: left,
                bottom: bottom,
                duration: Duration(milliseconds: 500),
                curve: Curves.easeInOut,
                child: GestureDetector(
                  child: AnimatedContainer(
                    width: width,
                    height: height,
                    decoration: new BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(28)),
                    duration: Duration(milliseconds: 500),
                    curve: Curves.easeInOut,
                    // child: dialog container content goes here,
                  ),
                  onTap: () {
                    if (!isOpen) {
                      setState(() {
                        width = 200; height = 200;
                        left = 60; bottom = 60;
                        isOpen = !isOpen;
                      });
                    }
                  },
                ),
              ),
              Positioned(
                bottom: 30,
                left: 40,
                child: IgnorePointer(
                  child: Text(
                    '1',
                    style: TextStyle(color: Colors.white, fontSize: 30),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}