Skip to content

davidsturm96/animated_page_transition

 
 

Repository files navigation

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 ;)

About

This package is for animated page transitioning

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • C++ 47.0%
  • CMake 22.9%
  • Dart 15.9%
  • HTML 10.7%
  • C 2.0%
  • Swift 1.1%
  • Other 0.4%