ایجاد اولین اپلیکیشن فلاتر (Flutter)

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

قبل از شروع، اطمینان حاصل کنید که Android Studio به درستی نصب شده و پلاگین‌های Flutter و Dart فعال هستند.

مرحله 1: Android Studio را باز کنید.

مرحله 2: پروژه Flutter را ایجاد کنید. برای ایجاد پروژه به مسیر File-> New-> New Flutter Project بروید. تصویر زیر به درک واضح تر کمک می کند. پس از انتخاب New Flutter Project، اطمینان حاصل کنید که Flutter SDK Path درست مشخص شده است. اگر مسیر SDK پیش‌تر تنظیم نشده باشد، باید آن را به صورت دستی وارد کنید.

مرحله 3: در ویزارد بعدی، باید برنامه Flutter را انتخاب کنید. برای این کار، Flutter Application را انتخاب نمایید و روی Next کلیک کنید.

مرحله 4: در مرحله بعد، جزئیات برنامه را همانطور که در صفحه زیر نشان داده شده است پیکربندی کنید و روی دکمه Next کلیک کنید. ورودی‌هایی مانند Project Name, Project Location, و Description را با دقت پر کنید تا مشکلاتی در مراحل بعدی ایجاد نشود.

    Project Name: Write your Application Name.
    Flutter SDK Path: 
    Project Location: 
    Descriptions: .
    

مرحله 5: در ادامه، باید نام دامنه شرکت را تنظیم و روی دکمه Finish کلیک کنید.

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

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

.idea: این پوشه در بالای ساختار پروژه قرار دارد که پیکربندی اندروید استودیو را در خود جای داده است. البته دانستن این مفهوم مهم نیست چون قرار نیست با اندروید استودیو کار کنیم و محتوای این پوشه نادیده گرفته می شود.

.android: این پوشه یک پروژه کامل اندروید را در خود جای می دهد و در هنگام ساخت اپلیکیشن Flutter برای اندروید استفاده می شود. هنگامی که کد فلاتر کامپایل می شود، به پروژه اندرویدی تزریق می شود تا نتیجه یک برنامه اندرویدی باشد. به عنوان مثال: هنگامی که از شبیه ساز اندروید استفاده می کنید، از این پروژه اندروید برای ساخت برنامه اندروید استفاده می شود که بیشتر در دستگاه مجازی اندروید مستقر میگردد.

.ios: این پوشه یک پروژه کامل مک را در خود جای می دهد و هنگام ساخت اپلیکیشن Flutter برای iOS استفاده می شود. در واقع شبیه به پوشه اندرویدی است که هنگام توسعه یک برنامه برای اندروید استفاده می شود. هنگامی که کد Flutter کامپایل می شود، به این پروژه iOS تزریق می شود، به طوری که نتیجه یک برنامه بومی iOS است. ساخت اپلیکیشن Flutter برای iOS تنها زمانی امکان پذیر است که روی macOS کار می کنید.

.lib: یک پوشه ضروری است که مخفف کتابخانه است. این پوشه ای است که در آن 99 درصد کار پروژه خود را انجام خواهیم داد. در داخل پوشه lib، فایل های Dart را پیدا می کنیم که حاوی کد برنامه Flutter ما هستند. به طور پیش فرض، این پوشه حاوی فایل main.dart است که فایل ورودی برنامه Flutter است.

.test: این پوشه حاوی یک کد Dart است که برای برنامه Flutter نوشته شده است تا تست خودکار را هنگام ساخت برنامه انجام دهد. اینجا قسمت برای ما خیلی مهم نخواهد بود.

همچنین می‌توانیم چند فایل پیش‌فرض در برنامه Flutter داشته باشیم. در 99.99 درصد موارد، ما این فایل ها را به صورت ملموس نمی بینیم. این فایل ها عبارتند از:

.gitignore: یک فایل متنی حاوی لیستی از فایل ها، پسوند فایل ها و پوشه ها است که به Git می گوید کدام فایل ها باید در پروژه نادیده گرفته شوند. Git یک فایل کنترل نسخه برای ردیابی تغییرات در کد منبع در حین توسعه نرم افزار Git است.

.metadata: فایلی است که به صورت خودکار توسط ابزارهای flutter تولید می شود که برای ردیابی ویژگی های پروژه Flutter استفاده می شود. این فایل وظایف داخلی را انجام می دهد، بنابراین نیازی به ویرایش دستی محتوا به صورت مداوم ندارید.

.packages: این یک فایل است که به صورت خودکار توسط Flutter SDK تولید می شود، که برای حاوی لیستی از وابستگی ها برای پروژه Flutter شما استفاده می شود.

flutter_demoapp.iml: همیشه با توجه به نام پروژه Flutter که شامل تنظیمات اضافی پروژه است نامگذاری می شود. این فایل وظایف داخلی را انجام می دهد که توسط Flutter SDK مدیریت می شود، بنابراین نیازی به ویرایش دستی محتوا در هیچ زمانی ندارید.

pubspec.yaml: فایل پیکربندی پروژه است که در حین کار با پروژه Flutter استفاده زیادی می کند. این به شما امکان می دهد که بدانید برنامه شما چگونه کار کند. این فایل شامل:

• o Project general settings (تنظیمات کلی مانند نام، توضیحات و نسخه پروژه).
• o Project dependencies.
• o Project assets (e.g., images).

pubspec.lock: یک فایل است که به صورت خودکار ایجاد می شود و بر اساس فایل .yaml می باشد. این تنظیمات جزئیات بیشتری را در مورد همه وابستگی ها دارد.

README.md: فایلی است که به صورت خودکار تولید می شود و اطلاعات پروژه را در خود نگه می دارد. اگر بخواهیم اطلاعاتی را با توسعه دهندگان به اشتراک بگذاریم، می توانیم این فایل را ویرایش کنیم.

مرحله 7: فایل main.dart را باز کنید و کد را با قطعه کد زیر جایگزین کنید. کد پیشنهادی شما برای main.dart یک نمونه خوب برای شروع است و به خوبی اصول اولیه ساخت یک رابط کاربری با Flutter را نمایش می‌دهد. اطمینان حاصل کنید که توضیحات و کامنت‌ها در کد به خوبی بیان شده‌اند تا درک آن برای شخص جدید آسان باشد.

        import 'package:flutter/material.dart';  
          
        void main() => runApp(MyApp());  
          
        class MyApp extends StatelessWidget {  
          // This widget is the root of your application.  
          @override  
          Widget build(BuildContext context) {  
            return MaterialApp(  
              title: 'Hello World Flutter Application',  
              theme: ThemeData(  
                // This is the theme of your application.  
                primarySwatch: Colors.blue,  
              ),  
              home: MyHomePage(title: 'Home page'),  
            );  
          }  
        }  
        class MyHomePage extends StatelessWidget {  
          MyHomePage({Key key, this.title}) : super(key: key);  
          // This widget is the home page of your application.  
          final String title;  
          
          @override  
          Widget build(BuildContext context) {  
            return Scaffold(  
              appBar: AppBar(  
                title: Text(this.title),  
              ),  
              body: Center(  
                child: Text('Hello World'),  
              ),  
            );  
          }  
        }  
        

مرحله 8: اجازه دهید قطعه کد بالا را خط به خط بررسی کنیم.

برای شروع برنامه نویسی Flutter، ابتدا باید پکیج Flutter را وارد کنید. در اینجا، ما یک پکیج Material وارد کرده ایم. این پکیج به شما این امکان را می دهد که رابط کاربری را طبق دستورالعمل های طراحی متریال مشخص شده توسط اندروید ایجاد کنید.

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

خط 5 تا 18 ویجتی است که برای ایجاد رابط کاربری درفریم‌ورک Flutter استفاده می شود. در اینجا، StatelessWidget هیچ وضعیتی از ویجت را حفظ نمی کند. MyApp StatelessWidget را گسترش می دهد که ساخت آن را لغو می کند. روش ساخت برای ایجاد بخشی از رابط کاربری برنامه استفاده می شود. در این بلوک، روش ساخت از MaterialApp استفاده می‌کند، ویجتی برای ایجاد رابط کاربری سطح ریشه برنامه و شامل سه ویژگی title، themeو home است.

title: عنوان اپلیکیشن فلاتر است.

theme: موضوع ویجت است. به طور پیش فرض، آبی را به عنوان رنگ کلی برنامه تنظیم می نماید.

Home: رابط کاربری داخلی برنامه است که ویجت دیگری (MyHomePage) را برای برنامه تنظیم می کند.

در خط 19 تا 35، MyHomePage شبیه MyApp است، با این تفاوت که ویجت Scaffold Scaffold یک ویجت سطح بالا بعد از ویجت MaterialApp برای ایجاد رابط کاربری است. این ویجت شامل دو ویژگی appBar و body می باشد. AppBar هدر برنامه را نشان می دهد و ویژگی بدنه محتوای واقعی برنامه را نشان می دهد. در ادامه، AppBar سربرگ برنامه را اجرا می‌کند، ویجت مرکز برای وسط ویجت کودک و Text ویجت نهایی است که برای نمایش محتوای متن و نمایش در مرکز صفحه استفاده می‌شود.

مرحله 9: اکنون برنامه را اجرا کنید. برای انجام این کار، همانطور که در صفحه زیر نشان داده شده است، به Run->Run main.dart بروید.

مرحله 10: در نهایت، خروجی را مانند صفحه زیر دریافت خواهید کرد.

مرحله 9 و 10 برای اجرا و مشاهده خروجی برنامه هستند. این قسمت حیاتی است زیرا به شما امکان می‌دهد تا اطمینان حاصل کنید که همه چیز به درستی کار می‌کند.