بلاک هایدریت (hydrated bloc) در فلاتر

بلاک هایدریت اصلا کارش چیه؟

همینطور که میدونید مدیریت وضعیت در برنامه نویسی فرانت کلا بخش جدانشدنی هست حالا چه اپلیکیشن باشه چه فرانت وبسایت و ما در فلاتر مدیریت وضعیتی به نام بلاک دارم که از محبوبیت بسیار زیادی برخورداره و معمولا در پروژه های بزرگ یکی از گزینه های روی میز هست.

در کل بلاک هایدریت میاد یه اپشن اضافه رو بهمون میده که اون هم ذخیره اصلاعات و وضعیت رو به ما میده که توی نوشته من یک نمونه رو بهتون نشون میدم که مربوط به تم هاست که خیلی راهت بتونید تم رو ذخیره کنید و وضعیت آخرین تم رو به نمایش بگذارید که همون دارک و لایت هست.

• یه نکته ای رو بگم که این بلاک هایدریت از hive_ce برای ذخیره اطلاعات استفاده میکنه

نصب و کانفیگ اولیه بلاک هایدریت

برای نصب بلاک هایدریت نیازه بلاک هم نصب بشه، کافیه کد زیر رو بزنید توی روت پروژه (مثل بقیه پکیج ها که نصب میکند)

flutter pub add hydrated_bloc
flutter pub add flutter_bloc

بعد از نصب نیازه که کافیگ اولیه رو انجام بدیم که این کافیگ قبل از ران اپلیکیشن هست و در تابع اصلی (main) و این کانفیگ هم مربوط میشه به hive_ce که در پایین مشاهده می کنید

• یه نکته اینکه ما برای ذخیره اطلاعات نیاز به یک دایرکتوری دارم پس برای گرفتن آدرس محل ذخیره از path_provider استفاده میکنیم و از تابعgetTemporaryDirectoryبرای دریافت مسیر

flutter pub add path_provider

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  HydratedBloc.storage = await HydratedStorage.build(
    storageDirectory: kIsWeb
        ? HydratedStorageDirectory.web
        : HydratedStorageDirectory((await getTemporaryDirectory()).path),
  );
  runApp(App());
}

حالا کانفیگ اولیه بلاک هایدریت ما انجام شده بریم برای ساخت استیت منجمنت تم با بلاک هایدریت

ساخت مدیریت وضعیت تم با بلاک هایدریت

خب بریم که کدش رو بزنیم

class ThemeBloc extends HydratedBloc<ThemeEvent, ThemeState> {
        ThemeBloc() : super(ThemeModeState(themeMode: ThemeMode.system)) {
        on<ThemeEvent>((event, emit) {
        switch (event) {
               case LightMode():
                   emit(ThemeModeState(themeMode: ThemeMode.light));
                   break;
              case DarkMode():
                   emit(ThemeModeState(themeMode: ThemeMode.dark));
                   break;
             case SystemMode():
                   emit(ThemeModeState(themeMode: ThemeMode.system));
                   break;
             }
          });
       }
   @override
    ThemeState? fromJson(Map<String, dynamic> json) {
    switch (json[&quotthemeIndex&quot]) {
         case 1:
              return ThemeModeState(themeMode: ThemeMode.light);
         case 2:
              return ThemeModeState(themeMode: ThemeMode.dark);
         default:
              return ThemeModeState(themeMode: ThemeMode.system);
       }
    }
    @override
    Map<String, dynamic>? toJson(ThemeState state) {
        switch (state) {
             case ThemeModeState(themeMode: ThemeMode.light):
                 return {&quotthemeIndex&quot: 1};
             case ThemeModeState(themeMode: ThemeMode.dark):
                 return {&quotthemeIndex&quot: 2};
            default:
                 return {&quotthemeIndex&quot: 0};
            }
       }
}



// States
@immutable
sealed class ThemeState {
final ThemeMode themeMode;
const ThemeState({required this.themeMode});
}
final class ThemeModeState extends ThemeState {
const ThemeModeState({required super.themeMode});
}


// Events
@immutable
sealed class ThemeEvent {}
final class DarkMode extends ThemeEvent {}
final class LightMode extends ThemeEvent {}
final class SystemMode extends ThemeEvent {}

همینطور که میبینید من از هایدریت بلاک استفاده کردم و در ادامه استست ها و اینونت هارو میبینید و نکته مهمی که هست:

• هایدریت بلاک از دو متود مهم یعنی fromJson و toJson استفاده میکنه که toJson که میبینید یک مپ یا جیسون بر میگردونه که این برگشته توی دیتابیس محلی ذخیره میشه و fromJson زمانی که بلاک اینیشیالایز شد این متود میاد و مقدار آخرین وضعیت که سیو شده رو پس میده
• و اینکه هر بار که ما ایونتی میفرستیم و امیت میشه، متود toJson صدا زده میشه و استیت ما در اون ذخیره میشه

و بقیه کار هم مثل بلاک هست اون رو پرواید میکنیم و از .add برای ارسال ایونت استفاده میکنیم که کدش رو میتونید ببینید

Future<void> main() async {
     WidgetsFlutterBinding.ensureInitialized();
     HydratedBloc.storage = await HydratedStorage.build(
     storageDirectory:
      kIsWeb
     ? HydratedStorageDirectory.web
     : HydratedStorageDirectory((await getTemporaryDirectory()).path),
    );
    runApp(BlocProvider(create: (context) => ThemeBloc(), child: const MyApp()));
}
class MyApp extends StatelessWidget {
   const MyApp({super.key});
   @override
    Widget build(BuildContext context) {
       return BlocBuilder<ThemeBloc, ThemeState>(
       builder: (context, state) {
           return MaterialApp(
            debugShowCheckedModeBanner: false,
              title: 'Flutter Theme',
             themeMode: state.themeMode,
            theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(
             seedColor: Colors.deepPurple,
       ),
    ),
           darkTheme: ThemeData(
         colorScheme: ColorScheme.fromSeed(
         seedColor: Colors.deepPurple,
        brightness: Brightness.dark,
     ),
  ),
    home: const ThemeManagerWidget(),
    );
   },
  );
  }
  }
class ThemeManagerWidget extends StatelessWidget {
const ThemeManagerWidget({super.key});
@override
Widget build(BuildContext context) {
      final themeBloc = context.read<ThemeBloc>();
     return Scaffold(
     appBar: AppBar(
       backgroundColor: Theme.of(context).colorScheme.inversePrimary,
       title: const Text('Theme Management'),
        actions: [
          IconButton(
              onPressed: () => themeBloc.add(SystemMode()),
              icon: Icon(Icons.monitor),
          ),
          IconButton(
            onPressed: () => themeBloc.add(LightMode()),
            icon: Icon(Icons.light_mode),
          ),
          IconButton(
            onPressed: () => themeBloc.add(DarkMode()),
            icon: Icon(Icons.dark_mode),
          ),
       ],
),
   body: Center(child: Text(&quottheme&quot)),
);
}
}

توی اپ بار سه دکمه برای تغییر تم گذاشتم و روی هر دکمه که کلیک کنید تم عوض میشه و حتی اگر اپ رو ببندید و بربگردید آخرین تم که انتخاب کردید به شما نمایش داده میشه

امیدوارم مطلب رو به جا اورده باشم

منابع من برای این نوشته:

pub.dev

عدنان کمالی | Adnan Kamali