Flutter of BLOC

flutter_bloc bloc is a third-party library that lets you easily integrated bloc mode, the library combines RXDart, first look at the pattern, right bloc

1, widget trigger event event 

2, bloc receives event to event and processing logic

3, the logic processing result and returns it to the 

4, UI display data

In fact, it is a bit like mvvm, Event just starting events, and can not pass value, bloc receives this event, according to the event to find specific ways to deal with logic, after the results are returned, if we do not understand, I give an example, I went to a restaurant for dinner a point to tell the boss Panji (this is the event), according to the boss after boss told to find a specific name of the dish cooks (sink), cooks do Saute Spicy Chicken (this is a logical process) make (state) owner of the dishes served ( UI with data changes)

flutter_bloc provides several api according to these API can quickly build a bloc

   BlocBuilder    

   BlocProvider   

   BlocProviderTree  

   BlocListener  

   BlocListenerTree 

BlocBuilder

There are three properties bloc condition builder

BlocBuilder ( 
Bloc:, add the DART Bloc 
for condition Condition: (previousState, the currentState) { return  to true ;}, // optional default return to true 
Builder: (BuildContext context, State List) State} {return data 
).

BlocProvider

This can manage global variables

    BlocProvider ( 

    bloc :, add this bloc bloc transfer this DART interface using the other word 

    child: LogIn (), subclass 

    )

Get the child widget bloc by BlocProvider.of <LogBloc> (context)

 If it comes to this mode can be passed push

    Navigator.push(context, new MaterialPageRoute(

    builder: (Context)=>BlocProvider(

    bloc:LogBloc(),

    child:HomePage1(),

    )));

BlocProviderTree

You can manage multiple states

Relates to a widget management can use a plurality of state

BlocProviderTree ( 
  blocProviders [ 
    BlocProvider <block> (unit: Lock ()) 
    BlocProvider <BlocB> (unit: BlocB ()) 
    BlocProvider <BlocC> (unit: BlocC ()) 
  ] 
  Child: Child () 
)

demo

import 'package:flutter/material.dart';
import 'package:flutter_app/bloc/counter_bloc_demo.dart';


class BlocDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CounterProvider(
      bloc: CounterBloc(),
      child: Scaffold(
        appBar: AppBar(
          title: Text('BlocDemo'),
          elevation: 0.0,
        ),
        body: CounterHome(),
        floatingActionButton: CounterActionButton(),
      ),
    );
  }
}

import 'dart:async';

import 'package:flutter/material.dart';

class CounterHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CounterBloc _counterBloc = CounterProvider.of(context).bloc;
    
    return Center(
      child: StreamBuilder(
        initialData: 0,
        stream: _counterBloc.count,
        builder: (context, snapshot) {
          return ActionChip(
            label: Text('${snapshot.data}'),
            onPressed: () {
              // _counterBloc.log();
              _counterBloc.counter.add(1);
            },
          );
        },
      ),
    );
  }
}

class CounterActionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    CounterBloc _counterBloc = CounterProvider.of(context).bloc;
    
    return FloatingActionButton(
      child: Icon(Icons.add),
      onPressed: () {
        // _counterBloc.log();
        _counterBloc.counter.add(1);
      },
    );
  }
}

class CounterProvider extends InheritedWidget {
  final Widget child;
  final CounterBloc bloc; 

  CounterProvider({
    this.child,
    this.bloc,
  }) : super(child: child);

  static CounterProvider of(BuildContext context) =>
      context.inheritFromWidgetOfExactType(CounterProvider);

  @override
  bool updateShouldNotify(CounterProvider oldWidget) {
    return true;
  }
}

class CounterBloc {
  int _count = 0;
  
  final _counterActionController = StreamController<int>();
  StreamSink<int> get counter => _counterActionController.sink;

  final _counterController = StreamController<int>();
  Stream<int> get count => _counterController.stream;

  CounterBloc() {
    _counterActionController.stream.listen(onData);
  }

  void onData(int data) {
    print('$data');
    _count = data + _count;
    _counterController.add(_count);
  }

  void disponse() {
    _counterActionController.close();
    _counterController.close();
  }
  
  void log() {
    print('BLoC'); 
  }
}