O documento discute diferentes padrões de arquitetura para gerenciamento de estado em aplicativos Flutter, incluindo Provider, BLoC e Repositórios. É apresentado como esses padrões podem ser usados para resolver problemas comuns como comunicação entre widgets, gerenciamento de estado centralizado e injeção de dependências. Dúvidas frequentes sobre esses padrões também são abordadas.

2. Flutter Talks
Provider, BLoC e SM
Entendendo de uma vez por todas

3. André
Baltieri
7x Microsoft MVP
Speaker
Fullstack Developer
CEO do balta.io

4. Siga me nas Redes
Sociais -
@andrebaltieri

5. Cenário 1
Widgets
- Listar as categorias
- Listar os produtos
- Exibir o menu inferior

6. Widgets e comunicação
Widgets
- Ui é Widget
- Stateless
- Statefull
- Inherited
- SetState
- Recebem informações
- Retornam informações
- Comunicam-se entre si

7. Repository Pattern
Repositórios
- Fornecem um ponto único de acesso à dados
- Podem ser chamados nas páginas, BLoCs, etc
- Retornam Future para ser usado nos FutureBuilders*

8. Repository Pattern
class ProductListItemModel {
...
ProductListItemModel.fromJson(Map<String, dynamic> json) {
id = json['id'];
title = json['title'];
brand = json['brand'];
tag = json['tag'];
price = json['price'];
image = json['image'];
}
...
}

9. Repository Pattern
class ProductRepository {
Future<List<ProductListItemModel>> getAll() async {
var url = "${Settings.apiUrl}v1/products";
Response response = await Dio().get(url);
return (response.data as List)
.map((course) => ProductListItemModel.fromJson(course))
.toList();
}
...

10. Repository Pattern
class ProductPage extends StatelessWidget {
...
final _repository = new ProductRepository();
@override
Widget build(BuildContext context) {
return FutureBuilder<ProductDetailsModel>(
future: _repository.get(tag),
builder: (context, snapshot) {
ProductDetailsModel product = snapshot.data;
...

11. Cenário 2
Comunicação
- Adicionar produto ao carrinho
- Notificar botão “Adicionar ao carrinho”
- Notificar menu inferior

12. Widgets e comunicação
Qual problema?
- Comunicação com vários Widgets
- Comunicação com Widgets “longes”

13. State Management
Gerenciamento de Estado
- Prover um estado centralizado
- Comunicação unilateral
- Atualização de múltiplos Widgets

14. State Management
Estado Centralizado
- Todos Widgets ouvem da mesma
fonte
- Publish/Subscribe
- Atualização de múltiplos Widdgets

15. Cenário 3
Múltiplas interfaces
- Uma UI para Android
- Uma UI para iOS
- Compartilhar o mesmo código

16. BLoC
Centralização da Regra de
Negócio
- Múltiplas interfaces
- Mesmo código

17. BLoC
class CartBloc extends ChangeNotifier {
var cart = new List<CartItemModel>();
double total = 0;
get() {
return cart;
}
add(CartItemModel item) {
cart.add(item);
calculateTotal();
}
...

18. BLoC
remove(CartItemModel item) {
cart.removeWhere((x) => x.id == item.id);
calculateTotal();
}
itemInCart(CartItemModel item) {
var result = false;
cart.forEach((x) {
if (item.id == x.id) result = true;
});
return result;
}

19. BLoC
increase(CartItemModel item) {
if (item.quantity < 10) {
item.quantity++;
calculateTotal();
}
}
decrease(CartItemModel item) {
if (item.quantity > 1) {
item.quantity--;
calculateTotal();
}
}

20. BLoC
calculateTotal() {
total = 0;
cart.forEach((x) {
total += (x.price * x.quantity);
});
notifyListeners();
}

21. Cenário 4
Singleton e DI
- O mesmo BLoC para todo o App

22. Provider
Gerenciamento de Dependências
- Obter sempre o mesmo objeto
- Poder criar e resolver dependências em Widgets

23. Provider
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider<CartBloc>.value(
value: CartBloc(),
),
...

24. Provider
class CartPage extends StatelessWidget {
var bloc;
final price = new NumberFormat("#,##0.00", "pt_BR");
var items = new List<CartItemModel>();
@override
Widget build(BuildContext context) {
bloc = Provider.of<CartBloc>(context);
items = bloc.cart;
return Scaffold(
body: Container(
...

25. Cenário 4
Notificações
- Publish/Subscribe
- Notificar vários Widgets

26. Notificação
Notificando os Widgets
- notifyListners()
- Streams

27. Notificações
class CartBloc extends ChangeNotifier {
var cart = new List<CartItemModel>();
double total = 0;
...
calculateTotal() {
total = 0;
cart.forEach((x) {
total += (x.price * x.quantity);
});
notifyListeners();
}
...

28. Dúvidas Frequentes
Dúvidas
- Posso utilizar BLoC com Provider?
- BLoC não pode referenciar Material/Cupertino
- Preciso de um BLoC para cada página?
- Preciso trabalhar com Streams?
- Preciso de repositórios?

29. SORTEIO
5 FORMAÇÕES COMPLETAS
FLUTTER
https://go.balta.io/fluttertalks

30. Dúvidas?
hello@balta.io

31. hello@balta.io
https://balta.io/