Класс PageRouteBuilder

Класс PageRouteBuilder наследует PageRoute и принимает pageBuilder для содержимого. Анимацию задают в transitionsBuilder. Длительность перехода - в transitionDuration. Готовый экземпляр передают в Navigator.push.

Синтаксис

PageRouteBuilder<void>(
	pageBuilder: (context, animation, secondaryAnimation) {
		return Scaffold(
			body: Center(
				child: Text('abcde'),
			),
		);
	},
	transitionsBuilder: (context, animation, secondaryAnimation, child) {
		return FadeTransition(opacity: animation, child: child);
	},
)

Параметры

Параметр	Описание
`pageBuilder`	Строит страницу. Получает animation для входа.
`transitionsBuilder`	Оборачивает child анимацией перехода.
`transitionDuration`	Длительность анимации открытия.
`settings`	`RouteSettings` с name и arguments.

Пример

Давайте откроем экран с fade переходом:

import 'package:flutter/material.dart';

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

	@override
	Widget build(BuildContext context)
	{
		return Scaffold(
			body: Center(
				child: ElevatedButton(
					onPressed: () {
						Navigator.push(
							context,
							PageRouteBuilder<void>(
								pageBuilder: (ctx, a1, a2) {
									return Scaffold(
										body: Center(
											child: Text('12345'),
										),
									);
								},
								transitionsBuilder: (
									ctx,
									animation,
									sec,
									child,
								) {
									return FadeTransition(
										opacity: animation,
										child: child,
									);
								},
							),
						);
					},
					child: const Text('abcde'),
				),
			),
		);
	}
}

void main()
{
	runApp(
		MaterialApp(
			home: FadeHome(),
		),
	);
}

На экране второй маршрут появится с плавным fade вместо стандартного сдвига Material.

Пример

Давайте ускорим transitionDuration:

import 'package:flutter/material.dart';

void main()
{
	runApp(
		MaterialApp(
			home: Builder(
				builder: (context) {
					return Scaffold(
						body: Center(
							child: ElevatedButton(
								onPressed: () {
									Navigator.push(
										context,
										PageRouteBuilder<void>(
											transitionDuration:
												const Duration(milliseconds: 120),
											pageBuilder: (ctx, a1, a2) {
												return const Scaffold(
													body: Center(
														child: Text('abcde'),
													),
												);
											},
											transitionsBuilder: (
												ctx,
												animation,
												sec,
												child,
											) {
												return ScaleTransition(
													scale: animation,
													child: child,
												);
											},
										),
									);
								},
								child: const Text('12345'),
							),
						),
					);
				},
			),
		),
	);
}

На экране короткий scale переход откроет текст 'abcde'.

Смотрите также

класс MaterialPageRoute,
готовая анимация Material без builder
класс Route,
базовый тип маршрута
метод push,
кладёт PageRouteBuilder на стопку
класс ModalRoute,
родитель PageRoute в иерархии Route