BLoC Pattern In Flutter

BLoC Pattern In Flutter :

What is BLOC Pattern?

  • Developed by google.
  • Business Logic Components
  • Managing state and make access to data from a cenralized in your application.
  • BLoC pattern is one of the same android MVVM pattern.
  • BLoC stands as a middleware between a souce of data in your app (API response) and that data display widgets. It receives streams of events/data from the source, handles any required business logic and publishes streams of data changes to widgets that are interested in them.
  • BLoC 2 components: Sinks and Streams, both of which are provided by a StreamController. You add streams of event/data input into a Sink and listen to them as streams of data output through a Stream.
  • StreamController accessed via the ‘dart:async’ library or rxdart (PublishSubject, ReplaySubject or BehaviourSubject)
  • We created a CounterBloc class and in it, a StreamController which we called counterController. We created a getter for our Stream called getCount, an updateCount method that adds data into our Sink when called, and a dispose method to close our StreamController.

Key Terms:

1) Stream: Stream is continuous flow of any data (success or fail).
2) StreamController: Control Stream
3) StreamTransformer: Processes the input data
4) StreamBuilder: It is provide new data every time.
5) Sink: Takes an input
6) Stream: Gives the output of the Stream.
7) dispose: close the opened subject.

BLoc Pattern In Flutter

CounterBloc.dart

import 'package:rxdart/rxdart.dart';

class CounterBloc {

  int initialCount = 0; //if the data is not passed by paramether it initializes with 0
  BehaviorSubject<int> _subjectCounter;

  CounterBloc({this.initialCount}){
    _subjectCounter = new BehaviorSubject<int>.seeded(this.initialCount); //initializes the subject with element already
  }

  Observable<int> get counterObservable => _subjectCounter.stream;

  void increment(){
    initialCount++;
    _subjectCounter.sink.add(initialCount);
  }

  void decrement(){
    initialCount--;
    _subjectCounter.sink.add(initialCount);
  }

  void dispose(){
    _subjectCounter.close();
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:bloc_example/bloc/CounterBloc.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  CounterBloc _counterBloc = new CounterBloc(initialCount: 0);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
        ),
        body: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text('You have pushed the button this many times:'),
              new StreamBuilder(stream: _counterBloc.counterObservable, builder: (context, AsyncSnapshot<int> snapshot){
                return new Text('${snapshot.data}', style: Theme.of(context).textTheme.display1);
              })
            ],
          ),
        ),
        floatingActionButton: new Column(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
          new Padding(padding: EdgeInsets.only(bottom: 10), child:
          new FloatingActionButton(
            onPressed: _counterBloc.increment,
            tooltip: 'Increment',
            child: new Icon(Icons.add),
          )
          ),
          new FloatingActionButton(
            onPressed: _counterBloc.decrement,
            tooltip: 'Decrement',
            child: new Icon(Icons.remove),
          ),
        ])
    );
  }

  @override
  void dispose() {
    _counterBloc.dispose();
    super.dispose();
  }

}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in