Bloc (Business Logic Component) adalah pattern state management yang populer untuk aplikasi Flutter.
Ini membantu memisahkan logika bisnis dari UI dan membuat aplikasi lebih mudah dikelola dan dikembangkan. Berikut adalah beberapa langkah untuk memulai menggunakan Bloc:
- Instal package flutter_bloc dengan cara menambahkan dependensi pada pubspec.yaml.
- Buat Bloc class yang akan mengatur state dan event.
- Implementasi stream yang akan dipantau oleh Bloc.
- Tambahkan Bloc pada widget tree dengan menggunakan BlocProvider.
- Gunakan Bloc untuk mengubah state dan memantau event.
- Untuk lebih detail, Anda bisa melihat dokumentasi resmi dari flutter_bloc di https://pub.dev/packages/flutter_bloc.
Contoh :
Berikut adalah contoh implementasi Bloc pada aplikasi Flutter:
1. Instalasi flutter_bloc:
dependencies:
flutter_bloc: ^7.0.0
2. Buat Bloc class:
import 'package:bloc/bloc.dart';
enum CounterEvent { increment, decrement }
class CounterBloc extends Bloc<CounterEvent, int> {
@override
int get initialState => 0;
@override
Stream<int> mapEventToState(CounterEvent event) async* {
switch (event) {
case CounterEvent.decrement:
yield currentState - 1;
break;
case CounterEvent.increment:
yield currentState + 1;
break;
}
}
}
3. Tambahkan Bloc pada widget tree:
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: BlocBuilder<CounterBloc, int>(
builder: (context, count) {
return Center(
child: Text(
'$count',
style: TextStyle(fontSize: 24.0),
),
);
},
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.remove),
onPressed: () => counterBloc.add(CounterEvent.decrement),
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => counterBloc.add(CounterEvent.increment),
),
),
],
),
);
}
}
Ini adalah contoh sederhana implementasi Bloc pada aplikasi Flutter. Anda dapat membuat implementasi yang lebih kompleks sesuai dengan kebutuhan aplikasi Anda.
