卡片在Flutter中翻转为英雄/对话

Question

希望使用英雄风格的过渡效果，实现从网格视图中的一堆卡片式小部件到一个简单对话框的动画。我在Unity中模拟了一些东西来演示这个概念

我玩过英雄转换游戏（尝试了RotationTransition之类的各种操作），还使用了一个名为Flip Card（https://pub.dev/packages/flip_card）的程序包，但是我不能完全将这两个概念结合起来，想知道是否有人有想法

Answer 1

实际上这很有趣，我已经完成了，请尝试以下代码：

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
import 'package:after_layout/after_layout.dart';

class FlipCardHero extends StatefulWidget {
  @override
  _FlipCardHeroState createState() => _FlipCardHeroState();
}

class _FlipCardHeroState extends State<FlipCardHero> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 4,
          childAspectRatio: 1.0,
        ),
        itemCount: 12,
        itemBuilder: (context, index) {
          return GestureDetector(
            child: Hero(
              tag: 'flipcardHero$index',
              child: Container(
                color: Colors.yellow[50],
                height: 150,
                child: FlipCard(
                  flipOnTouch: false,
                  direction: FlipDirection.HORIZONTAL,
                  front: Container(
                    child: Text('Front'),
                  ),
                  back: Container(
                    child: Text('Back'),
                  ),
                ),
              ),
            ),
            onTap: () {
              Navigator.of(context).push(
                PageRouteBuilder(
                  opaque: false,
                  pageBuilder: (_, __, ___) =>
                      SingleFlipCard(id: 'flipcardHero$index'),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class SingleFlipCard extends StatefulWidget {
  final id;
  SingleFlipCard({@required this.id});

  @override
  SingleFlipCardState createState() => SingleFlipCardState();
}

class SingleFlipCardState extends State<SingleFlipCard>
    with AfterLayoutMixin<SingleFlipCard> {
  final GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

  @override
  void afterFirstLayout(BuildContext context) {
    cardKey.currentState.toggleCard();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: GestureDetector(
        child: Center(
          child: Hero(
            tag: widget.id,
            child: Container(
              color: Colors.yellow[50],
              height: 150,
              child: FlipCard(
                key: cardKey,
                flipOnTouch: false,
                direction: FlipDirection.HORIZONTAL,
                front: Container(
                  width: 200,
                  height: 400,
                  child: Text('Front'),
                ),
                back: Container(
                  width: 200,
                  height: 400,
                  child: Text('Back'),
                ),
              ),
            ),
          ),
        ),
        onTap: () {
          Navigator.pop(context);
        },
      ),
    );
  }
}