مجتبی خدابخشیساخت اولین اپلیکیشن با فلاتر؛ از ویجت تا نسخه قابل اجرا
راهنمای مفهومی ساختار پروژه فلاتر، ویجتها، مدیریت حالت و مسیر رسیدن به یک اپ ساده.
درخت ویجت را ببین
هر صفحه مجموعهای از ویجتهای کوچکتر است. بهجای نوشتن یک build طولانی، بخشهای مستقل مانند سربرگ، فرم و فهرست را به ویجتهای جدا تقسیم کن.
Stateless یا Stateful؟
اگر خروجی ویجت فقط از ورودیها ساخته میشود Stateless کافی است. وقتی دادهای در طول تعامل تغییر میکند، به مدیریت حالت نیاز داری. انتخاب سادهترین روش از پیچیدگی زودهنگام جلوگیری میکند.
اول تجربه کامل، بعد معماری بزرگ
در پروژه اول، یک جریان کامل مثل افزودن و حذف کار را بساز. بعد از کارکرد صحیح، کد را به لایههای داده، منطق و رابط تقسیم کن.
- صفحه اصلی
- فرم ورود اطلاعات
- فهرست داده
- ذخیره محلی
- پیام خطا و وضعیت خالی
تست روی دستگاه واقعی
اندازه صفحه، صفحهکلید، سرعت و مجوزها روی دستگاه واقعی رفتار متفاوتی دارند. تست زودهنگام از انباشتهشدن خطاهای رابط جلوگیری میکند.
پرسشهای متداول
آیا قبل از فلاتر باید دارت یاد بگیریم؟
مبانی متغیر، تابع، کلاس، async و collection در دارت برای شروع فلاتر ضروریاند.
برای مدیریت حالت از چه ابزاری استفاده کنیم؟
در پروژه اول setState کافی است؛ ابزار پیچیده را زمانی اضافه کن که مسئله واقعی ایجاد شده باشد.
جمعبندی
با درخت ویجت کوچک، جریان داده روشن و یک پروژه کامل شروع کن. معماری خوب باید پاسخ مسئله پروژه باشد، نه مجموعهای از الگوهای زودهنگام.
از مفهوم تا استفاده واقعی
در فلاتر رابط کاربری از ویجتهای کوچک ساخته میشود. بهجای طراحی یک صفحه بزرگ، آن را به بخشهایی مثل عنوان، فهرست و دکمه تقسیم کن؛ هر بخش مسئولیت مشخصی دارد.
یک مثال از دنیای واقعی
فرض کن برای یک فروشگاه محلی اپ ثبت سفارش میسازی. ابتدا فقط نام کالا و تعداد را بگیر و جمع سفارش را نشان بده. ورود، پرداخت و اعلان را وقتی اضافه کن که همین جریان ساده درست کار کند.
final prices = <int>[120, 80, 50];
final total = prices.fold(0, (sum, price) => sum + price);
print('مبلغ سفارش: $total هزار تومان');حالا نوبت توست
یک تخفیف ۱۰ درصدی به مبلغ سفارش اضافه کن و قیمت نهایی را نمایش بده.
- نمونه را یکبار اجرا یا بازنویسی کن.
- تغییر خواستهشده را بدون کپی کامل انجام بده.
- خروجی را با انتظار خودت مقایسه کن.
- در یک جمله توضیح بده چرا راهحل کار کرد.
اول مسئله و خروجی مورد انتظار را روشن کن؛ بعد ابزار را انتخاب کن.
نمونه کوچکِ کامل از پروژه بزرگِ نیمهتمام بیشتر به یادگیری کمک میکند.
کد را فقط نخوان؛ تغییرش بده، خطا بساز و دلیل نتیجه را توضیح بده.
این مسیر را ادامه بده
تمرین این صفحه را انجام بده، نتیجه را برای خودت توضیح بده و بعد سراغ درس مرتبط بعدی برو.
انتخاب مسیر بعدی ←