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

۴۱ بازدید
آخرین به‌روزرسانی: ۰۵ دی ۱۳۹۹
زمان مطالعه: ۹ دقیقه
گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت

فلاتر به سرعت در حال تبدیل شدن به یکی از محبوب‌ترین فریمورک‌ها برای توسعه اپلیکیشن‌های چند پلتفرمی موبایل است. اغلب توسعه‌دهندگان اندروید و iOS امروزه بر این باور هستند که این فریمورک از بسیاری از فریمورک‌های چند پلتفرمی رقیب مانند React Native و NativeScript سریع‌تر است و جایگزین مطمئن‌تری برای سال‌های آتی محسوب می‌شود.

خود گوگل نهایت تلاش خود را کرده است تا هر چه می‌تواند توسعه‌دهندگان بیشتری را به این فریمورک جذب کند. برای نمونه در کنفرانس I/O امسال، گوگل چند جلسه بررسی عمیق برگزار کرد که بر روی توسعه اپلیکیشن‌های سازگار با متریال دیزاین با استفاده از Flutter تمرکز داشت. در طی یکی از این جلسه‌ها، گوگل اعلام کرد که فلاتر در حال تبدیل شدن به یکی از پلتفرم‌های درجه یک برای توسعه متریال دیزاین است.

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

پیش‌نیازها

برای این که نهایت بهره را از این آموزش‌ها ببرید باید موارد زیر را از قبل آماده کرده باشید:

  1. آخرین نسخه از اندروید استودیو
  2. یک دستگاه یا شبیه‌ساز که اندروید با API 21 یا بالاتر روی آن نصب شده باشد.

پیکربندی اندروید استودیو

پس از نصب چند افزونه سبک شما می‌توانید از اندروید استودیو بهره بگیرید که IDE بومی توسعه‌دهندگان اندروید محسوب می‌شود و اغلب برنامه‌نویس‌ها از آن برای نوشتن اپلیکیشن‌های فلاتر استفاده می‌کنند.

کار خود را با باز کردن اندروید استودیو و انتخاب گزینه Configure > Plugins در صفحه خوشامدگویی آغاز می‌کنیم. در کادر گفتگویی که باز می‌شود دکمه Browse Repositories را زده و به دنبال افزونه Flutter جستجو می‌کنیم.

زمانی که افزونه را یافتید دکمه Install را بزنید. در این زمان از شما سوال می‌شود که آیا می‌خواهید افزونه Dart نیز نصب شود. دکمه yes را انتخاب کنید.

پس از نصب هر دو افزونه، دکمه  را بزنید تا پیکربندی به پایان برسد.

ایجاد یک پروژه جدید

پس از ری‌استارت کردن اندروید استودیو می توانید یک دکمه Start a new Flutter project را در صفحه خوشامدگویی اندروید استودیو ببینید. آن را بزنید تا نخستین پروژه Flutter خود را ایجاد کنید. در صفحه بعدی گزینه Flutter Application را انتخاب کرده و Next را بزنید.

اینک فرمی را می بینید که از شما می خواهد جزییات مختلف اپلیکیشن Flutter خود مانند نام و مکان آن را را وارد کنید. اطمینان حاصل کنید که مقادیر معتبری را در فیلدهای مربوطه وارد می کنید.

افزونه Flutter به همراه SDK فلاتر ارائه نشده است. از این رو باید SDK را به طور مجزا نصب کنیم. این کار از طریق فشردن Install SDK دکمه میسر است.

بسته به سرعت اتصال اینترنتی‌تان، فرایند نصب SDK ممکن است چند دقیقه طول بکشد. پس از این که نصب با موفقیت پایان یافت، می‌توانید با زدن دکمه Next مراحل راه‌اندازی پروژه را به پایان ببرید.

افزودن نقطه ورود

در سراسر این راهنما کد خود را درون فایل lib/main.dart خواهیم نوشت. این فایل به صورت پیش‌فرض شامل برخی کدهای نمونه است که نیازی به آن‌ها نداریم. بنابراین قبل از هر کاری همه محتویات این فایل را حذف می‌کنیم.

فریمورک فلاتر از زبان برنامه‌نویسی Dart استفاده می‌کند. این زبان فرایند یادگیری آسانی دارد و دستور زبان آن مشابه زبان‌های جاوا و C است. در نتیجه مانند اغلب برنامه‌های مستقل جاوا و C، یک اپلیکیشن Flutter نیز به تابع ()main نیاز دارد که تابعی خاص است که به عنوان نقطه ورودی برنامه عمل می‌کند.

بر همین اساس کد زیر را به فایل main.dart اضافه می‌کنیم:

void main() {
    // TO DO
}

در این زمان می‌توانید با زدن دکمه Shift+F10 اپلیکیشن را بیلد کرده و اجرا کنید. اگر با هیچ خطایی در مراحل قبل مواجه نشدید، اپلیکیشن را می‌بینید که صفحه‌ای با یک بوم خالی را روی دستگاه نشان می‌دهد.

استفاده از ویجت‌های بی‌حالت

همه اپلیکیشن‌های فلاتر از یک یا چند ویجت تشکیل یافته‌اند. ویجت‌ها وهله‌هایی از کلاس‌هایی هستند که امکان ترسیم متن و تصویر را روی صفحه ایجاد می‌کنند. به طور معمول شما مجبور نیستید ویجت‌های سطح پایین را از صفر بنویسید، زیرا در این فریمورک، طیف گسترده‌ای از ویجت‌های پیش‌ساخته زیبا عرضه شده است که با زبان‌های برنامه‌نویسی اندروید و همچنین iOS سازگار هستند.

برای این که بتوانید از ویجت‌های ساده در اپلیکیشن خود استفاده کنید، باید کتابخانه widgets را با افزودن کد زیر در ابتدای فایل main.dart ایمپورت کنید:

import 'package:flutter/widgets.dart';

ساده‌ترین ویجت‌هایی که می‌توانید ایجاد کنید، ویجت‌های بی‌حالت هستند. همان طور که از نام این ویجت‌ها مشخص است، برای این ویجت‌ها حالتی تعریف نمی‌شود و از این رو استاتیک هستند. این ویجت‌ها برای نمایش برچسب‌ها، عناوین و دیگر اجزای UI که محتوای آن‌ها با اجرای برنامه تغییری نمی‌یابد، بسیار مناسب هستند. برای ایجاد یک ویجت بی‌حالت باید کلاس StatelessWidget را بسط داده و متد ()build آن را اوراید (Overide) کنید. در کد نمونه زیر شیوه کار نمایش یافته است:

class MyFirstWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

همان طور که در کد فوق می‌بینید، متد ()build باید یک شیء widget بازگشت دهد. شما می‌توانید از هر کدام از ویجت‌های پیش‌ساخته Flutter که می‌خواهید، استفاده کنید و آن را بازگشت دهید. برای نمونه اگر می‌خواهید یک خط متن را نمایش دهید، می‌توانید یک ویجت Text بازگشت دهید که کد آن در ادامه نمایش یافته است:

return Text("This is nice!",
                 textDirection: TextDirection.ltr);

همواره باید به خاطر داشته باشید که هنگام استفاده از ویجت Text باید جهت متن را نیز تعیین کنید.

با این حال اگر از اپلیکیشن در این لحظه استفاده کنید، متوجه خواهید شد که نمی‌توانید متن را ببینید. دلیل این مسئله آن است که ویجت بی‌حالت خود را هنوز مقداردهی اولیه (instantiate) نکرده‌اید. از این رو باید به متد ()build بروید و ویجت را درون آن مقداردهی اولیه بکنید و آن را به صورت زیر به متد ()runApp ارسال کنید:

runApp(new MyFirstWidget());

لحظه‌ای که کد فوق را اضافه و پروژه را ذخیره کنید، اندروید استودیو به طور خودکار اپلیکیشن را به صورت بی‌درنگ (hot) روی دستگاه بارگذاری مجدد می‌کند و می‌توانید متن خود را مشاهده کنید.

اگر می‌خواهید به جای متن یک تصویر را نمایش دهید، می‌توانید ویجت Text را درون متد ()Build کلاس خود، به سادگی با ویجت Image تعویض کنید. کد زیر طرز ایجاد یک ویجت Image را که یک تصویر را از آدرس ریموت دانلود کرده و نمایش می‌دهد را معرفی می‌کند:

return Image.network(
                               "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");

در این حالت نیز با ذخیره کردن پروژه می‌توانید چیزی مانند تصویر زیر را روی دستگاه خود ببینید:

ایجاد درخت‌های ویجت

همه اپلیکیشن‌های فلاتر را می‌توان درخت‌هایی از ویجت دانست. اپلیکیشنی که در مرحله قبل ایجاد کردیم یک درخت ویجت است که تنها یک ویجت دارد. با این حال استفاده از ویجت‌های Text یا Image به عنوان عناصر فوقانی درخت ویجت ایده خوبی محسوب نمی‌شود، زیرا بدین ترتیب نمی‌توانید ویجت‌های فرزندی به آن‌ها اضافه کنید.

فلاتر چندین ویجت دارد که می‌توانند به عنوان محفظه‌ای برای ویجت‌های دیگر استفاده شوند. انواع رایج‌تر از این محفظه‌ها، ویجت‌های Row و Column هستند. همان طور که از نام این ویجت‌ها مشخص است، ویجت Row امکان درج چند ویجت را به صورت کنار فراهم می‌کند و ویجت Column نیز کمک می‌کند که بتوانید ویجت‌ها را زیر هم قرار دهید. استفاده از این ویجت‌ها در مواردی که درخت ویجت ما عمق بیشتری می‌یابد ناگزیر خواهد بود.

کد زیر نشان می‌دهد که چگونه می‌توانید از ویجت Column برای ایجاد یک درخت ویجت استفاده کنید که دو فرزند دارد: یک ویجت Text و یک ویجت Image.

Text myText = Text("This is a nice photo!",
      textDirection: TextDirection.ltr);

Image myImage = Image.network(
     "https://images.pexels.com/photos/1168940/pexels-photo-1168940.jpeg");
return Column(
     children: <Widget>[myText, myImage]
);

اپلیکیشن ما اینک باید به صورت زیر در آمده باشد:

به علاوه ویجت‌هایی وجود دارند که به موقعیت‌یابی بهتر یک ویجت منفرد کمک می‌کنند. برای نمونه ویجت Center کمک می‌کند که یک ویجت در مرکز صفحه قرار بگیرد. به طور مشابه ویجت Container امکان افزودن حاشیه و لبه (padding و margins) به ویجت‌ها را فراهم می‌سازد. کد زیر روش درج مرکزی یک ویجت با استفاده از ویجت Center را نشان می‌دهد:

return Center(child: Column(
    children: <Widget>[myText, myImage],
    mainAxisSize: MainAxisSize.min
   )
);

در کد فوق توجه کنید که ویجت column از یک خصوصیت اضافی به نام mainAxisSize استفاده می‌کند که مقدار آن برابر با min تعیین شده است. این ویجت ضروری است، زیرا پیش از درج مرکزی یک ستون باید ارتفاع آن را برابر با مجموع ارتفاع‌های فرزندانش تنظیم کنید. بدون وجود این خصوصیت، ویجت Column به اندازه صفحه نمایش دستگاه بزرگ خواهد بود و ویجت Center هیچ تأثیری بر روی آن نخواهد داشت.

استفاده از ویجت‌های متریال دیزاین

همه ویجت‌هایی که تاکنون با آن سروکار داشتیم، ویجت‌های ابتدایی بودند که بخشی از کتابخانه widgets هستند. فلاتر کتابخانه دیگری به نام material نیز دارد که ویجت‌های متریال دیزاین (Material Design) را ارائه می‌دهد. برای استفاده از این ویجت در یک اپلیکیشن باید عبارتی که کتابخانه widgets را ایمپورت می‌کند را به صورت زیر تغییر دهیم:

import 'package:flutter/material.dart';

سپس برای به‌کارگیری سبک‌بندی متریال دیزاین باید یک ویجت MaterialApp را در بخش فوقانی درخت ویجت خود داشته باشید. شما باید همه ویجت‌هایی که قبلاً ایجاد کرده‌اید را درون یک ویجت Scaffold قرار دهید تا به عنوان صفحه اصلی ویجت MaterialApp استفاده شوند.

به علاوه از آن جا که اپلیکیشن‌های متریال دیزاین یک نوار اپ (app bar) دارند، می‌توانید خصوصیت Scaffold ویجت appBar را به صورت یک ویجت appBar جدید تعیین کنید. کد زیر شیوه اجرای همه این کارها را نشان می‌دهد:

return MaterialApp(
    home: Scaffold(
        appBar: AppBar(title: Text("My App")),
        body: Center(
          child: Column(
            children: [myText, myImage],
            mainAxisSize: MainAxisSize.min
          ),
        )
    )
);

اینک ظاهر اپلیکیشن ما بسیار بهبود یافته است:

استفاده از ویجت‌های باحالت (Stateful)

ویجت‌های بی‌حالت غیر قابل تغییر هستند. با کدی که در بخش قبلی نوشتید امکان تغییر دادن محتوای ویجت Text یا ویجت Image به سادگی میسر نخواهد بود. دلیل این مسئله آن است که فریمورک فلاتر برنامه‌نویسی واکنشی را به برنامه‌نویسی الزامی ترجیح می‌دهد. در نتیجه اغلب ویجت‌های آن فاقد متدهای setter هستند که محتوایشان را در زمان اجرا به‌روزرسانی کنند. برای نمونه ویجت Text هیچ متد ()setText ندارد و نمی‌توانیم متنی که نمایش خواهد یافت را تغییر دهیم.

اما در سوی دیگر، ویجت‌های باحالت، قابل‌تغییر هستند. البته این تغییر مستقیم نیست. این ویجت‌ها از اشیای State استفاده می‌کنند. این اشیا تعیین می‌کنند که ویجت در هر یک از وهله‌های خود چه چیزی را نمایش خواهد داد. بدین ترتیب هر زمان که یک شیء State تغییر یابد، فریمورک به طور خودکار محتوای هر ویجت باحالت متصل به آن را به‌روزرسانی می‌کند.

برای ایجاد یک ویجت باحالت باید کلاس StatefulWidget را بسط دهید و متد ()createState آن را اوراید کنید.

class MySecondWidget extends StatefulWidget {
  @override
  State createState() {
    // TO DO
  }
}

سپس باید یک کلاس State سفارشی جدید ایجاد کنید که شامل متغیرهایی باشد که حالت ویجت باحالت را تشکیل می‌دهد. به علاوه درون این کلاس باید متد ()build را اوراید کنید تا درخت ویجت را بازگرداند. کد زیر شیوه ایجاد یک کلاس State که شامل متغیر منفردی به نام url است را نشان می‌دهد:

class MyState extends State {
 
  String url = "https://source.unsplash.com/random/800x600";
              // A random image from Unsplash
 
  @override
  Widget build(BuildContext context) {
    // More code here
  }
}

برای این که مثال ما یک مثال قوی باشد، در ادامه یک درخت ویجت متریال دیزاین ایجاد می‌کنیم که شامل یک ویجت Image است و این ویجت یک تصویر تصادفی را نمایش می‌دهد. همچنین یک ویجت RaisedButton خواهیم داشت که کاربر می‌تواند آن را فشار دهد تا یک تصاویر تصادفی جدید ارسال شود. کد آن به صورت زیر است:

return MaterialApp(
  home: Scaffold(
    body: Center(
      child:Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          RaisedButton(
            child: Text("Press Me"),
            onPressed: changeURL,
          ),
          Image.network(url)
        ]
      )
    )
  )
);

توجه کنید که سازنده ویجت Image اینک به جای یک رشته، دو متغیر url و ورودی آن را می‌گیرد. بدین ترتیب فریمورک می‌تواند از آخرین مقدار متغیر در زمان ترسیم ویجت Image استفاده کند. همچنین توجه کنید که ویجت RaisedButton یک خصوصت onPressed دارد که به یک شنونده رویداد (event listener) به نام ()changeURL اشاره می‌کند. این متد هنوز وجود ندارد و از این رو در ادامه آن را می‌نویسیم:

void changeURL() {
    // More code here
}

درون این متد باید مقدار متغیر url را تغییر دهید. با این حال نمی‌توانید آن را به طور مستقیم تغییر دهید. چون در این صورت فریمورک Flutter از تغییر اطلاع نمی‌یابد. برای به‌روزرسانی صحیح State ویجت باحالت باید همیشه همه تغییرات خود را درون متد انجام دهید.

اینک برای نمایش یک تصویر تصادفی می‌توانیم از سرویس Unsplash Source استفاده کنیم. تنها کاری که برای دانلود یک تصویر تصادفی نیاز داریم این است که یک درخواست HTTP به Url آن ایجاد کرده و یک رشته کوئری منحصر به فرد به آن بفرستیم.

در کد زیر شیوه اجرای این کار با استفاده از یک timestamp برای ساخت رشته کوئری منحصر به فرد را نشان داده‌ایم:

setState(() {
    url = "https://source.unsplash.com/random/800x600/?" +
           "q=${new DateTime.now().millisecondsSinceEpoch}";
});

در این زمان کلاس State سفارشی ما آماده است و تنها کاری که باید انجام دهیم این است که آن را مقداردهی اولیه کنیم و از متد ()createState ویجت باحالت خود بازگشت دهیم:

return MyState();

اگر یک وهله از ویجت باحالت خود را از متد ()runApp بازگشت دهید، اپلیکیشن را مجدداً بارگذاری کنید و دکمه را چند بار بزنید، می‌توانید ببینید که هر بار یک تصویر جدید را نمایش می‌دهد.

سخن پایانی

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

لازم به ذکر است که Flutter از هیچ ویجت بومی پلتفرم موبایل استفاده نمی‌کند. این فریمورک همه ویجت‌ها را خودش با استفاده از موتور گرافیک دوبعدی به نام Skia ترسیم می‌کند که استفاده گسترده‌ای از GPU دارد. در نتیجه اپلیکیشن‌های فلاتر غالباً در نرخ فریم‌هایی نزدیک به 60 FPS اجرا می‌شوند و حسی کاملاً روان و واکنش‌گرا دارند. برای یادگیری موارد بیشتر در مورد گوگل فلاتر می‌توانید به مستندات رسمی آن مراجعه کنید.

اگر این نوشته مورد توجه شما قرار گرفته است، پیشنهاد می‌کنیم موارد زیر را نیز مطالعه کنید:

==

بر اساس رای ۵ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
tutsplus
۶ دیدگاه برای «گوگل فلاتر (Flutter) از صفر تا صد — ساخت اپلیکیشن به کمک ویجت»

آیا آموزش فلاتر در دست توسعه قرار داره یا قصد چنین کاری ندارید؟

سلام لطفا نحوه خروجی گرفتن یا همون Apk رو در فلاتر اموزش بدید و همینطور ک چطور روی nox اجراش کنیم

سلام
شیوه ایجاد فایل اجرایی بسته به این که از چه پلتفرمی برای نوشتن اپ خودتان استفاده می‌کنید، متفاوت خواهد بود؛ اما اگر از روش معرفی شده در این آموزش و اندروید استودیو استفاده می‌کنید، می‌توانید با وارد کردن دستور flutter build apk در خط فرمان، فایل اجرایی اپلیکیشن نهایی خود را تولید کنید. در مورد استفاده از nox می‌توانید با اتصال آن به اندروید استودیو از آن به جای ایمولاتور پیش‌فرض استودیو استفاده کنید و یا این که فایل‌های نهایی تولید شده را در آن اجرا کنید.

سلام لطفا این فریم ورک رو توی لیست اموزش هاتون قرار بدید از 0 تا 100

عالی .. هم ترجمه روان و هم انتخاب آموزش مناسب
برای معرفی، آموزش وزین و مرتبی انتخاب شده و اونهایی که مخصوصا به زبان انگلیسی مسلط نیستند رو از اون پیچیدگی سایت flutter.io راحت میکنه.
و تشکر از اینکه مثل خیلی سایتهای دیگه گوگل ترنسلیت نکردید.

سلام عالی بود
جای یک آموژش پروژه محور در سایت تون خالیه
الان دیگه همه جای دنیا فلاتر رو میشناسن و اموزش میدن
بهتره منابع فارسی هم عقب نمونن
موفق باشید

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *