مدیریت حالت ها در فلاتر - راهنمای جامع

مدیریت حالت در Flutter یک مفهوم حیاتی برای ساخت برنامه های کاربردی تلفن همراه قوی، پاسخگو و کارآمد است. این به مدیریت و دستکاری داده ها در یک برنامه اشاره دارد تا اطمینان حاصل شود که رابط کاربری (UI) به طور دقیق وضعیت فعلی برنامه را منعکس می کند.

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

مدیریت حالت چیست؟

State، در زمینه یک برنامه Flutter، اطلاعاتی را نشان می‌دهد که می‌تواند در طول زمان تغییر کند و بر ظاهر و رفتار UI تأثیر بگذارد. نمونه هایی از وضعیت در یک برنامه Flutter شامل ورودی کاربر، داده های شبکه، جهت گیری دستگاه و موارد دیگر است. مدیریت موثر حالت شامل مدیریت و به روز رسانی این داده ها برای همگام نگه داشتن رابط کاربری با منطق برنامه است.

در Flutter، رابط کاربری معمولاً به ویجت‌ها تقسیم می‌شود و مدیریت حالت حول نحوه اشتراک‌گذاری و به‌روزرسانی داده‌ها بین این ویجت‌ها می‌چرخد. مدیریت وضعیت خوب تضمین می‌کند که وقتی تغییری در یک قسمت از برنامه اتفاق می‌افتد، به دقت در سایر بخش‌های مرتبط رابط کاربری منعکس شود.

انواع مدیریت State در فلاتر

Flutter طیف وسیعی از راه حل های مدیریت State را برای پاسخگویی به پیچیدگی های مختلف پروژه و ترجیحات توسعه دهندگان ارائه می دهد. در اینجا برخی از انواع رایج مدیریت حالت در فلاتر آورده شده است:

1. Stateful Widgets

ویجت های Stateful مکانیسم داخلی Flutter برای مدیریت وضعیت هستند. آنها از دو کلاس تشکیل شده اند: "StatefulWidget" و "State". "StatefulWidget" بخش غیرقابل تغییر ویجت را نشان می دهد، در حالی که شی "State" داده های وضعیت قابل تغییر را نگه می دارد. هنگامی که داده های وضعیت تغییر می کند، فراخوانی «setState()» باعث ایجاد بازسازی ویجت می شود و رابط کاربری را به روز می کند.

class MyStatefulWidget extends StatefulWidget {
  @override _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _incrementCounter()
  {
    setState(() {
     _counter++;
    });
  }

  @overrid Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Counter: $_counter'),
        ElevatedButton(
          onPressed: _incrementCounter,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

2. Provider Package

یک بسته مدیریت حالت محبوب Flutter Provider است. این به شما امکان می دهد ارائه دهندگانی را ایجاد و مدیریت کنید که وضعیت برنامه را نگه می دارند. سپس ویجت ها می توانند برای تغییرات در وضعیت به این ارائه دهندگان گوش دهند. ارائه دهنده به ویژه برای مدیریت وضعیت سراسری یا اشتراکی مفید است.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class MyWidget extends StatelessWidget {
@override Widget build(BuildContext context) {
  final counter = Provider.of<Counter>(context);

  return Column(
    children: <Widget>[
      Text('Counter: ${counter.value}'),
      ElevatedButton(
        onPressed: () => counter.increment(),
        child: Text('Increment'),
        ),
      ],
    );
  }
}

class Counter with ChangeNotifier {
  int _value = 0;

  int get value => _value;

  void increment() {
    _value++;
    notifyListeners();
  }
}

3. Bloc Pattern

الگوی بلوک (جزء منطق تجاری) معمولاً برای مدیریت حالت در فلاتر به ویژه برای برنامه های پیچیده استفاده می شود. این رابط کاربری را از منطق تجاری جدا می کند و از جریان ها برای مدیریت و انتشار تغییرات حالت استفاده می کند. بسته «flutter_bloc» به طور گسترده برای اجرای الگوی بلوک پذیرفته شده است.

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class CounterCubit extends Cubit<int> {
  CounterCubit() : super(0);

  void increment() => emit(state + 1);
}

class MyWidget extends StatelessWidget {
  @override Widget build(BuildContext context) {
    final counterCubit = context.read<CounterCubit>();

    return Column(
      children: <Widget>[BlocBuilder<CounterCubit, int>(
        builder: (context, state) {
          return Text('Counter: $state');
         },
       ),
       ElevatedButton(
         onPressed: () => counterCubit.increment(),
         child: Text('Increment'),
       ),
     ],
    );
  }
}

4. GetX Package

GetX یک کتابخانه مدیریت دولتی قدرتمند و سبک برای Flutter است. این یک روش ساده و با کارایی بالا برای مدیریت وضعیت، مدیریت ناوبری و تزریق وابستگی ها ارائه می دهد. GetX به دلیل سادگی و کارایی خود شناخته شده است.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class MyWidget extends StatelessWidget {
  final count = 0.obs;

  void increment() => count.value++;

  @override Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Obx(() => Text('Counter: $count')),
        ElevatedButton(
          onPressed: increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

اینها تنها چند نمونه از گزینه های مدیریت حالت در Flutter هستند. انتخاب رویکرد مدیریت حالت به عواملی مانند پیچیدگی پروژه، ترجیحات تیم و الزامات خاص برنامه شما بستگی دارد. انعطاف پذیری Flutter به شما این امکان را می دهد که مناسب ترین راه حل مدیریت حالت را انتخاب کنید یا حتی در صورت نیاز چندین تکنیک را برای ایجاد برنامه های Flutter کارآمد و قابل نگهداری ترکیب کنید.

منبع: medium.com