- 1 سال قبل
- علیرضا نصراله زاده
پکیج flutter_bloc در فلاتر (Flutter)
پکیج flutter_bloc یک پکیج محبوب در فلاتر برای مدیریت وضعیت (state management) در برنامه‌های Flutter است. این پکیج بر اساس معماری BLoC (Business Logic Component) ساخته شده است و به توسعه‌دهندگان این امکان را می‌دهد که وضعیت برنامه را به صورت مدیریت شده و جدا از رابط کاربری (UI) مدیریت کنند.
برای استفاده از flutter_bloc، ابتدا باید این پکیج را به فایل pubspec.yaml پروژه‌ی خود اضافه کنید:
dependencies:
flutter_bloc: ^7.0.0
سپس از دستور flutter pub get برای دریافت و نصب پکیج‌ها استفاده کنید.
حالا بیایید یک مثال ساده از استفاده از flutter_bloc را ببینیم. در اینجا یک نمونه از یک کانتر ساده با flutter_bloc آورده شده است:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
// 1. Event
abstract class CounterEvent {}
class IncrementEvent extends CounterEvent {}
class DecrementEvent extends CounterEvent {}
// 2. State
class CounterState {
final int count;
CounterState(this.count);
}
class CounterBloc extends Bloc<CounterEvent, CounterState> {
CounterBloc() : super(CounterState(0));
@override
Stream<CounterState> mapEventToState(CounterEvent event) async* {
if (event is IncrementEvent) {
yield CounterState(state.count + 1);
} else if (event is DecrementEvent) {
yield CounterState(state.count - 1);
}
}
}
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CounterBloc(),
child: CounterScreen(),
),
);
}
}
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc counterBloc = BlocProvider.of<CounterBloc>(context);
return Scaffold(
appBar: AppBar(
title: Text('Counter App'),
),
body: BlocBuilder<CounterBloc, CounterState>(
builder: (context, state) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Count: ${state.count}',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => counterBloc.add(IncrementEvent()),
child: Text('Increment'),
),
SizedBox(width: 16),
ElevatedButton(
onPressed: () => counterBloc.add(DecrementEvent()),
child: Text('Decrement'),
),
],
),
],
),
);
},
),
);
}
}
void main() {
runApp(CounterApp());
}
در این مثال:
CounterEvent: مجموعه‌ای از ورودی‌ها که به CounterBloc منتقل می‌شوند (در اینجا IncrementEvent و DecrementEvent).
CounterState: وضعیت فعلی که توسط CounterBloc تولید می‌شود.
CounterBloc: BLoC که وظیفهٔ مدیریت وضعیت را دارد.
CounterScreen: صفحه اصلی که از CounterBloc استفاده می‌کند و وضعیت را نمایش می‌دهد.
این تنها یک مثال ساده از استفاده از flutter_bloc است. این پکیج امکانات بسیاری برای مدیریت وضعیت ارائه می‌دهد و می‌توانید به مستندات رسمی آن مراجعه کنید تا بیشتر با امکانات و راهنمای استفاده از آن آشنا شوید: مستندات flutter_bloc.
