فلاتر برای وب – راهنمای مقدماتی

فلاتر از زمان معرفیش در اواخر سال 2018، به عنوان یک SDK برای توسعه موبایل محبوبیت زیادی کسب کرده است. با افزودن بخش فلاتر برای وب ، این SDK هم‌اکنون در اختیار توسعه‌دهندگان وب نیز قرار گرفته است که با آن می‌توانند تجربه‌ای با کیفیت عالی در وب خلق کنند و از مزیت آخرین API-های وب بهره‌مند شوند.

در این مقاله به بررسی شیوه ساخت یک صفحه وب ساده با فلاتر برای وب می‌پردازیم که شامل طرح‌بندی ساده، مقداری متن و تصویر و چند انیمیشن اسکرول می‌شود. این مثال ساده هیچ چالشی در زمینه طراحی UX ندارد، اما برای مقاصد آموزشی مورد نظر این مقاله مناسب است.

محیط

برای این که یک محیط برای توسعه وب‌اپلیکیشن‌ها با فلاتر برای وب آماده شود، باید ابزارهای زیر را روی سیستم نصب داشته باشید:

• فلاتر: از این صفحه (+) نصب کنید.
• Stagehand: از دستور pub global activate stagehand $ برای ایجاد اپلیکیشن جدید بهره بگیرید.
• IDE: یک IDE یا ادیتور کد مانند VS Code (+) با اکستنشن Dart (+).

برای تأیید این که نصب فلاتر شما عملیاتی است، دستور flutter doctor $ را اجرا کنید تا مطمئن شوید که هر گونه اکستنشن یا دیگر وابستگی‌های ناموجود، دانلود می‌شوند. سورس کد این پروژه را می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه کنید. اطمینان حاصل کنید که دستور  flutter pub get $ را در دایرکتوری پروژه اجرا می‌کنید.

ساختار پروژه

این پروژه با دستور زیر ایجاد شده است:

$ stagehand web-simple

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

این فایل pubspec.yaml برای یک پروژه فلاتر کاملاً عمومی است و چند نکته نیز برای ساخت وب اپلیکیشن به آن اضافه شده است. همچنین برخی وابستگی‌ها با استفاده از url و مسیر ریپو override شده‌اند، زیرا پکیج flutter_web هنوز روی ریپازیتوری pub.dartlang.org منتشر نشده است و pub بدون این override-ها ناموفق خواهد بود.

نقطه ورودی اپلیکیشن

در ادامه فایل سورس اصلی یعنی lib/main.dart را می‌بینید:

این فایل اپلیکیشن اصلی برای هر پروژه فلاتر برای وب است و با پیاده‌سازی StatelessWidget یک MaterialApp می‌سازد که ویجت HomePage درون آن قرارمی گیرد. در ادامه آن را بیشتر بررسی خواهیم کرد.

صفحه اصلی

در ادامه به بررسی صفحه اصلی وب‌سایت در آدرس lib/home.dart می‌پردازیم:

اینجا بخشی است که عمده کدهای پروژه در آن نوشته شده است. کلاس HomePage اقدام به بسط یک StatefulWidget می‌کند که به ما امکان می‌دهد حالت درونی خود را با مشخصه‌های غیر نهایی (Non-Final) که تغییرپذیر هستند در آن نگهداری کنیم. یک مشخصه به نام ‎_cards وجود دارد که بخش ایمپورت شده تعاریف را می‌گیرد و لیستی از شیءهای Section بازگشت می‌دهد که باید نمایش یابند. مشخصه ‎_controller یک ارجاع به ScrollController نگهداری می‌کند که برای راه‌اندازی انیمیشن‌ها در بقیه اپلیکیشن مورد استفاده قرار می‌گیرد.

متد build برای این ویجت یک Scaffold بازگشت می‌دهد که شامل یک Stack (+) است. این Stack برای پشته سازی ویجت‌ها در محور z مورد استفاده می‌گیرد. همچنین این متد یک Background بازمی‌گرداند که وارد ScrollController می‌شود تا یک انیمیشن parallax را اجرا کند. در ادامه یک ListView بازگشت می‌یابد که فهرستی از بخش‌های صفحه که باید اسکرول شوند را نشان می‌دهد. در این مورد از کنترلر ارائه شده برای حرکت لیست استفاده می‌کنیم. این تقریباً یک پیکربندی استاندارد برای مدیریت جلوه‌های اسکرول در فلاتر محسوب می‌شود، چون به کنترلر امکان می‌دهد که رفتار سفارشی ایجاد نماید و سپس از آن برای حرکت دادن مستقیم عنصر اسکرول شونده و همچنین هر تعداد از جلوه‌های انیمیشن از طریق AnimatedWidget و یا مفهوم مرتبطی مانند AnimatedBuilder بهره می‌گیرد.

پس‌زمینه

در ادامه پس‌زمینه وب‌سایت در فایل lib/background.dart قرار می‌گیرد:

ویجت Background یک پیاده‌سازی از AnimatedWidget است که یک Image (+) و یک شیء Listenable (+) می‌گیرد. در این مورد ما یک ScrollController ارسال می‌کنیم که یکی از کلاس‌های فراوانی است که Listenable پیاده‌سازی می‌کند.

مقدار Listenable به کلاس بالاتر ارسال می‌شود تا اپلیکیشن امکان رفرش کردن ویجت انیمیت شده را در زمان رخداد اسکرول داشته باشد. در متد build محاسباتی برای تعیین میزان مسافتی که کاربر روی ListVew اسکرول کرده است انجام می‌یابد و این مقدار به مشخصه alignment روی تصویر به عنوان آفست y ارسال می‌شود که موجب حرکت کُند اسکرول می‌شود و جلوه parallax زیبایی در ترکیب با اسکرول شدن محتوا در پیش‌زمینه ایجاد می‌کند. ضمناً بررسی‌های null مختلفی اجرا می‌شوند، چون کنترلر در نخستین رندر این ویجت نمی‌تواند کاملاً مقداردهی شده و آماده کار باشد.

تعاریف بخش صفحه

اکنون به بررسی تعاریف صفحه در فایل lib/section-def.dart می‌پردازیم:

کلاس SectionDef برای تعریف کردن یک بخش صفحه همراه با نام آن، توضیحات و تصویرش استفاده می‌شود. ضمناً این فایل لیستی از تعاریف بخشی را که از سوی HomePage برای ایجاد فهرست اشیای Section که باید رندر شوند شامل می‌شود.

کلاس Page Section

در نهایت به بررسی کد بخش‌های صفحه در فایل lib/section.dart می‌پردازیم:

دو کلاس در این فایل وجود دارند که یکی کلاس Content است که اساساً ویجت کاربردی کوچکی است که برای جلوگیری از تودرتو شدن بیش از حد بلوک‌های کد استفاده می‌شود. چون در این حالت همه چیز در پروژه فلاتر از کنترل خارج می‌شود. همچنین شامل خود کلاس Section است که بخش‌های صفحه را به دست می‌آورد و یک کنترل شفافیت را به روشی مشابه جلوه اسکرول parallax در پس‌زمینه اجرا می‌کند.

سازنده کلاس Section اندیس آیتم جاری را می‌گیرد (موقعیت آن در لیست بخش‌ها)، و همچنین مقدار total (تعداد بخش‌ها)، item (تعریف بخش) و listenable (محرکه انیمیشن) را نیز دریافت می‌کند. این کلاس میزان مات بودن خود را بر اساس موقعیتش در لیست تعاریف بخش همراه با موقعیت کنونی اسکرول محاسبه می‌کند. هدف این است که مات بودن را بین 0.2 (برای آیتمی که هم اینک در لیست است) و 1.0 (برای آیتمی که به نما اسکرول می‌شود) تغییر دهیم. این وضعیت عملاً از کسر کردن عدد 1.0 (بیشینه مات بودن) از قدر مطلق مسافت بین آیتم و موقعیت کنونی اسکرول به دست می‌آید. بدین ترتیب آیتم‌ها در هر دو سمت از نما خارج می‌شوند و مات بودن افزایش می‌یابد.

سخن پایانی

فلاتر برای وب هم اکنون در حال توسعه است، اما گوگل به شدت مشغول کار است تا آن را نیز مانند دیگر شاخه‌های iOS و اندروید در شاخه اصلی فلاتر ادغام کند. کدهای بررسی شده در این مقاله را می‌توانید در این ریپوی گیت‌هاب (+) ملاحظه کنید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های برنامه‌نویسی اندروید
• مجموعه آموزش‌های برنامه‌نویسی جاوا
• مجموعه آموزش‌های برنامه‌‌نویسی
• گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• مفاهیم مقدماتی فلاتر (Flutter) — به زبان ساده
• استفاده از احراز هویت فایربیس با فلاتر — از صفر تا صد

==