Skip to main content

TRANSITIONs in Beamer

creating Transitions file by extending BeamPage​

animations/transitions/beamer_custom_transition.dart
import 'package:beamer/beamer.dart';
import 'package:flutter/widgets.dart';

class TransPage extends BeamPage {
  const TransPage({required super.child, super.title, super.key});  // MUST use `super.var__Name`  to get the variable from the the parent
  // here, parent is `BeamPage` and `TransPage` gets the child, title, key form the `BeamPage` using `super.child`,  `super.title`, `super.key`

  @override
  Route createRoute(BuildContext context) {
    return PageRouteBuilder(
      fullscreenDialog: fullScreenDialog,
      opaque: opaque,
      settings: this,
      pageBuilder: (_, __, ___) => child,
      transitionsBuilder: (_, animation, __, child) => SlideTransition(
        position: animation.drive(
            Tween(begin: const Offset(0, 1), end: const Offset(0, 0))
                .chain(CurveTween(curve: Curves.bounceOut))),
        child: child,
      ),
    );
  }
}

only for reference, mine is better🤣🤣 : https://github.com/slovnicki/beamer/issues/51

using the Transition File​

    return TransPage(   /// 🔁🔁 instead of `return BeamPage`
    key: ValueKey(currentShoeData.model),
    child: ShoeDetailsScreen(shoeCardData: currentShoeData),
    title: 'details',
    // don't give `type` as  `TransPage` itself has custom-transition
    );