Bloc Pattern pada flutter merupakan sebuah state manajemen sistem dari Google yang sangat direkomendasikan untuk digunakan oleh para developer mobile, khususnya flutter. Bloc ini sangat membantu dalam state untuk membuat akses data dari tempat sentral/pusat ke widget lainnya didalam projek flutter.

BLOC atau kependekan dari Bussiness Logic of Componen. Dimana pada state management ini antara Logic dan view nya terpisah. Pada android native mungkin lebih mirip dengan MVC (Model View Controller).

Langkah-langkah pembuatan bloc patern sebagai berikut:

• Buat project flutter baru dengan nama implementasi_bloc_patern.
• Buat library bloc di pubspec.yaml

• Buat file.dart sebanyak 4 buah

1. Counter_provider.dart

Untuk proses logic menghitung secara increment.

class CounterProvider {
  int count = 0;
  void increaseCount() => count++;
}

2. Counter_bloc.dart

Untuk deklarasi bloc, deklarasi stream controller dan counter provider.

import 'dart:async';
import 'package:implementasi_bloc_patern/Content_provider.dart';
import 'Content_provider.dart';

class CounterBloc {
  final counterController = StreamController();
  final CounterProvider provider = CounterProvider();

  Stream get getCount => counterController.stream;

  void updateCount() {
    provider.increaseCount();
    counterController.sink.add(provider.count);
  }

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

final bloc = CounterBloc();

3. Counter.dart

Untuk menampilkan data counter.

import 'package:flutter/material.dart';
import 'package:implementasi_bloc_patern/Counter_bloc.dart';
import 'package:implementasi_bloc_patern/Content_provider.dart';

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  @override
  void dispose() {
    bloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: bloc.getCount,
        initialData: CounterProvider().count,
        builder: (context, snapshot) => Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'You have pushed the button this many times',
                  ),
                  Text(
                    '${snapshot.data}',
                    style: Theme.of(context).textTheme.display1,
                  )
                ],
              ),
            ));
  }
}

4. Main.dart

Untuk class utama.

import 'package:flutter/material.dart';
import 'package:implementasi_bloc_patern/Counter.dart';
import 'package:implementasi_bloc_patern/Counter_bloc.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bloc Patern',
      home: MyHomePage(
        title: 'Bloc Patern',
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    bloc.updateCount();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Counter(),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

Hasil Running: