Description:

animated page transition

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!!!

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';
copied to clipboard
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(),
),
),
);
}
}
copied to clipboard
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),
),
);
}
}
copied to clipboard
And now you are ready to go!!!
Have fun and happy coding ;)

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter