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.

Practice

1. What does Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage())) do in Flutter?

easy

A. It navigates to NewPage with a default slide animation.

B. It closes the current page without animation.

C. It replaces the current page without animation.

D. It shows a dialog instead of navigating.

Solution

1. Step 1: Understand Navigator.push usage

   Navigator.push adds a new page on top of the current stack, showing it.

2. Step 2: Recognize MaterialPageRoute effect

   Using MaterialPageRoute wraps the new page with a default slide animation from right to left.

3. Final Answer:

   It navigates to NewPage with a default slide animation. -> Option A

4. Quick Check:

   Navigator.push + MaterialPageRoute = Slide animation [OK]

Hint: Navigator.push with MaterialPageRoute slides new page in [OK]

Common Mistakes:

• Thinking Navigator.push closes current page
• Confusing MaterialPageRoute with dialog display
• Assuming no animation happens

2. Which of the following is the correct syntax to pop the current page in Flutter?

easy

A. Navigator.pop(context);

B. Navigator.popScreen(context);

C. Navigator.popRoute(context);

D. Navigator.popPage(context);

Solution

1. Step 1: Recall Navigator.pop method

   The correct method to remove the top page from the navigation stack is Navigator.pop(context).

2. Step 2: Verify method names

   Other options like popPage, popRoute, and popScreen do not exist in Flutter's Navigator API.

3. Final Answer:

   Navigator.pop(context); -> Option A

4. Quick Check:

   Pop current page = Navigator.pop(context) [OK]

Hint: Use Navigator.pop(context) to go back [OK]

Common Mistakes:

• Using non-existent Navigator methods
• Confusing pop with push
• Missing the context parameter

3. What will be the visual effect of this code snippet when navigating to NewPage()?

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return FadeTransition(opacity: animation, child: child);
  },
));

medium

A. The new page slides in from the bottom.

B. The new page zooms in from the center.

C. The new page appears instantly without animation.

D. The new page fades in smoothly.

Solution

1. Step 1: Analyze transitionsBuilder

   The transitionsBuilder returns a FadeTransition using the animation's opacity.

2. Step 2: Understand FadeTransition effect

   FadeTransition animates the opacity from transparent to fully visible, creating a fade-in effect.

3. Final Answer:

   The new page fades in smoothly. -> Option D

4. Quick Check:

   FadeTransition = fade in animation [OK]

Hint: FadeTransition means page fades in [OK]

Common Mistakes:

• Assuming slide or zoom animation instead of fade
• Ignoring transitionsBuilder parameter
• Confusing PageRouteBuilder with MaterialPageRoute

4. Identify the error in this Flutter code for custom page transition:

Navigator.push(context, PageRouteBuilder(
  pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
  transitionsBuilder: (context, animation, secondaryAnimation, child) {
    return SlideTransition(
      position: Tween(begin: Offset(1, 0), end: Offset.zero),
      child: child,
    );
  },
));

medium

A. Wrong type for position property.

B. Missing .animate(animation) on the Tween.

C. Should use MaterialPageRoute instead of PageRouteBuilder.

D. Missing context parameter in pageBuilder.

Solution

1. Step 1: Check Tween usage in SlideTransition

   The position property requires an Animation<Offset>, but Tween alone is not an animation.

2. Step 2: Fix Tween to animate with animation

   We must call .animate(animation) on the Tween to convert it into an animation.

3. Final Answer:

   Missing .animate(animation) on the Tween. -> Option B

4. Quick Check:

   Tween must be animated with .animate(animation) [OK]

Hint: Tween needs .animate(animation) for SlideTransition [OK]

Common Mistakes:

• Using Tween without .animate(animation)
• Confusing SlideTransition properties
• Thinking MaterialPageRoute is required for custom animation

5. You want to create a page transition where the new page slides in from the bottom and fades in simultaneously. Which code snippet correctly achieves this?

hard

A. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return FadeTransition(opacity: animation, child: child);
},
));

B. Navigator.push(context, MaterialPageRoute(builder: (context) => NewPage()));

C. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
final slide = Tween(begin: Offset(0, 1), end: Offset.zero).animate(animation);
final fade = Tween(begin: 0.0, end: 1.0).animate(animation);
return SlideTransition(
position: slide,
child: FadeTransition(opacity: fade, child: child),
);
},
));

D. Navigator.push(context, PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => NewPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return SlideTransition(
position: Tween(begin: Offset(1, 0), end: Offset.zero).animate(animation),
child: child,
);
},
));

Solution

1. Step 1: Understand combined animations

   To combine slide and fade, wrap FadeTransition inside SlideTransition or vice versa, both animated by the same animation.

2. Step 2: Check code correctness

   Navigator.push(context, PageRouteBuilder( pageBuilder: (context, animation, secondaryAnimation) => NewPage(), transitionsBuilder: (context, animation, secondaryAnimation, child) { final slide = Tween(begin: Offset(0, 1), end: Offset.zero).animate(animation); final fade = Tween(begin: 0.0, end: 1.0).animate(animation); return SlideTransition( position: slide, child: FadeTransition(opacity: fade, child: child), ); }, )); correctly creates two Tweens animated by animation and nests FadeTransition inside SlideTransition.

3. Final Answer:

   Creates a page transition where the new page slides in from the bottom and fades in simultaneously. -> Option C

4. Quick Check:

   Combine SlideTransition + FadeTransition with animated Tweens [OK]

Hint: Nest FadeTransition inside SlideTransition with animated Tweens [OK]

Common Mistakes:

• Using only one animation type instead of both
• Not animating Tweens properly
• Using MaterialPageRoute for custom animations