flutter_page_transition_plus 1.0.1 copy "flutter_page_transition_plus: ^1.0.1" to clipboard
flutter_page_transition_plus: ^1.0.1 copied to clipboard

Flutter custom page transitions builder

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_page_transition_plus/flutter_page_transition_plus.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const NextPage(),
      onGenerateRoute: (settings) => {
        "/next": FlutterPageTransition.next(settings, const NextPage()),
        "/zoom": FlutterPageTransition.zoom(settings, const NextPage()),
        "/open/upwards":
            FlutterPageTransition.openUpwards(settings, const NextPage()),
        "/fade/upwards":
            FlutterPageTransition.fadeUpwards(settings, const NextPage()),
        "/custom": FlutterPageTransition.custom(
          settings,
          const NextPage(),
          CustomPageTransitionsBuilder(),
        ),
      }[settings.name],
    );
  }
}

class NextPage extends StatelessWidget {
  const NextPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Container();
}

class CustomPageTransitionsBuilder extends PageTransitionsBuilder {
  @override
  Widget buildTransitions<T>(
    PageRoute<T> route,
    BuildContext context,
    Animation<double> animation,
    Animation<double> secondaryAnimation,
    Widget child,
  ) {
    return _CustomPageTransition(routeAnimation: animation, child: child);
  }
}

class _CustomPageTransition extends StatelessWidget {
  _CustomPageTransition({
    Key? key,
    required Animation<double> routeAnimation,
    required this.child,
  })  : _positionAnimation =
            routeAnimation.drive(_bottomUpTween.chain(_fastOutSlowInTween)),
        _opacityAnimation = routeAnimation.drive(_easeInTween),
        super(key: key);

  // Fractional offset from 1/4 screen below the top to fully on screen.
  static final _bottomUpTween = Tween<Offset>(
    begin: const Offset(0.0, 0.25),
    end: Offset.zero,
  );
  static final Animatable<double> _fastOutSlowInTween =
      CurveTween(curve: Curves.fastOutSlowIn);
  static final Animatable<double> _easeInTween =
      CurveTween(curve: Curves.easeIn);

  final Animation<Offset> _positionAnimation;
  final Animation<double> _opacityAnimation;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _positionAnimation,
      child: FadeTransition(opacity: _opacityAnimation, child: child),
    );
  }
}
6
likes
150
points
78
downloads

Publisher

verified publisherinteniquetic.com

Weekly Downloads

Flutter custom page transitions builder

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_page_transition_plus