Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flutterings/flutter_redux_navigation
Navigation Middleware for Flutter's redux library.
https://github.com/flutterings/flutter_redux_navigation
dart dartlang flutter navigation redux router
Last synced: 3 months ago
JSON representation
Navigation Middleware for Flutter's redux library.
- Host: GitHub
- URL: https://github.com/flutterings/flutter_redux_navigation
- Owner: flutterings
- License: mit
- Created: 2018-12-27T15:24:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-11-24T21:16:54.000Z (about 1 year ago)
- Last Synced: 2024-09-28T16:20:50.440Z (3 months ago)
- Topics: dart, dartlang, flutter, navigation, redux, router
- Language: Dart
- Homepage:
- Size: 104 KB
- Stars: 45
- Watchers: 2
- Forks: 11
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/flutterings/flutter_redux_navigation)
[](https://codecov.io/gh/flutterings/flutter_redux_navigation)
# Flutter Navigation for redux
Navigation Middleware for Flutter's redux library.
Basic classes that enables page navigation through by utilizing [Redux](https://pub.dartlang.org/packages/redux) Store middleware facility.
This package is built to work with [Redux.dart](https://pub.dartlang.org/packages/redux) 4.0.0+.
## Redux Middleware
* `NavigationMiddleware` - The Middleware that reacts to `NavigateToAction`s.
## Examples
Take a look in the [examples](example) directory.
## How to setup navigation
```dart
import 'package:flutter/material.dart';
import 'package:redux/redux.dart';
class AppState {
final String name;
const AppState(this.name);
factory AppState.initial() => AppState(null);
factory AppState.changeName(String name) => AppState(name);
}
class AppNameChangedAction {
final String name;
AppNameChangedAction(this.name);
}
AppState _onAppNameChanged(AppState state, AppNameChangedAction action) =>
state.changeName(action.name);
final appReducer = combineReducers([
TypedReducer(_onAppNameChanged),
]);
final store = new Store(combineReducers([appReducer]),
initialState: AppState.initial(),
middleware: [
NavigationMiddleware(),
]);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StoreProvider(
store: store,
child: MaterialApp(
title: 'My App',
navigatorKey: NavigatorHolder.navigatorKey,
)
);
}
}
void main() => runApp(MyApp());
```
## How to navigate
Let's say you wish to navigate from a `LoginPage` to some dashboard page, you only need to dispatch a `NavigateToAction.replace` action with the appropriate path, which is registered to the dashboard page.
```dart
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
class LoginPage extends StatefulWidget {
@override
State createState() => LoginPageState();
}
class LoginPageState extends State {
@override
Widget build(BuildContext context) {
return StoreConnector(
converter: (store) {
return store;
},
builder: (BuildContext context, Store store) {
return Scaffold(body: Builder(
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
store.dispatch(NavigateToAction.replace('/dashboard'));
},
child: Text('Login'),
)
],
);
},
));
},
);
}
}
```
## How to use pre and post navigation hooks
Let's use the same example as before, but now let's assume that you want to start a loader whilst navigating to the dashboard and stop it once you have navigated.
```dart
import 'package:flutter/material.dart';
import 'package:flutter_redux/flutter_redux.dart';
class LoginPage extends StatefulWidget {
@override
State createState() => LoginPageState();
}
class LoginPageState extends State {
@override
Widget build(BuildContext context) {
return StoreConnector(
converter: (store) {
return store;
},
builder: (BuildContext context, Store store) {
return Scaffold(body: Builder(
builder: (BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
RaisedButton(
onPressed: () {
store.dispatch(
NavigateToAction.replace(
'/dashboard',
preNavigation: () => store.dispatch(StartLoadingAction()),
postNavigation: () => store.dispatch(StopLoadingAction()),
),
);
},
child: Text('Login'),
)
],
);
},
));
},
);
}
}