پیاده سازی اولین پروژه با فلاتر Flutter

پیاده سازی اولین پروژه با فلاتر Flutter ، ما در چندین پست پیشین در وب سایت تجاری اپ مفصل درباره فلاتر صحبت کردیم و از توانایی ها و قدرت فلاتر گفتیم حال زمان آن است که به سراغ کدنویسی برویم و کمی بصورت پروژه ای با فلاتر کار کنیم.در این پست با ساخت اولین پروژه با فلاتر یعنی پروژه Hello World در فلاتر در خدمت شما هستیم.

ساخت اولین پروژه با فلاتر Flutter

در این آموزش ما با ساختار کلی پروژه فلاتر آشنا خواهیم شد به علاوه یک پروژه Hello World در فلاتر را اجرا خواهیم کرد پس با ما همراه باشید.

پس از نصب موفق فلاتر روی ویندوز ، مک یا لینوکس میتوانید مطابق مراحل زیر پروژه فلاتر را ایجاد و اجرا کرد.

همچنین بخوانید: نصب فلاتر بر روی ویندوز ، لینوکس و مک

اندروید استودیو را اجرا کرده و گزینه Start new Flutter project را انتخاب کنید

سپس درون مرحله بعد باید یکی از انواع پروژه فلاتر را انتخاب کنیم که توضیح هر کدام را هم زمان انتخاب فعال میکند

گزینه Flutter Application : ساخت پروژه برای کاربران
گزینه Flutter Plugin : ساخت API برای توسعه دهندگان Android و iOS
گزینه Flutter Package : ساخت مولفه یا component تماما Dart برای مثال یک ویجت جدید
گزینه Flutter Module : ساخت یک مولفه یا component جدید برای ایمپورت کردن در یک پروژه Android یا iOS فلاتر

خب مشخصا ما در اینجا گزینه Flutter Applicaion را انتخاب میکنیم ، سپس در مرحله بعد ساخت پروژه فلاتر باید نام پروژه ، مسیر SDK فلاتر ، مسیر ذخیره سازی پروژه و توضیح درباره پروژه را وارد کنیم.(توجه کنید که مسیر SDK فلاتر درواقع همان فلاتری ست که براساس پلتفرم خود نصب کرده اید)

همچنین بخوانید: فلاتر (Flutter) در مقایسه با ری اکت نیتیو (React Native) از دید برنامه نویسان

در مرحله بعد براساس نام کمپانی شما (یا هر نام دلخواه دیگر) package name شما ساخته میشود ،به علاوه میتوانید پروژه خود را با آ‌پشن های زیر تجهیز کنید:

• androidx.*
• kotlin برای Android code
• swift برای iOS code

در نهایت بر روی Finish کلیک کنید تا پروژه ساخته شود.همانطور که می بینید در پنل سمت چپ ساختار پروژه مشخص شده

ما با فایل main.dart بیشتر کار داریم و دستورات را درون آن مینویسیم.در تولبار نیز Device و فایل اجرایی و گزینه هایی که قبلا هم در پروژه های اندروید از آنها بسیار استفاده کردیم مثل run ، debug ، avd و … مشخص است.

نکته:
در پروژه Flutter با Android Studio ، اگر لیست device های شما خالی بود ابتدا گزینه AVD manager را انتخاب کنید و Device مجازی خود را بسازید.

برای ساختن AVD هم کافیست دکمه …Create Virtual Device را انتخاب کنید.

سپس دستگاه (Device) را انتخاب کنید

و در مرحله بعد نسخه اندرویدی که میخواهید برروی ماشین مجازی خود نصب کنید را انتخاب کنید.

و در مرحله آخر اگر تنظیمات خاصی نیاز دارید بروی emulator خود اعمال کنید

نکته:
اگر emulator شما پس از ساخت اجرا نشد در صفحه تنظیمات فوق گزینه Show Advanced Settings را بزنید و سپس مقدار Ram را برابر 768 قرار دهید.

خب حالا باید شبیه سازی که ساختید داخل لیست device هایی که در تولبار اندروید استودیوست نمایش داده شود.اما اگر این اتفاق نیوفتاد و دستگاه (Device) شما توسط اندروید استودیو مطابق تصویر زیر شناخته نشد

باید از به مسیر … File/Project Structure بروید سپس در پنجره باز شده

خواهید دید Project SDK خالی ست و همین دلیل شناخته نشدن شبیه ساز های شماست ،پس لیست کشویی را باز کنید و نسخه platform مورد نظر خود را انتخاب کنید و سپس ok.

خواهید دید لیست device های شما در تولبار اندروید استودیو نمایان خواهد شد و میتوانید یکی را اجرا کنید

پروژه Hello World در فلاتر

حال به سراغ فایل main.dart می رویم و خواهیم دید یک سری کد و کامنت ایجاد شده می توانید در همین حالت برنامه را اجرا کنید و نتیجه را ببینید.اما ما میخواهیم یک برنامه ساده ‌Hello World در فلاتر بنویسیم پس این کدها را حذف میکنیم و کدهای زیر را جایگزین میکنیم

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget { 
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       home: new Material(
         child: new Center(
           child: new Text("Hello world!"),
         ),
       ),
     );
   }
 }

شرح کد فوق فلاتر :

در خط اول که کلاس mateial.dart به جهت استفاده از کامپوننت های آن برای مثال tabs، dialogs ، buttons و .. ایمپورت شده

  import 'package:flutter/material.dart';

خط بعد مشخص کننده نقطه شروع برنامه ست با استفاده از متد runApp ویجت روت را اجرا مکنیم

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

توجه کنید که همه چیز در فلاتر ویجت widget است !
در ادامه ما یک کلاس MyApp داریم که از StatelessWidget ارث بری میکند

class MyApp extends StatelessWidget { 
   @override
   Widget build(BuildContext context) {
         …
     }
 }

ویجت هایی که شما در اپ استفاده میکنید میتواند stateful یا stateless باشد.
ویجت های stateful ویجت هایی هستند که وضعیت تغییر پذیری دارند برای مثال checkbox ها که متیواند چک خورده یا چک نخورده باشند یا radio button که میتواند انتخاب شده یا انتخاب نشده باشد یا یک فیلد ورودی تکست و …
این ویجت های تغییر پذیر باید متد createState را پیاده سازی کنند.

بدین صورت:

class MyApp2 extends StatefulWidget{
   @override
   State createState() {
     return null;
   }
 }

ویجت های stateless ویجت هایی هستند که و وضعیت داخلی ندارند برای مثال عکس و یا یک تکست.این ویجت های تغییر ناپذیر با متد build پیاده می شوند

 class MyApp extends StatelessWidget { 
   @override
   Widget build(BuildContext context) {
         …
     }
 }

در مثالی که ما انجام دادیم تنهای یک تکست Hello World نمایش دادیم پس طبیعتا ویجت stateless را استفاده کردیم
در مثال پیاده شده ما از ۴ ویجت استفاده کردیم که همگی stateless هستند.

new MaterialApp(home: …)
new Material(child: …)
new Center(child: …)
(…) new Text

MaterialApp ، ویجت های طراحی متریال
Material ، یک بخش از matrial
Center ، ویجتی که تمام المان های درونش را وسط چین میکند
Text ، ویجتی برای ست کردن تکست

البته این چهار ویجت تنها بخش کوچکی از ویجت های فلاتر هستند که کاربرد زیادی دارند و همچنین attribute یا خصایص بسیاری هم می پذیرند که برخی از آنها اجباری و برخی اختیاری هستند برای مثال برخی از attribute ها برای توضیح موقعیت ویجت است (home ، child و children ) برخی برای جنبه های بصری ست (position ، styling و decoration) و برخی برای رفتار ویجت (on click listener) که هرچه بیشتر با فلاتر کار کنید متوجه آپشن های بیشتر Flutter خواهید شد.

میتوانید با دکمه run پروژه رو برروی emulator ران کنید و یا با دستورات خط فرمان برنامه رو اجرا کنید.

 $ flutter run
 $ flutter run -d DEVICE_ID
 $ flutter run -d all

در نهایت برنامه را بصورت زیر خواهید دید