📢Como Fazer um Crud com Flutter BloC+API Rest🙇
Pensando em fazer em implementar a biblioteca “BloC” para gerenciamento de estados?
Esse artigo é para você.
[🤓ANTES DE COMEÇAR]
📢Admita que você esta usando as seguintes versões, ou maiores que as descritas abaixo:
Flutter ^1.12.13+hotfix.5 channel stable
Tools • Dart 2.7.0[CRIE UM NOVO PROJETO]
flutter create --org com.todo_bloc todo_bloc📢Vamos usar as seguintes bibliotecas, então importe-as no arquivo “pubspec.yaml”
flutter_bloc:
equatable:
http:📢Por conveniência vou utilizar o plugin para construir a base do “bloc” neste projeto, o plugin abaixo irá gerar três arquivos, um “event.dart, bloc.dart e state .dart”.
[BREVE EXPLICAÇÃO DO BLOC]
📢Os “eventos” são ações disparadas pelos “widgets”, eventos que serão tratados posteriormente pelo “BloC”, dentro do “BloC” existe uma classe chamada “mapEventToState”, esta classe, como o próprio nome diz, faz o o meio de campo entre o evento e o estado da aplicação.
📢Enfim, depois que o “BloC” recebe o evento e estiver tudo bem, ele altera o estado da aplicação por meio de estados que foram definidos pelo próprio programador. Ficará mais claro ao longo deste artigo.
[🕺AGORA MÃOS A MASSA!]
[👷DEFININDO O MODEL]
Abaixo vamos definir o nosso objeto, a “factory” “fromJson” será usada para mapearmos as informações da “API” para preencher nosso objeto.
📢 Aqui estamos usando a bilbioteca “equable”, ela substitui ==e hashCodepara você.
[DEFININDO OS A CLASSE REPOSITORY]
A classe “repository” será a responsável por fazer a comunicação entre a nossa “API” e nossa aplicação.
📢 A classe “abstract” é necessária para facilitar o baixo acoplamento e para testarmos a aplicação.
📢Logo abaixo temos a implementação do nosso “repository”.
📢Por conveniência vamos usar a API publica para testes: https://jsonplaceholder.typicode.com
[DEFININDO OS EVENTOS]
📢Abaixo os eventos que podemos acionar para alterar o estado da aplicação.
[DEFININDO OS ESTADOS]
📢Na classe abaixo definimos com quais estados de aplicação o usuário irá se deparar.
[DEFININDO O BLOC]
Perceba abaixo que sempre estamos mapeando o estado que iremos alterar de acordo com o evento acionado.
📢 a palavra-chave yield adiciona um valor ao fluxo de saída da async*função circundante . É como return, mas não encerra a função.
[AGORA VAMOS CONSTRUIR A TELA]
🧐Antes de construirmos a tela vamos injetar o “BloC” na arvore de “widgets”, a partir de um “BlocProvider”
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter BloC',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BlocProvider(
create: (BuildContext context) => AlbumBloc(AlbumRepositoryImpl()),
child: MyHomePage(title: 'Flutter Demo Home Page'),
));
}
}Nossa classe “main.dart” vai ficar da seguinte maneira
[📢EXPLICAÇÃO]
add: o método “add” é usado para chamarmos um evento, exemplo “UpdateAlbumEvent”,
BlocListener: O ouvinte é o local para registrar, mostrar Snackbars, navegar etc. É garantido que ele será executado apenas uma vez por alteração de estado.
BlocBuilder: (constrói a interface do usuário) semelhante ao StreamBuilder, mas a biblioteca flutter_bloc tem uma ferramenta melhor para o trabalho oBlocBuilder.
[🤞ABAIXO O RESULTADO FINAL]
[🛌É ISSO PESSOAL!]
[REFERENCIAS]
