更改导航中文本的字体大小

Question

我想在导航时更改文本的字体大小。假设我们在 screen1 中有一个文本小部件，它的字体大小为 14 像素，在 screen2 中有另一个文本小部件，字体大小为 18 像素。我想在它们之间实现平稳过渡。

我尝试使用 Hero 和 TweenAnimationBuilder 一起使用来获得效果，但它有很多问题，例如动画不流畅，并且由于尺寸变化，导航时文本末尾不显示。

// screen1
Hero(
   tag: "animateTitle",
   child: Text(
      "Animated Text",
      style: context.headlineMedium?.copyWith(
         color: white.withOpacity(0.6),
         fontWeight: FontWeight.w400,
      ),
   ),
),

// screen2
TweenAnimationBuilder(
   duration: pageAnimationDuration,
   tween: Tween(begin: 24.sp, end: 16.sp),
   builder: (context, value, child) {
      return Hero(
      tag: "animateTitle",
      child: Text(
         "Animated Text",
         style: context.displayLarge?.copyWith(
            color: darkBlue2.withOpacity(0.6),
            fontWeight: FontWeight.w400,
            fontSize: value,
         ),
       ),
    );
 },
),

Answer 1

也许您可以尝试在 TweenAnimationBuilder 中添加或更改曲线参数值。这是例子

tween: Tween(begin: 24.sp, end: 16.sp),
curve: Curves.easeInOut,

默认情况下，曲线是Curve.linear，所以你可以尝试更改曲线元素。尝试参考曲线库