fluro/README.md

106 lines
3.2 KiB
Markdown
Raw Normal View History

2017-05-14 00:28:28 -04:00
<img src="https://storage.googleapis.com/app-logos/logo_fluro.png" width="220">
<br/><br/>
The brightest, hippest, coolest router for Flutter.
2017-05-04 15:49:13 -04:00
2018-01-18 19:22:46 -05:00
[![Version](https://img.shields.io/badge/version-1.2.2-blue.svg)](https://pub.dartlang.org/packages/fluro)
2017-05-14 00:43:55 -04:00
[![Build Status](https://travis-ci.org/goposse/fluro.svg?branch=master)](https://travis-ci.org/goposse/fluro)
[![Coverage](https://codecov.io/gh/goposse/fluro/branch/master/graph/badge.svg)](https://codecov.io/gh/goposse/fluro)
2017-05-14 00:28:28 -04:00
## Features
- Simple route navigation
- Function handlers (map to a function instead of a route)
2017-05-14 00:28:28 -04:00
- Wildcard parameter matching
- Querystring parameter parsing
- Common transitions built-in
- Simple custom transition creation
2017-05-06 02:22:53 -04:00
## Version compatability
In general we try not to introduce breaking changes but version 1.1 did introduce a
breaking change in order to support function handlers. As such, you will need to
change all of your route handler definitions to use the new `Handler` class. The
`RouteHandler` definition has now been removed.
Swapping out the handlers should be as simple as changing:
```dart
RouteHandler usersHandler = (Map<String, String> params) {}
```
to
```dart
var usersHandler = new Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {});
```
2017-05-04 15:49:13 -04:00
## Getting started
2017-05-14 00:28:28 -04:00
You should ensure that you add the router as a dependency in your flutter project.
2017-05-14 01:11:48 -04:00
```yaml
dependencies:
2018-01-18 19:22:46 -05:00
fluro: "^1.2.2"
2017-05-14 01:11:48 -04:00
```
2017-05-14 00:28:28 -04:00
2017-05-14 01:11:48 -04:00
You can also reference the git repo directly if you want:
```yaml
2017-05-04 15:49:13 -04:00
dependencies:
2017-05-14 01:11:48 -04:00
fluro:
git: git://github.com/goposse/fluro.git
2017-05-04 15:49:13 -04:00
```
2017-05-14 01:11:48 -04:00
2017-05-14 00:28:28 -04:00
You should then run `flutter packages upgrade` or update your packages in IntelliJ.
## Example Project
There is a pretty sweet example project in the `example` folder. Check it out. Otherwise, keep reading to get up and running.
2017-05-04 15:49:13 -04:00
## Setting up
2017-05-14 00:28:28 -04:00
First, you should define a new `Router` object by initializing it as such:
2017-05-04 15:49:13 -04:00
```dart
2017-05-15 11:51:29 -04:00
final router = new Router();
2017-05-04 15:49:13 -04:00
```
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 = new Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
2017-05-04 15:49:13 -04:00
return new UsersScreen(params["id"]);
});
2017-05-04 15:49:13 -04:00
void defineRoutes(Router router) {
router.define("/users/:id", handler: usersHandler);
}
```
2017-05-14 00:28:28 -04:00
In the above example, the router will intercept a route such as
2017-05-04 15:49:13 -04:00
`/users/1234` and route the application to the `UsersScreen` passing
the value `1234` as a parameter to that screen.
## Navigating
You can use the `Router` with the `MaterialApp.onGenerateRoute` parameter
2017-05-14 00:28:28 -04:00
via the `Router.generator` function. To do so, pass the function reference to
the `onGenerate` parameter like: `onGenerateRoute: router.generator`.
2017-05-04 15:49:13 -04:00
You can then use `Navigator.push` and the flutter routing mechanism will match the routes
2017-05-14 00:28:28 -04:00
for you.
2017-05-04 15:50:29 -04:00
You can also manually push to a route yourself. To do so:
2017-05-04 15:49:13 -04:00
```dart
2017-05-14 00:28:28 -04:00
router.navigateTo(context, "/users/1234",
transition: TransitionType.fadeIn);
```
2017-05-14 01:28:34 -04:00
<br/>
<hr/>
Fluro is a Posse Production.
<br/>
<a href="http://goposse.com" target="_posse">
<img src="https://storage.googleapis.com/posse-logos/logo-posse.png"
width="60"></a>