Page transition animations in Flutter - Mini App: Build & Ship

Build: Page Transition Demo

This screen demonstrates how to navigate between two pages with a smooth slide animation.

Target UI

Page 1:
+-----------------------+
|       Page 1          |
|                       |
|  [Go to Page 2]       |
+-----------------------+

Page 2:
+-----------------------+
|       Page 2          |
|                       |
|  [Back to Page 1]     |
+-----------------------+

Create two pages: Page 1 and Page 2.

Page 1 has a button labeled 'Go to Page 2'.

Page 2 has a button labeled 'Back to Page 1'.

Navigating from Page 1 to Page 2 uses a slide-from-right animation.

Navigating back from Page 2 to Page 1 uses the default back animation.

Starter Code

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Transition Demo',
      home: const Page1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // TODO: Add navigation with slide animation to Page2
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back to Page 1'),
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Page Transition Demo',
      home: const Page1(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(PageRouteBuilder(
              pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
              transitionsBuilder: (context, animation, secondaryAnimation, child) {
                const begin = Offset(1.0, 0.0);
                const end = Offset.zero;
                const curve = Curves.ease;

                final tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

                return SlideTransition(
                  position: animation.drive(tween),
                  child: child,
                );
              },
            ));
          },
          child: const Text('Go to Page 2'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Back to Page 1'),
        ),
      ),
    );
  }
}

We used Navigator.push with a PageRouteBuilder to create a custom slide animation when moving from Page 1 to Page 2. The transitionsBuilder defines a slide transition that moves the new page from right to left. The back navigation uses the default animation by calling Navigator.pop.

This approach lets us control how the new page appears, making the app feel smooth and natural.

Final Result

Completed Screen

Page 1:
+-----------------------+
|       Page 1          |
|                       |
|  [Go to Page 2]       |
+-----------------------+

--tap 'Go to Page 2'-->

Page 2 slides in from right:
+-----------------------+
|       Page 2          |
|                       |
|  [Back to Page 1]     |
+-----------------------+

Tapping 'Go to Page 2' slides Page 2 in from the right.

Tapping 'Back to Page 1' returns to Page 1 with default back animation.

Stretch Goal

Add a fade transition animation when navigating back from Page 2 to Page 1.

💡 Hint

Use Navigator.pushReplacement with a PageRouteBuilder that defines a fade transition for the back navigation.