FadeForwardsPageTransitionsBuilder class

Used by PageTransitionsTheme to define a horizontal MaterialPageRoute page transition animation that looks like the default page transition used on Android U.
This example shows the default page transition on Android.
To see it in action, copy and run this code snippet on DartPad.
import 'package:material_ui/material_ui.dart';

/// Flutter code sample for the default Android U page transition theme
/// [FadeForwardsPageTransitionsBuilder]. Tapping each list tile navigates to
/// a second page, which slides in from right to left while fading in.
/// Simultaneously, the first page slides out in the same direction while
/// fading out.

void main() => runApp(const PageTransitionsThemeApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        pageTransitionsTheme: PageTransitionsTheme(
          builders: Map<TargetPlatform, PageTransitionsBuilder>.fromIterable(
            TargetPlatform.values,
            value: (_) => const FadeForwardsPageTransitionsBuilder(),
          ),
        ),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(icon: const Icon(Icons.dehaze), onPressed: () {}),
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
        ],
      ),
      body: Column(
        children: <Widget>[
          Text('Messages', style: Theme.of(context).textTheme.headlineLarge),
          Expanded(
            child: Padding(
              padding: const .all(20.0),
              child: Card(
                clipBehavior: .antiAlias,
                elevation: 0,
                color: Theme.of(context).colorScheme.surfaceContainerLowest,
                child: ListView(
                  children: List<Widget>.generate(Colors.primaries.length, (
                    int index,
                  ) {
                    final Text kittenName = Text('Kitten $index');
                    final CircleAvatar avatar = CircleAvatar(
                      backgroundColor: Colors.primaries[index],
                    );
                    final String message = index.isEven
                        ? 'Hello hooman! My name is Kitten $index'
                        : "What's up hooman! My name is Kitten $index";
                    return ListTile(
                      leading: avatar,
                      title: kittenName,
                      subtitle: Text(message),
                      trailing: Text('$index seconds ago'),
                      onTap: () {
                        Navigator.of(context).push(
                          MaterialPageRoute<SecondPage>(
                            builder: (BuildContext context) => SecondPage(
                              kittenName: kittenName,
                              avatar: avatar,
                              message: message,
                            ),
                          ),
                        );
                      },
                    );
                  }),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  const SecondPage({
    super.key,
    required this.kittenName,
    required this.avatar,
    required this.message,
  });
  final Text kittenName;
  final CircleAvatar avatar;
  final String message;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const BackButton(),
        title: kittenName,
        centerTitle: false,
        actions: <Widget>[
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
          IconButton(icon: const Icon(Icons.more_vert), onPressed: () {}),
        ],
      ),
      body: Padding(
        padding: const .all(20.0),
        child: IntrinsicHeight(
          child: Row(
            children: <Widget>[
              avatar,
              ConstrainedBox(
                constraints: const BoxConstraints(minHeight: 50),
                child: Card(
                  elevation: 0.0,
                  shape: const RoundedRectangleBorder(
                    borderRadius: .only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                      bottomLeft: Radius.circular(5),
                      bottomRight: Radius.circular(20),
                    ),
                  ),
                  color: Theme.of(context).colorScheme.surfaceContainerLowest,
                  child: Center(
                    child: Padding(
                      padding: const .symmetric(horizontal: 15.0),
                      child: Text(message),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
Constructors

Properties

Methods

Operators

Constants

material_ui library
