آموزش BLoC در فلاتر

1403-12-16
ارسال شده توسط
فلاتر
آموزش BLoC در فلاتر

در فلاتر، مدیریت وضعیت (State Management) یکی از مهم‌ترین چالش‌هایی است که توسعه‌دهندگان با آن روبه‌رو هستند. کتابخانه‌های مختلفی برای مدیریت state در فلاتر وجود دارد که یکی از قدرتمندترین آن‌ها، BLoC (Business Logic Component) است. در این مقاله، به بررسی این کتابخانه، نحوه استفاده از آن و مثال‌های عملی می‌پردازیم.

کتابخانه‌های مدیریت State در فلاتر

در فلاتر، روش‌های مختلفی برای مدیریت state وجود دارد که از جمله محبوب‌ترین آن‌ها می‌توان به موارد زیر اشاره کرد:

  • setState: ساده‌ترین روش مدیریت state برای ویجت‌های کوچک
  • Provider: یک راهکار ساده و کارآمد برای مدیریت وابستگی‌ها
  • GetX: مدیریت state با حداقل کدنویسی و عملکرد بالا
  • Riverpod: نسخه بهبودیافته‌ای از Provider با امکانات بیشتر
  • Redux: معماری یک‌طرفه داده‌ها برای مدیریت پیچیده state
  • BLoC/Cubit: روشی ساختاریافته بر پایه Stream برای مدیریت state

BLoC به دلیل معماری قدرتمند و مقیاس‌پذیر بودن، یکی از بهترین گزینه‌ها برای پروژه‌های متوسط تا بزرگ است.

کاربرد BLoC در فلاتر

BLoC به ما کمک می‌کند تا لایه منطقی کسب‌وکار (Business Logic) را از رابط کاربری جدا کنیم. برخی از مهم‌ترین کاربردهای این روش عبارتند از:

  • مدیریت پیچیده داده‌ها در برنامه‌های بزرگ
  • بهینه‌سازی عملکرد برنامه با استفاده از Streams
  • امکان تست‌نویسی بهتر برای منطق برنامه
  • افزایش خوانایی و نگهداری آسان‌تر کد

آشنایی با Cubit

Cubit یک نسخه ساده‌تر از BLoC است که برای مدیریت state استفاده می‌شود. تفاوت اصلی آن با BLoC این است که Cubit نیازی به Event ندارد و تنها از State برای تغییر وضعیت استفاده می‌کند. این ویژگی باعث ساده‌تر شدن کدنویسی و افزایش سرعت توسعه می‌شود.

نحوه استفاده از BLoC در فلاتر

برای استفاده از BLoC در فلاتر، ابتدا باید پکیج مربوطه را نصب کنیم:

1
flutter_bloc: ^8.1.3

سپس باید BlocProvider را در ویجت اصلی برنامه قرار دهیم تا مدیریت state به درستی انجام شود.

سوالات مصاحبه برنامه نویس فلاتر
خواندن این مقاله

آشنایی با Stream در فلاتر

Stream یکی از مفاهیم مهم در برنامه‌نویسی Reactive است که امکان ارسال و دریافت داده به‌صورت ناهمزمان را فراهم می‌کند. در BLoC از Stream برای مدیریت state استفاده می‌شود.

آشنایی با Stream Controller

Stream Controller یکی از مهم‌ترین ابزارهای کار با Stream است که به ما امکان کنترل جریان داده‌ها را می‌دهد. در BLoC، از StreamController برای ارسال و دریافت داده‌های مختلف استفاده می‌شود.

مثال عملی با Cubit

در این مثال، یک CounterCubit ایجاد می‌کنیم که مقدار شمارنده را افزایش و کاهش دهد:

1
2
3
4
5
6
7
8
import 'package:flutter_bloc/flutter_bloc.dart';
 
class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);
 
  void increment() => emit(state + 1);
  void decrement() => emit(state - 1);
}

سپس در ویجت خود از BlocBuilder استفاده می‌کنیم:

1
2
3
4
5
BlocBuilder<CounterCubit, int>(
  builder: (context, count) {
    return Text('$count');
  },
)

مثال عملی با BLoC و دریافت داده از API

در این مثال، داده‌ای را از API دریافت می‌کنیم و نمایش می‌دهیم.

  1. ایجاد مدل داده:
1
2
3
4
5
6
7
8
9
10
11
12
13
class Post {
  final int id;
  final String title;
 
  Post({required this.id, required this.title});
 
  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      id: json['id'],
      title: json['title'],
    );
  }
}

ایجاد BLoC برای دریافت داده:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
 
abstract class PostEvent {}
class FetchPosts extends PostEvent {}
 
abstract class PostState {}
class PostLoading extends PostState {}
class PostLoaded extends PostState {
  final List<Post> posts;
  PostLoaded(this.posts);
}
class PostError extends PostState {}
 
class PostBloc extends Bloc<PostEvent, PostState> {
  PostBloc() : super(PostLoading()) {
    on<FetchPosts>((event, emit) async {
      try {
        final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
        final List data = json.decode(response.body);
        final posts = data.map((e) => Post.fromJson(e)).toList();
        emit(PostLoaded(posts));
      } catch (_) {
        emit(PostError());
      }
    });
  }
}

استفاده از Bloc در ویجت:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
BlocBuilder<PostBloc, PostState>(
  builder: (context, state) {
    if (state is PostLoading) {
      return CircularProgressIndicator();
    } else if (state is PostLoaded) {
      return ListView.builder(
        itemCount: state.posts.length,
        itemBuilder: (context, index) {
          return ListTile(title: Text(state.posts[index].title));
        },
      );
    } else {
      return Text("خطا در دریافت داده");
    }
  },
)

نتیجه گیری

کتابخانه Getx در فلاتر
خواندن این مقاله

در این مقاله، مفهوم BLoC و Cubit را بررسی کردیم و نحوه مدیریت state در فلاتر را با مثال‌های عملی توضیح دادیم. استفاده از BLoC باعث جداسازی منطق کسب‌وکار از UI شده و خوانایی و تست‌پذیری کد را افزایش می‌دهد. در نهایت، برای پروژه‌های بزرگ و پیچیده، BLoC یکی از بهترین روش‌های مدیریت State در فلاتر محسوب می‌شود.

دیدگاهتان را بنویسید