Я пытаюсь реализовать транзакцию героя, которая проходит гладко, но у контейнера, который я перемещаю, есть два варианта (маленький / большой).
Большой:
Малый:
Как видите, маленькая версия такая же, как и большая , но только некоторые элементы отсутствуют. Версия, которая должна быть отображена, задается с помощью свойства isSmall
.
Компонент выглядит следующим образом:
class TicPackage extends StatelessWidget {
TicPackage({this.package, this.onTap, this.isSmall = false});
final Package package;
final bool isSmall;
final Function() onTap;
final NumberFormat currencyFormatter =
NumberFormat.currency(locale: "nl", decimalDigits: 2, symbol: "€");
@override
Widget build(BuildContext context) {
Widget titleText = Text(
package.name,
style: TextStyle(
color: Colors.white, fontSize: 22, fontWeight: FontWeight.bold),
);
return TicCard(
color: package.color,
elevation: 4,
onTap: onTap,
children: <Widget>[
Row(
children: <Widget>[
isSmall
? titleText
: Text("${package.eventCount} evenementen",
style:
TextStyle(color: Color.fromRGBO(255, 255, 255, 0.5))),
Text(
"${currencyFormatter.format(package.price)}",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold),
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
if (!isSmall)
Padding(padding: EdgeInsets.only(top: 10), child: titleText),
Padding(
padding: EdgeInsets.only(top: 2),
child: Text(package.description,
style: TextStyle(color: Colors.white))),
if (!isSmall)
Padding(
padding: EdgeInsets.only(top: 12),
child: Text(package.goods,
style: TextStyle(
color: Colors.white, fontStyle: FontStyle.italic))),
if (!isSmall)
Padding(
padding: EdgeInsets.only(top: 10),
child: Container(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 3),
child: Text(
"${currencyFormatter.format(package.discount)} korting",
style: TextStyle(color: Colors.white),
)),
decoration: BoxDecoration(
border:
Border.all(color: Color.fromRGBO(255, 255, 255, 0.5)),
borderRadius: BorderRadius.circular(100)),
))
],
);
}
}
Экран A:
Hero(
tag: "package_${args.package.id}",
child: TicPackage(
isSmall: false,
package: args.package
)))
Экран B:
Hero(
tag: "package_${args.package.id}",
child: TicPackage(
isSmall: true,
package: args.package
)))
Теперь переход выглядит следующим образом:
Как вы можете видеть, он работает довольно хорошо, но это немного быстро, так как я использую условный рендеринг здесь. Также обратный переход выдает ошибку:
A RenderFlex overflowed by 96 pixels on the bottom.
Я полагаю, это потому, что на обратном пути пространство внезапно переполняется, потому что эти дополнительные виджеты визуализируются.
Теперь мой вопрос, как правильно создать компонент героя, который должен переходить с условными элементами. Или, если виджет hero
не подходит для этого, как я могу достичь того же результата с помощью некоторых пользовательских анимаций?