مدیریتstate ها در Flutter چگونه است ؟
برنامه نویسی
شنبه 23 آذر 1398
پارسا رضایی مرام

مدیریتstate ها در Flutter چگونه است ؟


مدیریت اطلاعات و state  ها مهم ترین موضوع در یک اپلیکیشن می باشد چرا که تغییر اطلاعات در یک اپلیکیشن یک امر عادی و طبیعی است . به ندرت می توان اپلیکیشنی را یافت که نیازی به تغییر اطلاعات و state  های خود نداشته باشد !!

در این مقاله قصد داریم بپردازیم به بررسی روش های مدیریت state  ها در فلاتر اما پیش از اینکه ادامه بدیم باید یک تعریفی از state اشته باشیم تا بهتر درک کنیم که اصلا state چیست ؟

تعریفی از State

بهتر با یک مثال مفهوم را بررسی کنیم .

فرض کنید شما یک اپلیکیشنی دارید که شامل یک Button  و Text  هست که می خواهید وقتی روی Button  کلیک شد ، متنText تغییر کند. همانند تصویر زیر :‌

مدیریت state ها درفلاتر

برای این که این عمل اتفاق بیفتد ، باید ویدجت ها تغییر کنند و دوباره از نو ساخته شوند و اطلاعات جدید جایگزین شوند در مثال بالا متن Flutter  بعد از کلیک شدن به Hello Flutter  تغییر پیدا می کند یعنی ویدجت Text دوباره با اطلاعات جدید ساخته می شود .

در واقع به تغییر اطلاعات در رابط کاربری اپلیکیشن ها state می گوییم که رابط کاربری شما نمایشی از این state ها هستند.

علت استفاده از State ها

بدون شک اپلیکیشنی را پیدا نمی کنید که اطلاعاتی را درون خود داشته باشد که نیاز نباشد تغییر کند پس نیازمند استفاده از state  ها و نحوه مدیریت آن ها هستیم.

روش های زیادی برای مدیریت state  ها وجود دارد که بسته به نوع پروژه و نحوه استفاده باید از هر کدام در جای مناسب خود استفاده کنیم در نتیجه نباید به یک روش پسنده کنید و باید روش های زیادی را یاد بگیرید و در جای مناسب از آن استفاده کنید .

اینکه از چه روشی استفاده کنید خیلی مهم هست زیرا مدیریت state ها در کارکرد اپلیکیشن تاثیر دارد.

برای مدیریت state ها در فلاتر شما می توانید از خود پکیج های درونی فلاتر استفاده کنید که شامل موارد زیر است :

  • StatefulWidget
  • StatefulBuilder
  • StreamBuilder
  • InheritedBuilder

غیر از این موارد می توانیم از پکیج های خارج از فلاتر هم استفاده کنیم که در مقالات بعدی به نحوه کار با آن ها می پردازیم . در مقاله قصد داریم که مورد های StatefulWidget  و StatefulBuilder را بررسی کنیم.

یک نکته مهمی که وجود دارد این است که اگر نیازمند به تغییر اطلاعاتی نیستید و صرفا جنبه نمایشی دارد بهتر از تمامی ویدجت های خود را درون یک state  قرار دهید و از ویدجت هایStateless استفاده کنید .

StatefulWidget

این روش اولین روش و ساده ترین روش برای تغییر state ها می باشد که برای استفاده از این حالت می توانید به سادگی با استفاده از دستور setState هر جا که نیاز داشتید داده ای را تغییر بدید ، بروز رسانی کنید.

مثال Button  و Text را که برای درک مفهوم state ها زدیم را میخواهیم با این روش پیاده سازی کنیم.

در ابتدا فرض می کنیم که شما با ویدجت های Stateless  و Stateful آشنایی دارید.

برای شروع باید یک ویدجت از نوع Stateful بسازیم و در متد Build آن کد های زیر را قرار بدهیم.

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  String label = 'Flutter';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white.withOpacity(0.85),
      appBar: AppBar(
        title: Text('Appbar'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(label , style: TextStyle(fontSize: 30.0),),
            SizedBox(height: 30.0,),
            RaisedButton(
              onPressed: () {},
              child: Text('Change Text'),
              color: Colors.green,
              textColor: Colors.white,
            )
          ],
        ),
      ),
    );
  }
}

برای نمایش متن ، یک متغییر تعریف کردیم تحت عنوان label  و از آن برای نمایش در ویدجت Text  استفاده کردیم . زمانی که مقدار این متغییر تغییر کند مقدار Text هم تغییر پیدا می کند. برای انجام این کار باید از دستور setState  در تابع کلیک دکمه ی خود استفاده کنیم . همانند زیر :

RaisedButton(
  onPressed: () {
    setState(() {
      label = 'Hello Flutter';
    });
  },
  child: Text('Change Text'),
  color: Colors.green,
  textColor: Colors.white,
)

خروجی کار به این شکل است که اگر روی دکمه کلیک کنید مقدار Text تغییر خواهد کرد.

این روش یک عیبی دارد این است که روی عملکرد تاثیر می گذارد و با بزرگ شدن پروژه ممکن است دردسر ساز شود چرا که برای یک تغییر کوچک باید تمامی ویدجت های داخل متد Build  مجددا بازسازی بشوند.

StatefulBuilder

زمانی هست که شما تعداد بسیار زیادی ویدجت دارید و می خواهید فقط بخش کوچکی از یک ویدجت را تغییر بدید در این شرایط استفاده از Statefulwidget  پیشنهاد نمی شود چرا که برای یک تغییر کوچک باید تمامی ویدجت ها مجددا بازسازی شوند. در این شرایط بهتر است از StatefulBuilder استفاده کنید .

این ویدجت به ما کمک می کند که تنها بخشی از اپلیکیشن خود را تغییر بدیم . برای استفاده از این ویدجت برای مثال بالا به این شکل عمل می کنیم.

ابتدا یک ویدجت Stateless تعریف می کنیم و در بخشی که میخواهیم اطلاعاتی تغییر کند از ویدجت StatefulBuilder  استفاده می کنیم .

یکی از پارامتر های ورودی این ویدجت از جنس StateSetter هست که دقیقا همانند setState ویدجت های Stateful عمل می کند با این تفاوت که فقط در بلاک های ویدجت StatefulBuilder  کار می کند.

کد زیر مثال Button  و Text با استفاده از StatefulBuilder را نشان می دهد:

class HomePage extends StatelessWidget {
  String label = 'Flutter';
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white.withOpacity(0.85),
      appBar: AppBar(
        title: Text('Appbar'),
      ),
      body: Center(
        child: StatefulBuilder(builder: (BuildContext context , StateSetter setState){
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text(label , style: TextStyle(fontSize: 30.0),),
              SizedBox(height: 30.0,),
              RaisedButton(
                onPressed: () {
                  setState((){
                    label = 'Hello Flutter';
                  });
                },
                child: Text('Change Text'),
                color: Colors.green,
                textColor: Colors.white,
              )
            ],
          );
        }),
      ),
    );
  }
}

مدیریت state ها روش های متفاوتی را دارند که با توجه به شرایط متفاوت هستند . در مقالات آینده قطعا موارد بهتری از مدیریت state ها همانند : bloc , mobx , rxdart را بررسی خواهیم کرد.

دیدگاه ها
برای ثبت دیدگاه یا درج پاسخ باید عضو باشید

دیدگاهی تا کنون ثبت نشده است