卡片翻转到 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);
        },
      ),
    );
  }
}