page transition gif

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Page1(),
      routes: {'/foo': (context) {
        return Page2();
      }},
    )
  );
}

class Page1 extends StatefulWidget {
  const Page1({super.key});

  @override
  State<Page1> createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Container(
      color: Colors.blue,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(onPressed: () {
          Navigator.pushNamed(context, '/foo');
        }, child: Text('FOO'))
      ],
    )));
  }
}

class Page2 extends StatefulWidget {
  const Page2({super.key});

  @override
  State<Page2> createState() => _Page2State();
}

class _Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
     return Scaffold(body: Container(
      color: Colors.red,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextButton(onPressed: () {
          Navigator.pop(context);
        }, child: Text('BACK'))
      ],
    )));
  }
}