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

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

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

تنظیم پروژه

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

name: flutter_compass_demo
description: An example app demonstrating how to build a compass.
version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_compass: ^0.3.4

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

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

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

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

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_compass/flutter_compass.dart';

void main() => runApp(CompassDemo());

class CompassDemo extends StatelessWidget {

    @override
    Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Compass Demo',
        theme: ThemeData(brightness: Brightness.dark),
        darkTheme: ThemeData.dark(),
        home: Scaffold(
            appBar: AppBar(title: Text('Flutter Compass Demo')),
            backgroundColor: Colors.black,
            body: Compass()
        )
    );
}

class Compass extends StatefulWidget {

    Compass({Key key}) : super(key: key);

    @override
    _CompassState createState() => _CompassState();
}

class _CompassState extends State<Compass> {

    double _heading = 0;

    String get _readout => _heading.toStringAsFixed(0) + '°';

    @override
    void initState() {
        
        super.initState();
        FlutterCompass.events.listen(_onData);
    }
    
    void _onData(double x) => setState(() { _heading = x; });

    final TextStyle _style = TextStyle(
        color: Colors.red[50].withOpacity(0.9), 
        fontSize: 32, 
        fontWeight: FontWeight.w200,
    );

    @override
    Widget build(BuildContext context) {

        retu CustomPaint(
            foregroundPainter: CompassPainter(angle: _heading),
            child: Center(child: Text(_readout, style: _style))
        );
    }
}

class CompassPainter extends CustomPainter {

    CompassPainter({ @required this.angle }) : super();

    final double angle;
    double get rotation => -2 * pi * (angle / 360);

    Paint get _brush => new Paint()
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2.0;

    @override
    void paint(Canvas canvas, Size size) {

        Paint circle = _brush
            ..color = Colors.indigo[400].withOpacity(0.6);

        Paint needle = _brush
            ..color = Colors.red[400];
        
        double radius = min(size.width / 2.2, size.height / 2.2);
        Offset center = Offset(size.width / 2, size.height / 2);
        Offset start = Offset.lerp(Offset(center.dx, radius), center, .4);
        Offset end = Offset.lerp(Offset(center.dx, radius), center, 0.1);
        
        canvas.translate(center.dx, center.dy);
        canvas.rotate(rotation);
        canvas.translate(-center.dx, -center.dy);
        canvas.drawLine(start, end, needle);
        canvas.drawCircle(center, radius, circle);
    }

    @override
    bool shouldRepaint(CustomPainter oldDelegate) => true;
}

چنان که میبینید کتابخانه 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 تا چه حد آسان است.

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

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

==