animated_page_transition 0.0.1+2 copy "animated_page_transition: ^0.0.1+2" to clipboard
animated_page_transition: ^0.0.1+2 copied to clipboard

This package is for animated page transitioning. This is easy to use package. Add animation_page_transition dependency into the pubspec.yaml file. Then, then import package into the implementation fil [...]

Animated page transition #

This package for page transition animation. With this package you can give have smooth page transitions in your apps. chack out the video given below!!!

VID_20220201122805

Usage #

Add animation_page_transition dependency into the pubspec.yaml file

then import package into the implementation file/s.

import 'package:animated_page_transition/animated_page_transition.dart';

You can implement animated page transition very easily.

First of all wrap your button with [PageTransitionButton] widget, example code is given below:

To use [PageTransitionButton] you have to add [TickerProviderStateMixin] into your widget.

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: PageTransitionButton(
          vsync: this,
          child: Container(
            height: 120,
            width: 120,
            decoration: BoxDecoration(
              color: const Color(0xFFFF9735),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          nextPage: const SecondScreen(),
        ),
      ),
    );
  }
}

Then wrap the scaffold of the second screen with [PageTransitionReceiver] widget where you want to navigate it as given below:

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

  @override
  Widget build(BuildContext context) {
    return PageTransitionReceiver(
      scaffold: const Scaffold(
        backgroundColor: Color(0xFFFF9735),
      ),
    );
  }
}

And now you are ready to go!!!

Have fun and happy coding ;)

31
likes
140
pub points
75%
popularity

Publisher

unverified uploader

This package is for animated page transitioning. This is easy to use package. Add animation_page_transition dependency into the pubspec.yaml file. Then, then import package into the implementation file/s and you can implement animated page transition very easily.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_page_transition