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

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

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

تنظیم پروژه

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

1name: flutter_compass_demo
2description: An example app demonstrating how to build a compass.
3version: 1.0.0+1
4
5environment:
6  sdk: ">=2.1.0 <3.0.0"
7
8dependencies:
9  flutter:
10    sdk: flutter
11  flutter_compass: ^0.3.4
12
13dev_dependencies:
14  flutter_test:
15    sdk: flutter
16
17flutter:
18  uses-material-design: true

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

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

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

فیلم آموزش پروژه محور فلاتر – طراحی اپلیکیشن موبایل با Flutter – مقدماتی در فرادرس

کلیک کنید

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

1import 'dart:math';
2import 'package:flutter/material.dart';
3import 'package:flutter_compass/flutter_compass.dart';
4
5void main() => runApp(CompassDemo());
6
7class CompassDemo extends StatelessWidget {
8
9    @override
10    Widget build(BuildContext context) => MaterialApp(
11        title: 'Flutter Compass Demo',
12        theme: ThemeData(brightness: Brightness.dark),
13        darkTheme: ThemeData.dark(),
14        home: Scaffold(
15            appBar: AppBar(title: Text('Flutter Compass Demo')),
16            backgroundColor: Colors.black,
17            body: Compass()
18        )
19    );
20}
21
22class Compass extends StatefulWidget {
23
24    Compass({Key key}) : super(key: key);
25
26    @override
27    _CompassState createState() => _CompassState();
28}
29
30class _CompassState extends State<Compass> {
31
32    double _heading = 0;
33
34    String get _readout => _heading.toStringAsFixed(0) + '°';
35
36    @override
37    void initState() {
38        
39        super.initState();
40        FlutterCompass.events.listen(_onData);
41    }
42    
43    void _onData(double x) => setState(() { _heading = x; });
44
45    final TextStyle _style = TextStyle(
46        color: Colors.red[50].withOpacity(0.9), 
47        fontSize: 32, 
48        fontWeight: FontWeight.w200,
49    );
50
51    @override
52    Widget build(BuildContext context) {
53
54        return CustomPaint(
55            foregroundPainter: CompassPainter(angle: _heading),
56            child: Center(child: Text(_readout, style: _style))
57        );
58    }
59}
60
61class CompassPainter extends CustomPainter {
62
63    CompassPainter({ @required this.angle }) : super();
64
65    final double angle;
66    double get rotation => -2 * pi * (angle / 360);
67
68    Paint get _brush => new Paint()
69        ..style = PaintingStyle.stroke
70        ..strokeWidth = 2.0;
71
72    @override
73    void paint(Canvas canvas, Size size) {
74
75        Paint circle = _brush
76            ..color = Colors.indigo[400].withOpacity(0.6);
77
78        Paint needle = _brush
79            ..color = Colors.red[400];
80        
81        double radius = min(size.width / 2.2, size.height / 2.2);
82        Offset center = Offset(size.width / 2, size.height / 2);
83        Offset start = Offset.lerp(Offset(center.dx, radius), center, .4);
84        Offset end = Offset.lerp(Offset(center.dx, radius), center, 0.1);
85        
86        canvas.translate(center.dx, center.dy);
87        canvas.rotate(rotation);
88        canvas.translate(-center.dx, -center.dy);
89        canvas.drawLine(start, end, needle);
90        canvas.drawCircle(center, radius, circle);
91    }
92
93    @override
94    bool shouldRepaint(CustomPainter oldDelegate) => true;
95}

چنان که می‌بینید کتابخانه 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) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت
• فلاتر برای وب — راهنمای مقدماتی

==