Voyager: The Widget Router

VOYAGER FOR FLUTTER
REQUIREMENTS AS CODE
DEPENDENCY INJECTION
THE WIDGET ROUTER
ŁUKASZ WIŚNIEWSKI
@VISHNA

#ISSUE 1Home
Hello World!
Home Screen:
•Use HomeWidget
•Title “Home”
•Body “Hello World”
•FAB with “plus” icon
•FAB goes to the detail screen

#ISSUE 2Icon: plus
Detail Screen:
•Use Detail Widget
•Title “Icon {name}”
•Body is a large Icon

REQUIREMENTSHome Screen:
•Use HomeWidget
•Title “Home”
•Body “Hello World”
•FAB with “plus” icon
•FAB target is detail screen
Details Screen:
•Use DetailWidget
•Title “Icon {name}”
•Body is a large icon

REQUIREMENTS.YAML'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
target: "/details/plus"
'/details/:name'
widget: DetailWidget
title: "Icon %{name}"
icon: "%{name}"

'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
'/details/:name'
icon: "%{name}"
PATH

'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
'/details/:name'
icon: "%{name}"
PATH
PLUGIN NODE

'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
'/details/:name'
icon: "%{name}"
PATH
PLUGIN NODE
PLUGIN CONFIG

'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
'/details/:name'
icon: "%{name}"
PATH
PLUGIN NODE
PLUGIN CONFIG
PARAMETER INTERPOLATION

REQUIREMENTS
CONFIGURATION NAVIGATION

ROUTER
MAP
(YAML)
PATH
PLUGIN icon
VOYAGER
icon
Config
(“plus”)
title
RouterContext
icon
title
Icon
(+)
Config
(“Home”)
ARCHITECTURE
CONFIG
body
widget
target

class IconPlugin extends RouterObjectPlugin
PLUGIN

class IconPlugin extends RouterObjectPlugin<Icon> {
}
PLUGIN

IconPlugin() : super("icon");
}
PLUGIN

@override
Icon buildObject(
RouterContext context,
dynamic config)
}
PLUGIN

@override
Icon buildObject(
dynamic config) =>
IconHelper.fromName(config.toString());
}
PLUGIN

final paths =
loadPathsFromAssets("assets/navigation.yml");
final plugins = <RouterPlugin>[
WidgetPluginBuilder()
.add<HomeWidget>((context) => HomeWidget())
.add<DetailWidget>((context) => DetailWidget())
.build(),
IconPlugin()
];
Future<Router> router = loadRouter(paths, plugins);

VoyagerWidget(path: "/home", router: router);
WIDGETS

VoyagerWidget(path: "/home");
WIDGETS

APP
Provider<Router>.value(
value: router,
child: MaterialApp(
home: VoyagerWidget(path: "/home"),
onGenerateRoute: router.generator()
)
);
VoyagerWidget(path: "/home");

APP
Provider<Router>.value(
value: router,
child: MaterialApp(
home: VoyagerWidget(path: "/home"),
onGenerateRoute: router.generator()
)
);

NAVIGATION
Navigator
.of(context)
.pushNamed(“/details/plus");

INJECT
VoyagerWidget
HomeWidget
PATH CONFIGVoyager

class HomeWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final voyager = Provider.of<Voyager>(context);
return Scaffold(
appBar: AppBar(
title: Text(voyager["title"]),
INJECT

@override
final voyager = Provider.of<Voyager>(context);
return Scaffold(
appBar: AppBar(
),
body: Text(voyager["body"]),
floatingActionButton: FloatingActionButton(
onPressed: () {
INJECT

return Scaffold(
appBar: AppBar(
),
onPressed: () {
Navigator
.of(context)
.pushNamed(voyager["target"]);
},
child: voyager["icon"],
)
)
INJECT

onPressed: () {
Navigator
.of(context)
},
)
)
}
}
INJECT

REQUIREMENTS.YAML
'/home':
type: home
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus
'/details/:name'
type: details
icon: "%{name}"

>_ flutter packages pub run voyager:codegen
_CODE_GENERATION
>_

>_ flutter packages pub run voyager:codegen
_CODE_GENERATION

>_ flutter packages pub run voyager:codegen --run-once
_CODE_GENERATION

_CODE_GENERATION
🚨 voyager-codegen.yaml not found, creating one for you...
💾 voyager-codegen.yaml created, please edit it
⚙ voyager-codegen.yaml loaded

VOYAGER-CODEGEN.YAML
- name: Voyager
source: assets/navigation.yaml
target: # TODO

- name: Voyager
target: lib/gen/voyager_gen.dart

- name: Voyager
source: lib/navigation.dart

const String pathHome = "/home";
const String typeHome = "home";
String pathDetail(String name) {
return "/other/$name";
}
const String typeDetail = “detail";
VOYAGER_GEN.DART

VoyagerWidget(path: "/detail/plus");
STRONG TYPED PATHS

VoyagerWidget(path: pathDetail("plus"));
STRONG TYPED PATHS

- name: Voyager
WIDGET TESTS

- name: Voyager
testTarget: test/gen/test_scenarios.dart
WIDGET TESTS

abstract class VoyagerTestScenarios {
const VoyagerTestScenarios(this.defaultWrapper);
final WidgetWrapper defaultWrapper;
List<VoyagerTestHomeScenario> homeScenarios();
List<VoyagerTestDetailScenario> detailScenarios();
}
TEST SCENARIOS

abstract class VoyagerTestScenarios {
const VoyagerTestScenarios(this.defaultWrapper);
final WidgetWrapper defaultWrapper;
List<VoyagerTestHomeScenario> homeScenarios();
List<VoyagerTestDetailScenario> detailScenarios();
}
TEST SCENARIOS
abstract class

VoyagerTestDetailScenario.write(“plus”,
(WidgetTester tester) async {
expect(find.byType(Icon), findsOneWidget);
});
WRITE SCENARIO

void main() {
final router = loadRouter(paths(), plugins());
voyagerAutomatedTests("voyager auto tests”,
router, MyScenarios());
}
EXECUTE SCENARIO

- name: Voyager
testTarget: test/gen/voyager_test_scenarios.dart
SCHEMA VALIDATION

- name: Voyager
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
SCHEMA VALIDATION

- name: Voyager
schema:
icon:
output: Icon
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION

schema:
icon:
output: Icon
input:
type: string
widget:
input:
type: string
SCHEMA VALIDATION

type: string
widget:
input:
type: string
title:
output: String
input:
type: string
body:
output: String
input:
type: string
target:
SCHEMA VALIDATION

type: string
title:
output: String
input:
type: string
body:
output: String
input:
type: string
target:
output: String
input:
type: string
SCHEMA VALIDATION

_CODE_GENERATION
✅ Schema validated properly

_CODE_GENERATION
🚨 /home@icon: #/icon: star is not a valid enum value

@override
final voyager = VoyagerProvider.of(context);
return Scaffold(
appBar: AppBar(
INJECT

@override
return Scaffold(
appBar: AppBar(
),
onPressed: () {
Navigator
.of(context)
INJECT

@override
return Scaffold(
appBar: AppBar(
title: Text(voyager.title),
),
body: Text(voyager.body),
onPressed: () {
Navigator
.of(context)
INJECT

),
onPressed: () {
Navigator
.of(context)
},
)
)
}
}
INJECT

),
onPressed: () {
Navigator
.of(context)
.pushNamed(voyager.target);
},
child: voyager.icon,
)
)
}
}
INJECT

Future<Router> router = loadRouter(paths, plugins);
VOYAGER FACTORY

loadRouter(paths, plugins, voyagerFactory:
voyagerDataFactory);
VOYAGER FACTORY

- name: Voyager
schema:
icon:
output: Icon
input:
type: string
widget:
SCHEMA VALIDATION
PLUGIN STUB

- name: Voyager
schema:
icon:
pluginStub: true
output: Icon
input:
type: string
widget:
SCHEMA VALIDATION
PLUGIN STUB

@override
Icon buildObject(
dynamic config) =>
}
PLUGIN STUB

class IconPlugin extends IconPluginStub {
@override
Icon buildObject(
dynamic config) =>
}
PLUGIN STUB

DECOMPOSE WIDGETSHome
Hello World!
'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus

DECOMPOSE
Home
Hello World!
'/home':
widget: HomeWidget
title: Home
body: "Hello World"
icon: plus

DECOMPOSE
Home
Hello World!
'/home':
widget: HomeWidget
title: Home
body: "Hello World"
fab: “/fab”
'/fab':
widget: FabWidget
icon: "plus"
target: “/details/plus"

'/fab':
widget: FabWidget
icon: "plus"
target: “/details/plus"
REMOTE CONFIG

'/fab':
widget: FabWidget
icon: "heart"
target: “/details/heart”
REMOTE CONFIG

'/fab':
widget: FabWidget
icon: "heart"
target: “/details/heart”
PATH OVERRIDE
router.clearCache();
router.registerPath( );
class RouterPath

NAVIGATE WITH ARGUMENT
Navigator
.of(context)
.pushNamed(pathDetail);

NAVIGATE WITH ARGUMENT
Navigator
.of(context)
.pushNamed(pathDetail,
arguments: icon);

VoyagerWidget(path: pathDetail);
OBJECT ARGUMENTS

VoyagerWidget(path: pathDetail,
argument: VoyagerArgument(icon));
OBJECT ARGUMENTS

EXTRACT ARGUMENT
final argument = Provider
.of<VoyagerArgument>(context);
final Icon icon = argument.value;

OBJECT MAPPING
class Shoe /object/Shoe

OBJECT MAPPING
'/object/Shoe':
type: shoe
widget: ShoeWidget

VoyagerWidget(path: pathShoe,
argument: VoyagerArgument( ));
OBJECT MAPPING

OBJECT MAPPING
‘/object/:class':
type: object
widget: %{class}Widget

LIST MAPPING
List<dynamic> ListView
ShoeWidget
BulbWidget
DuckWidget

LIST MAPPING
ListView.builder(
)

LIST MAPPING
ListView.builder(
itemCount: list.length,
)

LIST MAPPING
ListView.builder(
itemCount: list.length,
itemBuilder: (context, index) {
final item = list[index];
return VoyagerWidget(
path: "/object/${item.runtimeType}",
argument: VoyagerArgument(item));
}
)

Counter
Counter: 0 CounterBloc
increment
int
ThemeBloc

Counter
decrement
int
ThemeBloc

Counter
ThemeBloc
toggle
ThemeData

Counter
ThemeBloc

BLoC
'/counter':
widget: CounterPage
title: Counter
bloc:
- CounterBloc: 42
- ThemeBloc: dark

BLoC
BlocPluginBuilder()
.addBaseBloc<CounterBloc>((context, config, repo) =>
CounterBloc(config))
.addBaseBloc<ThemeBloc>((context, config, repo) =>
ThemeBloc(config))
.build()

BLoC
class CounterBloc extends Bloc<CounterEvent, int> {
CounterBloc(this._initialState) : super();
final int _initialState;
@override
int get initialState => _initalState;
/* TODO implement */
}

BLoC
final blocRepository = voyager.bloc;

BLoC
final blocRepository = voyager.bloc;
final bloc =
blocRepository.find<CounterBloc>();

SINGLE SOURCE OF TRUTH
READABILITY

DYNAMIC: A/B TESTS, REMOTE
CONFIG

THANK YOU
github.com/vishna/voyager
Łukasz Wiśniewski
@vishna
#voyager

Voyager: The Widget Router

More Related Content

What's hot (15)

Similar to Voyager: The Widget Router (9)

Recently uploaded (20)

Voyager: The Widget Router