ساخت اپلیکیشن قطب نما با فلاتر – از صفر تا صد

در این مقاله به بررسی روش ساخت اپلیکیشن قطب نما با فلاتر می‌پردازیم. فلاتر یک SDK محبوب برای توسعه UI/UX چند پلتفرمی است که امکانات خوبی برای تبدیل سریع مفاهیم و ایده‌ها به پروتوتایپ ارائه می‌کند. همچنین با استفاده از فلاتر می‌توان این پروتوتایپ‌ها را به کامپوننت‌ها و اپلیکیشن‌های آماده پروداکشن تبدیل کرد.

برای نصب فلاتر روی سیستم‌های مک می‌توانید به این صفحه (+) مراجعه کنید. سورس کد کامل پروژه مورد بررسی در این راهنما نیز از طریق این ریپوی گیت‌هاب (+) در اختیار شما قرار دارد.

تنظیم پروژه

پیکربندی پروژه در یک فایل استاندارد به نام pubspec.yaml قرار دارد:

در این پروژه اقدام به ایمپورت کردن flutter_compass (+) می‌کنیم که یک پلاگین ساده با استریم رویداد است که جهتگیری قرار گرفتن گوشی را به صورت درجه از 0 تا 360 بازگشت می‌دهد. این داده‌ها در اپلیکیشن دریافت شده و برای چرخاندن عقربه قطب‌نما برای نمایش جهت شمال مورد استفاده قرار می‌گیرد.

فایل اصلی اپلیکیشن

در ادامه، سورس مربوط به این اپلیکیشن را آورده‌ایم.

کل سورس این اپلیکیشن ساده در فایل lib/main.dart قرار دارد:

چنان که می‌بینید کتابخانه math زبان Dart نیز همراه با پکیج flutter_compass ایمپورت شده است. کلاس CompassDemo یک MaterialApp با عنوان، قالب و صفحه اصلی استاندارد می‌سازد که شامل یک Scaffold و یک AppBar و همچنین وهله‌ای از ویجت Compass به عنوان بدنه اصلی اپلیکیشن است.

کلاس Compass خودش یک پیاده‌سازی از StatefulWidget (+) محسوب میشود که ویجتی است که می‌تواند داده‌های State (+) تغییرپذیر را نگهداری کند. حالت این کلاس compass دارای یک مشخصه ‎_heading و یک accessor برای readout است که جهت‌گیری گوشی را به صورت رشته‌ای در قالب درجه بازگشت می‌دهد. متد initState یک شنونده رویداد روی پلاگین compass می‌سازد که وقتی جهت‌گیری تغییر یابد (یعنی کاربر جابجا شود و زاویه قطب‌نما تغییر یابد)، فراخوانی می‌شود. هنگامی که دستگیره شنونده رویداد پلاگین اقدام به فراخوانی onData با داده‌های جدید بکند، setState برای به‌روزرسانی جهت‌گیری فراخوانده می‌شود و موجب رسم مجدد UI کامپوننت می‌شود.

استایل خوانش به مقدار TextStyle روی مشخصه the _style تنظیم می‌شود و متد build ویجت یک شیء CustomPaint (+) بازگشت می‌دهد که خوانش متن را برای جهت‌گیری رندر می‌کند. همچنین دایره قطب‌نما و عقربه آن با استفاده از CompassPainter به عنوان یک painter پیش‌زمینه رندر می‌شود.

کلاس CompassPainter یک پیاده‌سازی از CustomPainter است که یک پارامتر گرفته و میزان چرخش را برحسب رادیان محاسبه می‌کند تا روی قطب‌نما اعمال شود. accessor به نام ‎_brush یک شیء paint جدید بازگشت می‌دهد که به عنوان براش پیش‌فرض مورد اجرا قرار می‌گیرد.

متد paint شیءهای براش را برای circle و needle تعریف کرده و مقادیر radius ،center ،start و end را محاسبه می‌کند. تابع translate نیز برای قرار دادن مرکز آفست چرخش مورد استفاده قرار می‌گیرد. سپس از تابع rotate برای مطابقت با مقدار rotation که در بخش فوق تعریف شده استفاده می‌شود. قالب و عقربه قطب‌نما با استفاده از drawLine و drawCircle رسم می‌شوند که این موارد را روی بوم در حال چرخش رسم می‌کند و عقربه را همواره به سمت شمال مغناطیسی نگه می‌دارد.

سخن پایانی

فلاتر یک SDK عالی برای ساخت انواع مختلفی از اپلیکیشن‌های چند پلتفرمی است که از سخت‌افزار گوشی برای خلق تجربه تعاملی کامل بهره می‌گیرد. اپلیکیشن دمویی که در این راهنما معرفی کردیم، نشان می‌دهد که ساخت یک UX مبتنی بر رویداد در یک فایل منفرد Dart تا چه حد آسان است.

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

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

==