https://github.com/goposse/fluro
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.
https://github.com/goposse/fluro
flutter flutter-routing parameters router routing
Last synced: 4 months ago
JSON representation
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.
- Host: GitHub
- URL: https://github.com/goposse/fluro
- Owner: lukepighetti
- License: mit
- Created: 2017-04-25T07:23:44.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2023-03-22T17:54:12.000Z (over 2 years ago)
- Last Synced: 2025-07-03T09:10:04.280Z (5 months ago)
- Topics: flutter, flutter-routing, parameters, router, routing
- Language: Dart
- Homepage: https://pub.dev/packages/fluro
- Size: 1.08 MB
- Stars: 3,710
- Watchers: 48
- Forks: 414
- Open Issues: 43
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - Fluro - Flutter中最亮、最时尚、最酷的路由器，具有导航、通配符、查询和过渡效果，由 [Posse](http://goposse.com) 制作。 (组件 / 导航)
- awesome-flutter-cn - Fluro - Flutter 中最闪亮、最时尚、最酷的路由组件，具有导航、通配符、查询和转换功能，[Posse](http://goposse.com). (组件 / 导航)
- awesome-flutter - Fluro - The brightest, hippest, coolest router for Flutter with Navigation, wildcard, query, transitions by [Posse](http://goposse.com). (Components / Navigation)
- awesome-flutter - Fluro - Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions. ` 📝 13 days ago ` (Navigation [🔝](#readme))
- fucking-awesome-flutter - Fluro - The brightest, hippest, coolest router for Flutter with Navigation, wildcard, query, transitions by [Posse](http://goposse.com). (Components / Navigation)
- awesome-flutter - Fluro - The brightest, hippest, coolest router for Flutter with Navigation, wildcard, query, transitions by [Posse](http://goposse.com). (Components / Navigation)
README
[English](./README.md) | [Português](./translations/pt/README.md)
The brightest, hippest, coolest router for Flutter.
[](https://pub.dev/packages/fluro)
[](https://github.com/lukepighetti/fluro/actions)
## Features
- Simple route navigation
- Function handlers (map to a function instead of a route)
- Wildcard parameter matching
- Querystring parameter parsing
- Common transitions built-in
- Simple custom transition creation
- Follows `stable` Flutter channel
- Null-safety
## Example Project
There is a pretty sweet example project in the `example` folder. Check it out. Otherwise, keep reading to get up and running.
## Getting started
First, you should define a new `FluroRouter` object by initializing it as such:
```dart
final router = FluroRouter();
```
It may be convenient for you to store the router globally/statically so that
you can access the router in other areas in your application.
After instantiating the router, you will need to define your routes and your route handlers:
```dart
var usersHandler = Handler(handlerFunc: (BuildContext context, Map params) {
return UsersScreen(params["id"][0]);
});
void defineRoutes(FluroRouter router) {
router.define("/users/:id", handler: usersHandler);
// it is also possible to define the route transition to use
// router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}
```
In the above example, the router will intercept a route such as
`/users/1234` and route the application to the `UsersScreen` passing
the value `1234` as a parameter to that screen.
## Navigating
You can use `FluroRouter` with the `MaterialApp.onGenerateRoute` parameter
via `FluroRouter.generator`. To do so, pass the function reference to
the `onGenerate` parameter like: `onGenerateRoute: router.generator`.
You can then use `Navigator.push` and the flutter routing mechanism will match the routes
for you.
You can also manually push to a route yourself. To do so:
```dart
router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
```
## Class arguments
Don't want to use strings for params? No worries.
After pushing a route with a custom `RouteSettings` you can use the `BuildContext.settings` extension to extract the settings. Typically this would be done in `Handler.handlerFunc` so you can pass `RouteSettings.arguments` to your screen widgets.
```dart
/// Push a route with custom RouteSettings if you don't want to use path params
FluroRouter.appRouter.navigateTo(
context,
'home',
routeSettings: RouteSettings(
arguments: MyArgumentsDataClass('foo!'),
),
);
/// Extract the arguments using [BuildContext.settings.arguments] or [BuildContext.arguments] for short
var homeHandler = Handler(
handlerFunc: (context, params) {
final args = context.settings.arguments as MyArgumentsDataClass;
return HomeComponent(args);
},
);
```