Change Font Size of Text in Navigation

Question

I want to change font size of text while navigation. Let's say we have a Text Widget in screen1 and it has font size of 14 pixel, also I have another Text widget in the screen2 with 18 pixel size. I want to make a smooth transition between them.

I tried to use Hero and TweenAnimationBuilder together to get the effect but it has so much problems like, animation is not smooth and because of the size change, text's end doesn't show up while navigation.

// 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

maybe you can try add or change the curve argument value in TweenAnimationBuilder. Here is the example

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

by the default, the curve is Curve.linear, so you can try change the curve element. Try to refer the Curve library

Answer 2

// screen1
Hero(
  tag: "animateTitle",
  child: Text(
    "Animated Text",
    style: TextStyle(
      fontSize: 14.0, // Initial font size
      color: Colors.white.withOpacity(0.6),
      fontWeight: FontWeight.w400,
    ),
  ),
),

Make sure to set pageAnimationDuration correctly to adjust the speed of the animation. This method will ensure a seamless transition between font sizes during screen navigation. Modify the duration and font size values as necessary to meet your specific animation preferences.

// screen2
TweenAnimationBuilder<double>(
  duration: pageAnimationDuration,
  tween: Tween<double>(begin: 14.0, end: 18.0), // Initial and target font sizes
  builder: (context, value, child) {
    return Hero(
      tag: "animateTitle",
      child: Text(
        "Animated Text",
        style: TextStyle(
          fontSize: value, // Dynamically update font size
          color: Colors.darkBlue2.withOpacity(0.6),
          fontWeight: FontWeight.w400,
        ),
      ),
    );
  },
),