Flutter Hero创建重复文本

Question

我正在尝试在flutter中编写一个英雄动画来在屏幕之间过渡。我使用一个颤动动画将卡片动画移动到下一页，使用另一个颤动动画将文本从卡片移动到下一页。不幸的是，在我在下面的代码中放慢速度的动画中，有一个重复的文本项。

下面是我用来测试单击卡片以将其扩展到新页面的代码。我无论如何也想不出怎样才能防止动画中的文字重复。最可能的罪魁祸首是我为页面设置了一个主人公(使页面之间的过渡动画化)，并为页面内的文本设置了一个主人公。

Card (page-hero)
---> CardText (text-hero)

and

Page (page-hero)
---> PageText (text-hero)

注意:下面的代码是我从另一个问题中采用来测试这个理论的：How to expand a card on tap in flutter?

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new FirstPage(title: 'Color Palette'),
    );
  }
}

class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _FirstPageState createState() => new _FirstPageState();
}

class _FirstPageState extends State<FirstPage> {
  final palette = [
    {'#E53935': 0xFFE53935},
    {'#D81B60': 0xFFD81B60},
    {'#8E24AA': 0xFF8E24AA},
    {'#5E35B1': 0xFF5E35B1},
    {'#3949AB': 0xFF3949AB},
    {'#1E88E5': 0xFF1E88E5},
    {'#039BE5': 0xFF039BE5},
    {'#00ACC1': 0xFF00ACC1},
    {'#00897B': 0xFF00897B},
    {'#43A047': 0xFF43A047},
    {'#7CB342': 0xFF7CB342},
    {'#C0CA33': 0xFFC0CA33},
  ];

  @override
  Widget build(BuildContext context) {
    timeDilation = 10.0;
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new ListView.builder(
            itemCount: palette.length,
            itemBuilder: (context, index) => new Container(child: new Hero(
                  tag: palette[index].keys.first,
                  child: new GestureDetector(
                    onTap: () {
                      Navigator
                          .of(context)
                          .push(new ColorPageRoute(palette[index]));
                    },
                    child: new Card(
                      // height: 64.0,
                      // width: double.infinity,
                      color: new Color(palette[index].values.first),
                      child: new Align(
                        alignment: Alignment.topRight,
                        child: new Hero(
                          tag: 'text-${palette[index].keys.first}',
                          child: SizedBox(
                            width: 250,
                            child: new Text(
                            palette[index].keys.first,
                            style: Theme.of(context).textTheme.title.copyWith(
                                  color: Colors.white,
                                ),
                          )),
                        ),
                      ),
                    ),
                  ),
                ))),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  final Map<String, int> color;

  SecondPage({this.color});

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Color'),
      ),
      body: Container( child: new Hero(
        tag: color.keys.first,
        child: new Container(
          color: new Color(color.values.first),
          child: new Align(
            // alignment: Alignment.topCenter,
            child: new Hero(
              tag: 'text-${color.keys.first}',
              child: new SizedBox(
                width: 200,
                child: new Text(
                color.keys.first,
                style:
                    Theme.of(context).textTheme.title.copyWith(color: Colors.white),
              )),
            ),
          ),
        ),
      )),
    );
  }
}

class ColorPageRoute extends MaterialPageRoute {
  ColorPageRoute(Map<String, int> color)
      : super(
            builder: (context) => new SecondPage(
                  color: color,
                ), fullscreenDialog: true);

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation, Widget child) {
    return FadeTransition(opacity: animation, child: child);
  }
}

​

​

预期的动画是一小段文本，而不是您在上面的代码中看到的副本。我怎么做才不会收到重复的文本呢？谢谢!

Answer 1

不要在Hero中包含Hero，它已解决

body: Container( child: new Hero(
        tag: color.keys.first,
        child: new Container(
          color: new Color(color.values.first),
          child: new Align(
             alignment: Alignment.topCenter,
            child: Hero( // remove this hero
              tag: 'text-${color.keys.first}',
              child: new SizedBox(
                  width: 200,
                  child: new Text(
                    color.keys.first,
                    style:
                    Theme.of(context).textTheme.title.copyWith(color: Colors.white),
                  )),
            ),
          ),
        ),