Я пытаюсь реализовать транзакцию героя, которая проходит гладко, но контейнер, который я перехожу, имеет два варианта (маленький / большой).
Большой:
Небольшой:
Как видите, маленькая версия такая же, как и большая, но только с некоторыми отсутствующими элементами. Версия, которую необходимо отобразить, задается свойством 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
не подходит для этого, как я могу добиться того же результата с помощью некоторых пользовательских анимаций?