On this talk we explore three different ways of getting access to dependencies in Flutter, and their tradeoffs. First, we’ll take a look at global state as an easy way of getting the things we need. Then, we’ll talk about constructor dependency injection, what problems it solves, but also which new ones it introduces. Finally, we will learn how to make use of InheritedWidget and how it can help as you scale up your apps. I’ll show a simple app as a example of how these techniques work in practice.

1. InheritedWidget
is your friend
Andrea Bizzotto
codingwithflutter.com @biz84
GDG London 08-08-2018

2. Get access to stuff
Networking
Authentication
Database
Secure Storage
FileSystem

3. Get access to stuff
🌍 Global Access
🌗 Dependency Injection
🌝 Scoped Access

4. Example

5. Get access to stuff
🌍 Global Access
🌗 Dependency Injection
🌝 Scoped Access

6. import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Global Access

7. import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Global Access

8. import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Global Access

9. import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Global Access

10. import 'package:firebase_auth/firebase_auth.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Global Access

11. Global Access
😀 Very little code
🙁 Tight Coupling
🙁 Hard to test
😱 Singletons everywhere

12. Global Access

13. Global Access

14. Global Access
Ask

15. Access
🌍 Global Access
🌗 Dependency Injection
🌝 Scoped Access

16. Dependency Injection

17. Tell
Dependency Injection

18. import ‘package:login_demo/auth.dart’;
class LoginPage extends StatelessWidget {
LoginPage({this.auth, this.onSignedIn});
final Auth auth;
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await auth.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Dependency Injection

19. import ‘package:login_demo/auth.dart’;
class LoginPage extends StatelessWidget {
LoginPage({this.auth, this.onSignedIn});
final Auth auth;
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
await auth.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
Dependency Injection

20. Tell
Dependency Injection

21. Dependency Injection
🙃 A bit more boilerplate
🙂 Tell, don’t ask
🎉 Easy to test
Photo by Adam Whitlock on Unsplash

22. 🙃 A bit more boilerplate
🙂 Tell, don’t ask
🎉 Easy to test
😒 Plumbing
Dependency Injection

23. A third way?
🌍 Global access
🌗 Dependency injection
🌝 Scoped access

24. InheritedWidget

25. InheritedWidget

26. InheritedWidget
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return SomePage();
},
));
Theme.of(context).primaryColor

27. import 'package:login_demo/auth_provider.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
final auth = AuthProvider.of(context).auth;
await auth.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
InheritedWidget

28. import 'package:login_demo/auth_provider.dart';
class LoginPage extends StatelessWidget {
LoginPage({this.onSignedIn});
final VoidCallback onSignedIn;
void signInUser(String email, String password) async {
try {
final auth = AuthProvider.of(context).auth;
await auth.signInWithEmailAndPassword(
email: email, password: password);
onSignedIn();
} catch (e) {
// Sign in failed: show error to user
}
}
}
InheritedWidget

29. InheritedWidget
making your own

30. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

31. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

32. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

33. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

34. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

35. class AuthProvider extends InheritedWidget {
AuthProvider({Key key, Widget child, this.auth}) :
super(key: key, child: child);
final Auth auth;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static AuthProvider of(BuildContext context) {
return context.inheritFromWidgetOfExactType(AuthProvider);
}
}
InheritedWidget

36. class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return AuthProvider(
auth: Auth(),
child: MaterialApp(
title: 'Flutter login demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: RootPage(),
),
);
}
}
InheritedWidget

37. InheritedWidget
😐 Some boilerplate code
😀 Easy to test
😀 Easy to maintain
🧐 Tradeoffs

38. InheritedWidget
tradeoffs?

39. • Class.of(context) shouldn’t be called from
initState()
• Use didChangeDependencies() instead.
• ⚠ called more than once!
InheritedWidget
tradeoffs?
StatefulWidget

40. abstract class Database {
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
AppDatabase({this.userId});
final String userId;
Future<void> addTweet(Tweet tweet) {
...
}
Stream<List<Tweet>> tweetsStream() {
...
}
}
Twitter Client
users/$userId/tweets

41. abstract class Database {
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
AppDatabase({this.userId});
final String userId;
Future<void> addTweet(Tweet tweet) {
...
}
Stream<List<Tweet>> tweetsStream() {
...
}
}
Twitter Client
users/$userId/tweets

42. abstract class Database {
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
AppDatabase({this.userId});
final String userId;
Future<void> addTweet(Tweet tweet) {
...
}
Stream<List<Tweet>> tweetsStream() {
...
}
}
Twitter Client
users/$userId/tweets

43. abstract class Database {
String userId;
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
Future<void> addTweet(Tweet tweet) {
...
}
Stream<List<Tweet>> tweetsStream() {
...
}
}
class ServiceProvider implements InheritedWidget {
ServiceProvider({Widget child, this.auth, this.database});
final BaseAuth auth;
final Database database;
}
Twitter Client
users/$userId/tweets

44. abstract class Database {
String userId;
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
Future<void> addTweet(Tweet tweet) {
assert(userId != null);
}
Stream<List<Tweet>> tweetsStream() {
assert(userId != null);
}
}
class ServiceProvider implements InheritedWidget {
ServiceProvider({Widget child, this.auth, this.database});
final BaseAuth auth;
final Database database;
}
Twitter Client
users/$userId/tweets

45. abstract class Database {
Future<void> addTweet(Tweet tweet);
Stream<List<Tweet>> tweetsStream();
}
class AppDatabase implements Database {
AppDatabase({this.userId});
final String userId;
Future<void> addTweet(Tweet tweet) {
...
}
Stream<List<Tweet>> tweetsStream() {
...
}
}
class DatabaseProvider implements InheritedWidget {
DatabaseProvider({Widget child, this.database});
final Database database;
}
Twitter Client
users/$userId/tweets

46. class Provider<T> extends InheritedWidget
InheritedWidget
multiple providers?
💡
• AuthProvider
• DatabaseProvider
• …

47. class Provider<T> extends InheritedWidget {
Provider({Key key, Widget child, this.object})
: super(key: key, child: child);
final T object;
@override
bool updateShouldNotify(InheritedWidget oldWidget) => true;
static T of<T>(BuildContext context) {
final type = _typeOf<Provider<T>>();
Provider<T> provider = context
.inheritFromWidgetOfExactType(type);
return provider.object;
}
static Type _typeOf<T>() => T;
}
InheritedWidget

48. InheritedWidget all the things!

49. Get access to stuff
🌍 Global Access
🌗 Dependency Injection
🌝 Scoped Access

50. Get access to stuff
Code required Testing Maintainability
Global
Access 😀 😭 😭
Dependency
Injection 🙂 😀 🙁
Scoped
Access 😐 😀 😀
*Your mileage may vary

51. Get access to stuff
🌍 Global Access
🌗 Dependency Injection
🌝 Scoped Access
🤓 Service Locator

52. Service Locator
https://pub.dartlang.org/packages/get_it

53. THANK YOU
codingwithflutter.com @biz84
Login Demo [GitHub]
Widget — State — BuildContext — InheritedWidget