awesome_route

Description:

awesome route

AwesomeRoute Package Documentation #
The AwesomeRoute package is a versatile and easy-to-use Flutter navigation solution that offers a variety of animation options for page transitions. It simplifies the process of implementing animated routes in your Flutter application, allowing for a more dynamic and engaging user experience. This documentation aims to guide developers through integrating the AwesomeRoute package into their applications, detailing its capabilities, and how to utilize its functionalities effectively.
Features #
AwesomeRoute provides several key features to enhance your application's navigation:
Multiple animation types for page transitions
Customizable transition durations, background colors, and more
Ability to navigate while retaining or clearing the navigation history
Support for passing functions to routes for additional logic execution before navigation
Installation #
To use the AwesomeRoute package in your project, add it to your Flutter project's pubspec.yaml file under dependencies:
dependencies:
flutter:
sdk: flutter
awesome_route: ^latest_version
copied to clipboard
Replace ^latest_version with the latest AwesomeRoute package version available.
Importing #
Once installed, import the necessary AwesomeRoute components in your Flutter files where you wish to use them:
import 'package:awesome_route/awesome_route.dart';
import 'package:awesome_route/animate_awesome_route.dart';
import 'package:flutter/material.dart';
copied to clipboard
Usage #
Basic Navigation #
AwesomeRoute offers different methods for navigating between pages, with customizable animations and navigation stack handling options.
Pushing a Page
To navigate to a new page and keep the previous navigation state intact:
AwesomeRoute.push(
context: context,
page: NewPageWidget(), // Your destination widget
child: YourCurrentWidget(), // The widget from which you're navigating
animationType: AnimateAwesomeRoute.fade, // Choose your animation
duration: Duration(seconds: 1), // Animation duration
borderRadius: 10.0, // Optional UI customization
backgroundColor: Colors.black26, // Optional UI customization
);
copied to clipboard
Dynamic Routing #
Easily map route names to pages with support for dynamic argument passing. Define your routes in a central place, typically during app initialization. Here's how to set up the routes:
import 'package:awesome_route/awesome_route.dart';

class AwesomePagesRoute {
static Future<void> routes() async {
AwesomeRoute(pages: {
// Define routes and corresponding pages here
'/otp': (context, arguments) => AwesomeArguments(
arguments: arguments ?? {},
page: ConfirmOTP(),
),
'/home': (context, arguments) => AwesomeArguments(
page: HomeScreen(),
),
// Add more routes as needed
});
}
}
copied to clipboard
Note that this class and method can be called any name you wish. after declaring the class and the method, initialise it the the main method of your flutter app:
void main() async {
// initialise all the routes
await AwesomePagesRoute.routes();
runApp(MyApp());
}
copied to clipboard
Using Routes in Your Application #
Navigate to a route using AwesomeRoute.go method:
//using the argument
ElevatedButton(
onPressed: () {
AwesomeRoute.go(
context,
'/otp',
arguments: {
'name': 'John Doe',
'email': '[email protected]'
},
animations: AnimateAwesomeRoute.opacity,
duration: Duration(seconds: 1),
);
},
child: Text('Verify OTP'),
)
//without argument
ElevatedButton(
onPressed: () {
AwesomeRoute.go(
context,
'/otp',
);
},
child: Text('Verify OTP'),
)
copied to clipboard
Accessing Arguments #
class ConfirmOTP extends StatelessWidget {
@override
Widget build(BuildContext context) {
final arguments = AwesomeArguments.of(context)?.arguments;
return Scaffold(
appBar: AppBar(title: Text("OTP Confirmation")),
body: Text('Name: ${arguments?['name']} Email: ${arguments?['email']}'),
);
}
}
copied to clipboard
Customizing Animations #
Specify the animation type when navigating to maintain the visual coherence of your application. Supported animations can be extended in the AnimateAwesomeRoute enum.
Clearing Navigation History #
To clear the navigation stack (useful for login or logout scenarios), set the clearHist parameter to true when calling AwesomeRoute.go.
Advanced Navigation Options #
AwesomeRoute also provides methods for navigating with more control over the navigation stack, such as:
pushAndClear(): Navigates to a new page and removes the just-left page from the navigation history.
pushAndClearAll(): Navigates to a new page without keeping any previous navigation history.
pushRoute(): Allows passing a function to execute additional logic before navigating.
Each method supports the same customizable parameters as push() for animation and UI customization.
copied to clipboard
Animation Types #
AwesomeRoute supports a wide range of animation types for transitions, as defined in AnimateAwesomeRoute. Examples include fade, slide, rotate, scale, and various combinations thereof.
Contribution and Support #
The AwesomeRoute package is open for contributions. Developers are encouraged to contribute by reporting any issues, suggesting improvements, or submitting pull requests. For support or to report issues, you can contact the maintainer at [email protected], visit the AwesomeRoute website on https://awesomeroute.usiobaifokenneth.com, or check the GitHub repository at https://github.com/kkennymore/awesome_route .
also checkout our AnimateEase package https://animateease.usiobaifokenneth.com, github https://github.com/kkennymore/animate_ease
This documentation aims to get you started with the AwesomeRoute package. For more detailed examples and advanced usage, refer to the GitHub repository or the package documentation on the AwesomeRoute website.