The document discusses using Voyager, a Flutter library, to implement requirements as code and dependency injection in navigation. It describes using a YAML configuration file to define routes and plugins to provide configuration values like widgets and icons. Widgets can access configuration through a Voyager provider. Code generation is used to generate Dart code from the YAML for strong typed routes and testing scenarios.

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

2. _SAMPLE_APP

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

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

5. 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

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

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

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

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

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

11. REQUIREMENTS
CONFIGURATION NAVIGATION

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

13. PLUGIN

14. class IconPlugin extends RouterObjectPlugin
PLUGIN

15. class IconPlugin extends RouterObjectPlugin<Icon> {
}
PLUGIN

16. class IconPlugin extends RouterObjectPlugin<Icon> {
IconPlugin() : super("icon");
}
PLUGIN

17. class IconPlugin extends RouterObjectPlugin<Icon> {
IconPlugin() : super("icon");
@override
Icon buildObject(
RouterContext context,
dynamic config)
}
PLUGIN

18. class IconPlugin extends RouterObjectPlugin<Icon> {
IconPlugin() : super("icon");
@override
Icon buildObject(
RouterContext context,
dynamic config) =>
IconHelper.fromName(config.toString());
}
PLUGIN

19. BOILERPLATE

20. 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);

21. 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);

22. 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);

23. 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);

24. 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);

25. 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);

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

27. VoyagerWidget(path: "/home");
WIDGETS

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

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

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

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

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

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

34. INJECT
VoyagerWidget
HomeWidget
PATH CONFIGVoyager

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

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

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

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

39. body: Text(voyager["body"]),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator
.of(context)
.pushNamed(voyager["target"]);
},
child: voyager["icon"],
)
)
}
}
INJECT

40. _CODE_GENERATION

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

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

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

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

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

46. >_ flutter packages pub run voyager:codegen --run-once
_CODE_GENERATION
🚨 voyager-codegen.yaml not found, creating one for you...
💾 voyager-codegen.yaml created, please edit it
⚙ voyager-codegen.yaml loaded

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

48. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
VOYAGER-CODEGEN.YAML

49. - name: Voyager
source: lib/navigation.dart
target: lib/gen/voyager_gen.dart
VOYAGER-CODEGEN.YAML

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

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

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

53. TESTS
WIDGET
UNIT
E2E

54. TESTS
WIDGET
UNIT
E2E

55. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
WIDGET TESTS

56. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/test_scenarios.dart
WIDGET TESTS

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

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

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

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

61. CODE COVERAGE
0%

62. CODE COVERAGE
70%

63. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
SCHEMA VALIDATION

64. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
SCHEMA VALIDATION

65. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION

66. source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
input:
type: string
SCHEMA VALIDATION

67. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION

68. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION

69. type: string
enum: [plus, heart, minus]
widget:
input:
type: string
title:
output: String
input:
type: string
body:
output: String
input:
type: string
target:
SCHEMA VALIDATION

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

71. >_ flutter packages pub run voyager:codegen --run-once
_CODE_GENERATION
✅ Schema validated properly

72. >_ flutter packages pub run voyager:codegen --run-once
_CODE_GENERATION
🚨 /home@icon: #/icon: star is not a valid enum value

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

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

75. @override
Widget build(BuildContext context) {
final voyager = VoyagerProvider.of(context);
return Scaffold(
appBar: AppBar(
title: Text(voyager["title"]),
),
body: Text(voyager["body"]),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator
.of(context)
INJECT

76. @override
Widget build(BuildContext context) {
final voyager = VoyagerProvider.of(context);
return Scaffold(
appBar: AppBar(
title: Text(voyager.title),
),
body: Text(voyager.body),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator
.of(context)
INJECT

77. ),
body: Text(voyager.body),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator
.of(context)
.pushNamed(voyager["target"]);
},
child: voyager["icon"],
)
)
}
}
INJECT

78. ),
body: Text(voyager.body),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator
.of(context)
.pushNamed(voyager.target);
},
child: voyager.icon,
)
)
}
}
INJECT

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

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

81. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION
PLUGIN STUB

82. - name: Voyager
source: assets/navigation.yaml
target: lib/gen/voyager_gen.dart
testTarget: test/gen/voyager_test_scenarios.dart
schema:
icon:
pluginStub: true
output: Icon
import: "package:flutter/widgets.dart"
input:
type: string
enum: [plus, heart, minus]
widget:
SCHEMA VALIDATION
PLUGIN STUB

83. class IconPlugin extends RouterObjectPlugin<Icon> {
IconPlugin() : super("icon");
@override
Icon buildObject(
RouterContext context,
dynamic config) =>
IconHelper.fromName(config.toString());
}
PLUGIN STUB

84. class IconPlugin extends IconPluginStub {
IconPlugin() : super("icon");
@override
Icon buildObject(
RouterContext context,
dynamic config) =>
IconHelper.fromName(config.toString());
}
PLUGIN STUB

85. class IconPlugin extends IconPluginStub {
@override
Icon buildObject(
RouterContext context,
dynamic config) =>
IconHelper.fromName(config.toString());
}
PLUGIN STUB

86. voyager: ^1.1.3

87. IT’S ALL WIDGETS

88. IT’S ALL PATHS

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

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

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

92. voyager.codemagic.io/#/fab

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

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

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

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

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

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

100. VoyagerWidget(path: pathDetail);
OBJECT ARGUMENTS

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

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

103. OBJECT MAPPING
class Shoe /object/Shoe

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

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

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

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

108. LIST MAPPING
List<dynamic> ListView
ShoeWidget
BulbWidget
DuckWidget

109. LIST MAPPING
ListView.builder(
)

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

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

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

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

114. voyager_list: ^0.0.2

115. BLoC PLUGIN

116. Counter
Counter: 0 CounterBloc
increment
int
ThemeBloc

117. Counter
Counter: 1 CounterBloc
decrement
int
ThemeBloc

118. Counter
Counter: 0 CounterBloc
ThemeBloc
toggle
ThemeData

119. Counter
Counter: 0 CounterBloc
ThemeBloc

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

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

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

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

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

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

126. BLoC
final blocRepository = voyager.bloc;

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

128. BLoC
voyager_bloc: ^0.2.3

129. KEY TAKEAWAYS

130. SINGLE SOURCE OF TRUTH
READABILITY

131. SOURCE CODE
REQUIREMENTS

132. NAVIGATION, DEEP LINKS

133. DYNAMIC: A/B TESTS, REMOTE
CONFIG

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