Flutter Not Found Animated Page | TweenAnimationBuilder | Text Animation

Let’s how do we use TweenAnimationBuilder to create not found page with animation. This is actually a text animation. We will do animation to make font bigger.

The properties like curve, tween and duration plays an important role about the animation.

Future<void> main() async {


  runApp(MyApp());
}

class MyApp extends StatelessWidget {


  MyApp();
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(

      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.blue,
        fontFamily: "Lato",
      ),
      
      home: NotFound(),
    );

  }
}


class NotFound extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TweenAnimationBuilder(
          curve: Curves.bounceOut,
          duration: Duration(seconds: 2),
          tween: Tween<double>(begin: 12.0,end: 30.0),
          builder: (BuildContext context, double value, Widget? child){
            return Text('Page Not Found',style: TextStyle(fontWeight: FontWeight.bold,fontSize: value));
          },

        ),
      ),
    );
  }
}

The property tween value begin and end tell you where to start from and where to end.

Since we wanna deal with the font size then we start with fontSize : 12(begin) and finish with fontSize:309(end)