MaterialPageRoute

Build Material transition with MaterialPageRoute.

What is MaterialPageRoute?

MaterialPageRoute is a route class that provides a Material design transition animation. Its builder parameter takes a function that builds the screen to open. On Android it slides up from below, and on iOS it slides in from the right.

MaterialPageRoute(
  builder: (context) => SecondScreen(),
)

The builder parameter

builder is a callback function that takes a BuildContext parameter and returns a Widget. MaterialPageRoute calls this function to build the new screen. The parameter name is usually written as _ since it is not used; but context can also be given if desired.

Exercise Make a transition with MaterialPageRoute

Write a function gecis that prints Gecis yapildi. In main call gecis. Add an ElevatedButton whose onPressed uses MaterialPageRoute to open a Scaffold screen.

Show example solution

import 'package:flutter/material.dart';

void gecis() {
  print('Gecis yapildi');
}

void main() {
  gecis();
  runApp(const Uygulama());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (_) => Scaffold()),
              );
            },
            child: Text('Gecis'),
          ),
        ),
      ),
    );
  }
}

Test yourself

What does the builder parameter of MaterialPageRoute return?
- int
- bool
- String
- Widget
Show answer

Widget — The builder parameter is a callback function that returns a Widget; it does not return String, int or bool.

Add the builder parameter

MaterialPageRoute(
  ____: (_) => Scaffold(),
)

Show answer

MaterialPageRoute(
  builder: (_) => Scaffold(),
)

MaterialPageRoute parts

MaterialPageRoute

Material transition route
builder

Callback that builds the screen
transition

Transition animation
Navigator

Calls the route

Next lesson: Navigator.pop

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies