As presented at droidcon Tel Aviv 2019 http://il.droidcon.com

1. BUILDING APPS WITH
FLUTTER
HILLEL COREN

2. A BIT ABOUT ME…
2

3. APP STORE RATING
3

4. “FLUTTER IS
AWESOME!”
–Most developers who have tried it
4

5. 5

6. 6

7. 7
Source: https://www.dizzain.com/blog/insights/flutter/

8. DECLARATIVE UI
8

9. STATE MANAGEMENT
▸ setState
▸ Provider
▸ BLoC
▸ MobX
▸ Redux
9

10. *https://blog.novoda.com/introduction-to-redux-in-flutter/
10

11. REDUX PERFORMANCE
▸ Rebuilding BLoC vs Redux
▸ Importance of memoization
▸ Set distinct on the view model
▸ Keep number of layers to a minimum
11

12. REDUX SAMPLE
▸ Always use Built Value
▸ Avoid using a StoreBuilder in main.dart
▸ Pass view model to the view/avoid mapping
▸ Restructure to group by feature
▸ Only need flutter_redux and redux_logging
12

13. 13

14. 14

15. PERSISTENCE
▸ Separate AppState in to data, ui and auth
▸ Persist each section separately
▸ Use PersistUI and PersistData interfaces
▸ Use similar approach to track loading
▸ Clear state if app version is different
15

16. abstract class AppState
implements Built<AppState, AppStateBuilder> {
bool get isLoading;
bool get isSaving;
AuthState get authState;
DataState get dataState;
UIState get uiState;
}
16

17. class StopLoading {}
class PersistUI {}
class PersistData {}
// Client actions
class LoadClientRequest implements StartLoading {}
class LoadClientSuccess implements StopLoading,
PersistData {
17

18. class StopLoading {}
class PersistUI {}
class PersistData {}
// Client actions
class LoadClientRequest implements StartLoading {}
class LoadClientSuccess implements StopLoading,
PersistData {
18

19. class StopLoading {}
class PersistUI {}
class PersistData {}
// Client actions
class LoadClientRequest implements StartLoading {}
class LoadClientSuccess implements StopLoading,
PersistData {
19

20. EntityUIState productReducer(ProductState state, dynamic action) {
return state.rebuild((b) => b
..editing = editingReducer(state.editing, action).toBuilder());
}
EntityUIState productReducer(ProductState state, dynamic action) {
return state.rebuild((b) => b
..editing.replace(editingReducer(state.editing, action)));
} Error: A value of type ‘…’ can't be assigned
to a variable of type ‘…Builder’.

21. EntityUIState productReducer(ProductState state, dynamic action) {
return state.rebuild((b) => b
..editing = editingReducer(state.editing, action).toBuilder());
}
EntityUIState productReducer(ProductState state, dynamic action) {
return state.rebuild((b) => b
..editing.replace(editingReducer(state.editing, action)));
} Error: A value of type ‘…’ can't be assigned
to a variable of type ‘…Builder’.

22. DATA CACHING
▸ All data is cached to the device
▸ Last updated timestamp is stored in the state
▸ Pass the timestamp when requesting new data
▸ Pull to refresh or auto-refresh after 15 minutes
▸ Autoload after certain events. ie, saving an invoice
22

23. int get lastUpdated;
BuiltMap<int, ProductEntity> get map;
bool get isLoaded => lastUpdated > 0;
bool get isStale {
if (! isLoaded) {
return true;
}
return DateTime.now().millisecondsSinceEpoch
23

24. int get lastUpdated;
BuiltMap<int, ProductEntity> get map;
bool get isLoaded => lastUpdated > 0;
bool get isStale {
if (! isLoaded) {
return true;
}
return DateTime.now().millisecondsSinceEpoch
24

25. int get lastUpdated;
BuiltMap<int, ProductEntity> get map;
bool get isLoaded => lastUpdated > 0;
bool get isStale {
if (! isLoaded) {
return true;
}
return DateTime.now().millisecondsSinceEpoch
25

26. VIEW MODELS
▸ View code should be UI/layout focused
▸ Nested view models
▸ Options to pass data to views
▸ Pass AppState as property on view model
▸ Pass field as property on view model
▸ Access AppState in view using context
26

27. MEMOIZATION
▸ Keep build method fast
▸ Simple Dart package available: memoize
▸ memoX where X is the number of parameters
27

28. List<int> activeClientsSelector(
BuiltMap<int, ClientEntity> clientMap,
BuiltList<int> clientList) {
return clientList.where((clientId) =>
clientMap[clientId].isActive).toList();
}
final memoizedActiveClients = memo2((
BuiltMap<int, ClientEntity> clientMap,
BuiltList<int> clientList) =>

29. List<int> activeClientsSelector(
BuiltMap<int, ClientEntity> clientMap,
BuiltList<int> clientList) {
return clientList.where((clientId) =>
clientMap[clientId].isActive).toList();
}
final memoizedActiveClients = memo2((
BuiltMap<int, ClientEntity> clientMap,
BuiltList<int> clientList) =>

30. FORMS
▸ Built Value enables change tracking
▸ Prefer didChangeDependencies() over
iniState()
▸ Avoid @nullable, set default value in
constructor
▸ Static negative counter for new ids
▸ Use completers in view models
30

31. NAVIGATION
▸ Handle navigation in middleware
▸ Pass context in actions
▸ Use completers for wrap up code
▸ Use pop() to pass back value
▸ snackbarCompleter and popCompleter
31

32. final Completer<Null> completer = Completer<Null>();
completer.future.then((_) {
Scaffold.of(context)
.showSnackBar(SnackBar(content: SnackBarRow(message: message)));
}).catchError((Object error) {
showDialog<ErrorDialog>(
context: context,
builder: (BuildContext context) => ErrorDialog(error));
});
return completer;

33. final Completer<Null> completer = Completer<Null>();
completer.future.then((_) {
Scaffold.of(context)
.showSnackBar(SnackBar(content: SnackBarRow(message: message)));
}).catchError((Object error) {
showDialog<ErrorDialog>(
context: context,
builder: (BuildContext context) => ErrorDialog(error));
});
return completer;

34. final Completer<Null> completer = Completer<Null>();
completer.future.then((_) {
Scaffold.of(context)
.showSnackBar(SnackBar(content: SnackBarRow(message: message)));
}).catchError((Object error) {
showDialog<ErrorDialog>(
context: context,
builder: (BuildContext context) => ErrorDialog(error));
});
return completer;

35. switch (action) {
case EntityAction.archive:
store.dispatch(ArchiveInvoiceRequest(
snackBarCompleter(context, localization.archivedInvoice),
invoice.id));
break;
...
}

36. CODE GENERATOR
▸ Reduces need for a lot of copy/replace
▸ Two main commands:
▸ Init: Update code with your app info
▸ Make: Generate individual module
▸ Creates a large amount of code
▸ Important to get it right at the beginning
36

37. BEST PRACTICES
▸ analysis_options.yaml
▸ sentry.io or Crashlytics
▸ Built Value
▸ Create lots of widgets, ie. IconText
▸ Read the flutter_redux code
37

38. APP STORE RATING
38

39. APP STORE RATING
39

40. PLATFORMS: CURRENT
40
Mobile

41. PLATFORMS: NEXT
41
Mobile
Desktop

42. PLATFORMS: FUTURE
42
Mobile
Desktop
Web

43. FLUTTER WEB DEMO [BETA]
https://demo.invoicing.co
43

44. WHO TO FOLLOW
▸ Tim Sneath - @timsneath
▸ Eric Seidel - @_eseidel
▸ Martin Aguinis - @MartinAguinis
▸ Nilay Yener - @nlycskn
▸ Andrew Brogdon - @RedBrogdon
▸ Emily Fortuna - @bouncingsheep
▸ Filip Hráček - @filiphracek
44

45. IT’S ALL WIDGETS!
45

46. HILLEL.DEV
@HILLELCOREN