BLoC - Business Logic Component


Padrão criado basicamente por Pablo Soares, engenheiro do Google.

.

INTRODUÇÃO

Consiste em separar as responsabilidades das classes, onde o BLoC terá a classe de negócios, enquanto os seus UIs ficarão sem lógica alguma. Com a programação reativa realizamos a comunicação da UI com a regra de negócios.

O padrão BLoC foi criado basicamente por Pablo Soares, engenheiro do Google.

 

CODANDO

Vamos pegar o exemplo dado pelo próprio flutter e agora criar uma classe que contenha as regras de negócio chamada de classe ContadorBloc, em um arquivo contador_bloc.dart:

class ContadorBloc {

}

Recorte e cole a lógica de negócios _incrementCounter() na nova classe criada:

class ContadorBloc {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}
}

 

Como dito na introdução, utilizmos a programação reativa, por meio de streams, para se comunicar com a lógica de negócio, então vamos modificar esse código:

import 'dart:async';
// importe o dart:async para podermos usar o streamcontroller

class ContadorBloc {
int _counter = 0;

final counter = StreamController‹int›();
// criamos o counter que será um streamcontroller para podermos ouvi-lo na nossa UI

void incrementCounter() {
_counter = _counter + 1;
// aqui realizamos uma simples mudança para que vá acrescentando o 1 a cada clique

counter.add(_counter);
// vamos adicionar ao nosso stream o valor de _counter
}

// nunca esqueça de dar o dispose, para que sua aplicação não utilize recursos desnecessariamente
void dispose(){
counter.close();
}
}

Nossa nova lógica de negócios está pronta, vamos a nossa UI e implementar o BLoC, main.dart:

import 'package:flutter/material.dart';
import 'contador_bloc.dart';
// importe o nosso bloc

void main() = runApp(MyApp());

class MyApp ...

class MyHomePage ...

class _MyHomePageState extends StateMyHomePage {

final bloc = ContadorBloc();
// aqui declaramos uma variável que instanciará o nosso objeto ContadorBloc para que possamos ter acesso a nossa regra de negócios

@override
Widgetbuild(BuildContext context) {
returnScaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: Widget[
Text(
'You have pushed the button this many times:',
),

// Aqui iremos colocar um streambuilder para que fique escutando a nossa variável counter
StreamBuilder‹Object›(
stream: bloc.counter.stream,
initialData: 0,
builder: (context, snapshot) {
return Text(
'${snapshot.data}',
style: Theme.of(context).textTheme.display1,
);
}
),
],
),
),
floatingActionButton: FloatingActionButton(

// chamando nossa função de incrementar
onPressed: bloc.incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

Pronto, executem o seu código e vejam como é fácil você utilizar BLoC.

Até a próxima, espero que tenhm gostado.

171 Visualizações