Abdolsalam Dehvari
Abdolsalam Dehvari
خواندن ۴ دقیقه·۱ سال پیش

پیاده سازی معماری MVVM در Flutter با مثال عملی

مقدمه

معماری MVVM (Model-View-ViewModel) در Flutter، یک الگوی طراحی است که با تقسیم کردن اجزای اپلیکیشن به سه جزء اصلی: Model، View و ViewModel به نگرانی های پیاده سازی های پیچیده برنامه شما کمک می کند.


1. مدل (Model):

مدل (Model) داده ها و منطق برنامه شما را نشان می دهد. این موجودیت‌های داده، منابع داده (مانند API یا پایگاه‌های داده) و هر عملیات یا تبدیلی که روی داده‌ها انجام می‌شود را محصور می‌کند. در Flutter، یک مدل می تواند یک کلاس دارت ساده یا یک ساختار داده پیچیده تر باشد، بسته به نیاز برنامه شما.


2. ویو (View):

ویو (View) وظیفه نمایش رابط کاربری و ثبت تعاملات کاربر را بر عهده دارد. در فلاتر View معمولاً به عنوان یک سلسله مراتب ویجت پیاده سازی می شود. نحوه ساختاربندی، استایل دهی و نمایش عناصر رابط کاربری بر روی صفحه را مشخص می کند. View ورودی را از کاربر دریافت می کند و ممکن است رویدادها یا اقداماتی را بر اساس تعاملات کاربر ایجاد کند.


3. ویو مدل (ViewModel):

ویو مدل (ViewModel) به عنوان واسطه بین Model و View عمل می کند و شامل منطق تجاری است و داده ها و روش های لازم را در معرض نمایش قرار می دهد. ViewModel مسئول به روز رسانی View با آخرین داده های مدل و پردازش ورودی یا اقدامات کاربر است. دانش مستقیمی از View ندارد و از تفکیک اجزای اپلیکیشن اطمینان حاصل می کند.


جریان ارتباطی در MVVM را می توان به صورت زیر خلاصه کرد:

1. ویو ورودی کاربر را دریافت می کند یا رویدادها را راه اندازی می کند.

2. ویو مدل ورودی یا رویدادهای کاربر را از View گرفته و اقدامات لازم را انجام می دهد.

3. ویو مدل برای بازیابی یا به روز رسانی داده ها با مدل تعامل دارد.

4. ویو مدل وضعیت خود را بر اساس داده های مدل به روز می کند.

5. ویو تغییرات ViewModel را مشاهده می کند و UI را متناسب با آن به روز می کند.

6. رابط کاربری به روز شده به کاربر نمایش داده می شود.


در Flutter می توانید از تکنیک های مختلف مدیریت حالت برای پیاده سازی معماری MVVM استفاده کنید. پکیج «provider» معمولاً برای تزریق وابستگی و مدیریت حالت استفاده می‌شود و به View و ViewModel اجازه می‌دهد به طور مؤثر ارتباط برقرار کنند. با استفاده از providerها، ViewModel می‌تواند داده‌ها و متدهای خود را به‌عنوان «change notifiers» در معرض نمایش بگذارد، به View اجازه می‌دهد تا تغییرات را بشنود و بر اساس آن رابط کاربری را به‌روزرسانی کند.

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


در زیر یک مثال ساده از پیاده سازی معماری MVVM در فلاتر را آورده ایم:


1. Create the Model:

class Counter { int value; Counter(this.value); }


2. Create the ViewModel:

import 'package:flutter/foundation.dart'; class CounterViewModel extends ChangeNotifier { Counter _counter = Counter(0); int get counterValue => _counter.value; void incrementCounter() { _counter.value++; notifyListeners(); } void decrementCounter() { _counter.value--; notifyListeners(); } }


3. Create the View:

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; class CounterView extends StatelessWidget { @override Widget build(BuildContext context) { final counterViewModel = Provider.of<CounterViewModel>(context); return Scaffold( appBar: AppBar( title: Text('MVVM Example'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Counter Value:', style: TextStyle(fontSize: 24), ), Text( counterViewModel.counterValue.toString(), style: TextStyle(fontSize: 48), ), SizedBox(height: 16), RaisedButton( child: Text('Increment'), onPressed: counterViewModel.incrementCounter, ), RaisedButton( child: Text('Decrement'), onPressed: counterViewModel.decrementCounter, ), ], ), ), ); } }


4. Set up the main app:

import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (context) => CounterViewModel(), child: MaterialApp( title: 'MVVM Example', theme: ThemeData( primarySwatch: Colors.blue, ), home: CounterView(), ), ); } }


در این مثال، کلاس Counter مدل داده ما را نشان می دهد. CounterViewModel به عنوان واسطه بین مدل و view عمل می کند که متدهای لازم برای تغییر مقدار شمارنده را نشان می‌دهد و هر زمان که مقدار شمارنده تغییر کرد به شنوندگان (که همان ویو است) اطلاع می‌دهد.


کلاس CounterView رابط کاربری واقعی است که مقدار شمارنده را نمایش می دهد و دکمه هایی را برای افزایش و کاهش آن ارائه می دهد و از بسته Provider برای دسترسی به CounterViewModel و به روز رسانی UI هنگام تغییر مقدار شمارنده استفاده می کند.

در نهایت، در قسمت آخر، CounterViewModel را داخل یک ویجت ChangeNotifierProvider قرار می دهیم تا توسط CounterView و هر ویجت دیگری که ممکن است به آن نیاز داشته باشد، قابل دسترسی باشد.

رابط کاربریمعماری mvvmفلاترflutter
شاید از این پست‌ها خوشتان بیاید