Flutter at scale: 2020 Edition

class CounterBloc extends Bloc {
@override
int get initialState => 0;
@override
Stream mapEventToState(CounterEvent event) async* {
switch (event) {
case CounterEvent.decrement:
yield state - 1;
break;
case CounterEvent.increment:
yield state + 1;
break;
}
}
}

View Slide

@override
@override
switch (event) {
yield state - 1;
break;
yield state + 1;
break;
}
}
}

View Slide

@override
@override
switch (event) {
yield state - 1;
break;
yield state + 1;
break;
}
}
}

View Slide

@override
@override
switch (event) {
yield state - 1;
break;
yield state + 1;
break;
}
}
}

View Slide

@override
@override
switch (event) {
yield state - 1;
break;
yield state + 1;
break;
}
}
}

View Slide

class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = BlocProvider.of(context);
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: BlocBuilder(
builder: (context, count) {
return Text('$count');
},
),
floatingActionButton: Column(
children: [
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () { counterBloc.add(CounterEvent.increment); },
),
child: Icon(Icons.remove),
onPressed: () { counterBloc.add(CounterEvent.decrement); },
),
],
),
);
}
}

View Slide

@override
return Scaffold(
body: BlocBuilder(
},
),
children: [
),
),
],
),
);
}
}

View Slide

@override
return Scaffold(
body: BlocBuilder(
},
),
children: [
),
),
],
),
);
}
}

View Slide

@override
return Scaffold(
body: BlocBuilder(
},
),
children: [
),
),
],
),
);
}
}

View Slide

@override
return Scaffold(
body: BlocBuilder(
},
),
children: [
),
),
],
),
);
}
}

View Slide

class WeatherBloc extends Bloc {
final WeatherRepository weatherRepository;
WeatherBloc({@required this.weatherRepository});
@override
WeatherState get initialState => WeatherEmpty();
@override
Stream mapEventToState(WeatherEvent event) async* {
if (event is FetchWeather) {
yield WeatherLoading();
try {
final Weather weather = await weatherRepository.getWeather(event.city);
yield WeatherLoaded(weather: weather);
} catch (_) {
yield WeatherError();
}
}
}
}

View Slide

@override
@override
try {
} catch (_) {
}
}
}
}

View Slide

@override
@override
try {
} catch (_) {
}
}
}
}

View Slide

@override
@override
try {
} catch (_) {
}
}
}
}

View Slide

Productive: IDE generators

View Slide

... and it is also robust!
blocTest(
'emits [0, 1] when CounterEvent.increment is added',
build: () => counterBloc,
act: (bloc) => bloc.add(CounterEvent.increment),
expect: [0, 1],
);
blocTest(
'emits [0, -1] when CounterEvent.decrement is added',
act: (bloc) => bloc.add(CounterEvent.decrement),
expect: [0, -1],
);

View Slide

blocTest(
expect: [0, 1],
);
blocTest(
expect: [0, -1],
);

View Slide

blocTest(
expect: [0, 1],
);
blocTest(
expect: [0, -1],
);

View Slide

... even with async code!
blocTest(
'emits [empty, loading, error] when fetching weather and network fails',
build: () {
when(weatherRepository.getWeather(any)).thenThrow(Exception('ooops'));
return weatherBloc;
},
act: (bloc) => bloc.add(FetchWeather('Warsaw')),
expect: [WeatherEmpty(), WeatherLoading(), WeatherError()],
);

View Slide

blocTest(
build: () {
return weatherBloc;
},
);

View Slide

blocTest(
build: () {
return weatherBloc;
},
);

View Slide

blocTest(
build: () {
return weatherBloc;
},
);

View Slide

With bloc, so far...

View Slide

→ Simple

View Slide

→ Simple
→ Productive

View Slide

→ Simple
→ Productive
→ Cost efﬁcient

View Slide

→ Simple
→ Productive
→ Cost efﬁcient
→ Robust

View Slide

Wouldn't be awesome to have an system
that is capable of telling us what's going
on at any given point in time?
!"#

View Slide

Bloc as a BlocDelegate!
class SimpleBlocDelegate extends BlocDelegate {
@override
void onEvent(Bloc bloc, Object event) {
super.onEvent(bloc, event);
print(event);
}
@override
void onTransition(Bloc bloc, Transition transition) {
super.onTransition(bloc, transition);
print(transition);
}
@override
void onError(Bloc bloc, Object error, StackTrace stacktrace) {
super.onError(bloc, error, stacktrace);
print('$error, $stacktrace');
}
}

View Slide

@override
print(event);
}
@override
print(transition);
}
@override
}
}

View Slide

@override
print(event);
}
@override
print(transition);
}
@override
}
}

View Slide

@override
print(event);
}
@override
print(transition);
}
@override
}
}

View Slide

All this for free!
LoginBloc: {
currentState: LoginInitial, event: LoginFormChanged, nextState: LoginFormValidationFailure
}
LoginBloc: {
currentState: LoginFormValidationFailure, event: LoginFormChanged, nextState: LoginFormValidationSuccess
}
LoginBloc: {
currentState: LoginFormValidationSuccess, event: LoginSubmitted, nextState: LoginInProgress
}
LoginBloc: {
currentState: LoginInProgress, event: LoginSubmitted, nextState: LoginSuccess
}
AuthenticationBloc: {
currentState: AuthenticationFailure, event: LoggedIn { user: this_is_a_fake_user }, nextState: AuthenticationSuccess
}
HomeBloc: {
currentState: HomeState.storesTab, event: TabSelected { index: 1 }, nextState: HomeState.tasksTab
}
HomeBloc: {
currentState: HomeState.tasksTab, event: TabSelected { index: 2 }, nextState: HomeState.profileTab
}

View Slide