نوشتن اولین برنامه در فلاتر بخش 1

Animated GIF of the app that you will be building.

ما در این قسمت شما را تا نوشتن اولین برنامه خود در فلاتر یاری خواهیم کرد. در صورتیکه با مفاهیم شئ گرایی، مفاهیم برنامه نویسی نظیر متغیرها، حلقه ها، شرط ها آشنایی دارید شما می توانید این این دوره را به آسانی پشت سر گذاشته و نیازی به دانش زبان دارت و تجربه ی برنامه نویسی موبایل ندارید.

این بخش قسمت اول این آموزش است که برای آموزش بخش بعد می توانید به part 2 مراجعه کنید.

چیزهایی که در بخش 1 آموزش خواهید ساخت

یک اپلیکیشن که برای یک استارتاپ تولید نام می کند را خواهید ساخت. که در آن کاربر می تواند هریک از نام های را به دلخواه انتخاب کرده و بهتیرین را ذخیره کند. و نام ها خیلی آرام همزمان با اسکرول کردن شما ساخته خواهند شد و هیچ محدودیتی برای اینکه کاربر تا کجا می تواند اسکرول کند نخواهد بود.

در گیف روبرو کامل شدهی اپلیکیشن در بخش 1 را می توانید مشاهده کنید.

چیزهایی که در بخش 1 خواهید آموخت

  • چگونگی نوشتن اپ با فلاتر با ظاهری مشابه در آندروید و IOS
  • ساختار پایه یک اپلیکیشن فلاتر
  • یافتن و استفاده از پکیج ها برای گسترش کارایی
  • استفاده از hot reload برای توسعه سریع اپلیکیشن در فلاتر
  • نحوه اجرای یک ویدجت stateful
  • نحوه ایجاد یک لیست بی نهایت و آرام اجراشونده

در بخش 2 شما نحوه ی افزودن کارایی به اپلیکیشن و پیمایش به صفحات دیگر و مسیریابی در فلاتر و تغییر ظاهر قالب اپلیکیشن را خواهید آموخت.

چیزهایی که استفاده خواهید کرد

شما در این بخش به دو چیز نیاز دارید Flutter SDK و ویرایشگر کد که ما پیش فرض اینکه شما از آندرویید استادیو استفاده می کنید به شما آموزش خواهیم داد.

شما برای اجرای این اپلیکیشن می توانید از هریک از پلتفرم های زیر استفاده کنید.

گام 1: ایجاد استارتر اپلیکیشن فلاتر

با استفاده از دستورات موجود در شروع نوشتن ائلین اپلیکیشن با فلاتر اولین اپلیکیشن خود را در فلاتر بسازید. نام پروژه را بجای myapp، startup_namer قرار دهید

در این آزمایشگاه کد شما جاهایی که فایل lib/main.dart هست را به آسانی می توانید ویرایش کنید.

  1. تمام کدهای موجود در مسیر lib/main.dart را حذف کنید و کدهای زیر بجای آن قرار دهید. که در این صورت "Hello World" را خواهید دید.

    import 'package:flutter/material.dart';
    
      void main() => runApp(MyApp());
    
      class MyApp extends StatelessWidget {
        
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
              appBar: AppBar(
                title: Text('Welcome to Flutter'),
              ),
              body: Center(
                child: Text('Hello World'),
              ),
            ),
          );
        }
      }
      
  2. در نرم افزار با کلیک برروی دکمه فلش سبز رنگ Run the app آن را اجرا کنید. بسته به وسیله مورد نظرتان باید خروجی های اندرویید یا ios زیر را ببینید. Run the app by clicking

    screenshot of hello world app on Androidscreenshot of hello world app on iOS
    Android (left) and iOS (right)

مشاهدات

  • این مثال اپلیکیشن متریال برای شما ایجاد خواهد کرد. که متریال زبان طراحی بصری است که استانداردهای مختلفی برای وب و نرم افزار موبایل دارد. فلاتر مجموعه ای از ویدجت های متریال را در خود دارد.
  • متد main در این مثال با => مشخص شده چون توابع تک خطی را را می توان ار این نماد استفاده کرد.
  • این اپ از یک ویدجت StatelessWidget ارث برده است که خ,د اپ را بخه یک ویدجت تبدیل می کند. در فلاتر تقریبا همه چیز یک ویدجت است حتی padding و layout
  • ویدجت Scaffold از کتابخانه متریال یک اپ بار برای اپلیکیشن ایجاد می کند که می توانید در تمامی صفحات از آن استفاده کنید.
  • وظیفه ی اصلی ویدجت این است که یک متد build() ایجاد می کند که نحوه نمایش ویدجت و شاخه های زیر آن را تعیین می کند.
  • بدنه در این مثال تشکیل شده از یک ویدجت Center، متشکل از یک ویدجت Text و که شاخه های زیرین درخت ویدجت را در وسط منظم می کند.

گام 2: استفاده از پکیج های بیرونی

در این مثال شما از یک پکیج متن باز به اسم english_words استفاده می کنید که شامل هزاران لغت بیشتر بکاربرده شده در انگلیسی به همراه تعدادی ابزار است.

شما می توانید سایر پکیج های متن باز را از طریق این لینک pub.dartlang.org بدست آورید.

  1. فایل pubspec دارایی ها و پکیج های وابسته نرم افزار را مدیریت می کند. در این فایل english_words (3.1.0 or higher) را اضافه کنید. دقیقا خط مشخص شده را در آن بنویسید.

    dependencies:
        flutter:
          sdk: flutter
    
        cupertino_icons: ^0.1.0
        english_words: ^3.1.0
  2. پس از افزودن پکیج به فایل pubspec در اندرویید استدیو خود باید دکمه را Packages get را بزنید تا آن را دریافت کند و به پروژه شما اضافه کند. نهایتا باید نتیجه زیر را در کنسول خود مشاهده کنید:

    > flutter packages get
      Running "flutter packages get" in startup_namer...
      Process finished with exit code 0
      

    انجام دستور Packages get کتابخانه هایی را که احتیاج دارید همراه با ورژن های آن ها به پروژه اضافه می کند.

  3. در مسیر lib/main.dart پکیج جدید را ئارد کنید.

    import 'package:flutter/material.dart';
      import 'package:english_words/english_words.dart';

    همانطور که شما در آندرویید استدیو تایپ می کند کتابخانه های مختلفی را به شما پیشنهاد می دهد. در صورتیکه کتابخانه ای را وارد پروژه کرده باشید و از آن در کدها استفاده نکنید آن را به رنگ خاکستری نمایش می دهد که بدانید تاکنون از این پکیج و یا کتابخانه ای استفاده ای نبرده اید.

  4. از پکیج کلمات انگلیسی بجای استفاده از "Hello world" برای ساخت متن استفاده کنید.

    تغییرات زیر را انجام دهید:

    import 'package:flutter/material.dart';
      import 'package:english_words/english_words.dart';
    
      void main() => runApp(MyApp());
    
      class MyApp extends StatelessWidget {
        
        Widget build(BuildContext context) {
          final wordPair = WordPair.random();
          return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
              appBar: AppBar(
                title: Text('Welcome to Flutter'),
              ),
              body: Center(
                //child: Text('Hello World'), // Replace the highlighted text...
                child: Text(wordPair.asPascalCase),  // With this highlighted text.
              ),
            ),
          );
        }
      }
  5. درصورتیکه که اپلیکیشن شما در حال اجراست از hot reload استفاده کنید (lightning bolt icon) که تغییرات را در اپلیکیشن خیلی سریع مشاهده کنید. با هربار کلیک برروی hot reload شما اپلیکیشن را یکبار ذخیره می کنید و باید جفت کلمات جدید ببینید. به این ذلیل است که برای ساخت کلمات جدید باید متد این کتابخانه هربار فرخوانی شده تا جفت کلمات جدیدی را نمایش دهد.

    screenshot at completion of second step in Android screenshot at completion of second step in iOS
    Android (left) and iOS (right)

مشکلات

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


گام 3: افزودن ویدجت Stateful

ویدجت های Stateless غیرقابل تغییر هستد به این معنا که تنظیمات آن ها را نمی توان مداما تغییر داد و تمامی مقادیر final هستند.

ویدجت های فلان وضعیتشان در طول عمر ئویدجت تغییر می کند. برای اجرای یک .ویدجت Stateful حداقل به دو کلاس احتیاج داریم کلاس اول برای که نمونه می سازد و کلاس دوم State class نام دارد. کلاس اول که Stateful است به تنهایی تغییرناپذیر است اما کلاس state در طول عمر ویدجت وجود دارد.

در این گام شما یک ویدجت stateful به نام RandomWords اضافه می کنید که کلاس State را RandomWordsState می سازد. سپس شما از RandomWords به عنوان فرزندی درون ویدجت MyApp استفاده خواهید کرد.

  1. یک کلاس state ایجاد کنید و کد زیر را به آخر فایل main.dart اضافه کنید.

    class RandomWordsState extends State<RandomWords> {
        // TODO Add build method
      }

    به نوشتن state این اپ دقت کنید که بصورت State<RandomWords> نوشته شده است در زبان دارت این نوع نگارش نشان از generic دارد که این state کلمات State<RandomWords> بوجود آمده توسط اپ که در حین اسکرول کردن و کاربر برای کلمات مورد علاقه (بخش 2) روی آیکون قلب می زند را ذخیره می کند.

    RandomWordsState به کلاس RandomWords بستگی دارد. که بعدا به آن اضافه خواهید کرد.

  2. ویدجت stateful RandomWords را به فایل main.dart اضافه کنید.

    class RandomWords extends StatefulWidget {
        
        RandomWordsState createState() => new RandomWordsState();
      }

    پس از افزودن کلاس state ویرایشگر کد شماپیغام می دهد که متد build را جا انداختید. پس از آن شما یک متد build را خواهید افزود که جفت کلمات را با انتقال کد کلمات ساخته شده از MyApp به RandomWordsState می سازد.

  3. متد build() را به RandomWordsState اضافه کنید.

    class RandomWordsState extends State<RandomWords> {
        
        Widget build(BuildContext context) {
          final wordPair = WordPair.random();
          return Text(wordPair.asPascalCase);
        }
      }
  4. کد ساخت کلمه را از MyApp حذف کنید.

    class MyApp extends StatelessWidget {
        
        Widget build(BuildContext context) {
          final wordPair = WordPair.random();  // Delete this line
    
          return MaterialApp(
            title: 'Welcome to Flutter',
            home: Scaffold(
              appBar: AppBar(
                title: Text('Welcome to Flutter'),
              ),
              body: Center(
                //child: Text(wordPair.asPascalCase), // Change the highlighted text to...
                child: RandomWords(), // ... this highlighted text
              ),
            ),
          );
        }
      }
  5. اپ را راه اندازی مجدد کنید اپلیگیشن باید همانند قبل اجرا شود و هربار که hot reload می کنید یک کلمه را نشان دهد.

مشکلات

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


گام 4: ساخت یک ListView با اسکرول بی نهایت

در این مرحله RandomWordsState را توسعه می دهیم تا لیستی از کلمات ساخته شده را نمایش بدهد. و زمانی زمانی که کاربر اسکرول می کند لیست در یک ListView به نمایش در می آید و آرام آرام نام های پیشنهادی را نمایش می دهد. سازنده builder است که باعث آرام آرام نمایش دادن اسامی می شود

  1. یک لیست _suggestions به کلاس RandomWordsState اضافه کنید تا کلمات پیشنهادی را ذخیره کند. و همچنین یک متغیر تغیر فونت به آن بدهید تا سایز فونت را بزرگتر کند.

    class RandomWordsState extends State<RandomWords> {
        final _suggestions = <WordPair>[];
    
        final _biggerFont = const TextStyle(fontSize: 18.0);
        ...
      }

    اکنون تابع _buildSuggestions() را به کلاس RandomwordsState اضافه کنید. این متد یک ListView می سازد که جفت کلمات پیشنهادی را نمایش می دهد.

  2. تابع _buildSuggestions() را به کلاس RandomWordsState اضافه کنید.(کامنت ها را در صورت لزوم حذف کنید.)

    class RandomWordsState extends State<RandomWords> {
        ...
        Widget _buildSuggestions() {
          return ListView.builder(
            padding: const EdgeInsets.all(16.0),
            // itemBuilder برای هر جفت کلمه یکبار فراخوانی میشود، 
            // و هر کلمه پیشنهادی را در یک سطر ListTile قرار می دهد.
            // برای سطرهای زوج تابع یک ListTile به سطر جفت کلمه اضافه می کند. 
            // برای سطرهای فرد تابع بک ویدجت Divider اضافه می کند که بهتر قابل دیدن شود.
            // این ویدجت به لحاظ بصری ورودی ها را جدا می کند. توجه داشته باشید این تقسیم کننده 
            // ممکن است در صفحات نمایش کوچک به درستی قابل دیدن نباشد.
            itemBuilder: (context, i) {
              // یک ویدجت تقسیم کننده one-pixel-high پیش از هر سطر در ListView اضافه کنید.
              if (i.isOdd) return Divider();
    
              // "i ~/ 2" در این قسمت i بر 2 تقسیم می شود و حصل صحیح آن را برمی گرداند.
              // به طور مثال برای اعداد 1و 2و3و 4و 5 حاصل می شود 0و 1و 1و 2و 2
              // که تعداد واقعی جفت کلمات را در ListView محاسبه می کند 
              // و منهای ویدجت های تقسیم کننده می کند.
              final index = i ~/ 2;
              // اگر به انتهای جفت کلمات برسید ...
              if (index >= _suggestions.length) {
                // ... سپس 10 تای دیگر می سازد و به لیست کلمات پیشنهادی اضافه ی کند.
                _suggestions.addAll(generateWordPairs().take(10));
              }
              return _buildRow(_suggestions[index]);
            }
          );
        }
      }

    تابع _buildSuggestions() برای هر جفت کلمه یکبار _buildRow() را فراخوانی می کند. این تابع هر جفت کلمه را در یک ListTile نمایش می دهد که به شما اجازه هر سطر را در مرحله بعدی بصورت جذابتری درآورید.

  3. یک تابع _buildRow() به RandomWordsState اضاقه کنید.

    class RandomWordsState extends State<RandomWords> {
        ...
    
        Widget _buildRow(WordPair pair) {
          return ListTile(
            title: Text(
              pair.asPascalCase,
              style: _biggerFont,
            ),
          );
        }
      }
  4. متد build را برای _buildSuggestions() بروز کنید تا نیازی به فراخوانی مستقیم کتابخانه کلمات نباشد. (Scaffold ظاهر گرافیکی متریال را اجرا می کند.)

    class RandomWordsState extends State<RandomWords> {
        ...
        
        Widget build(BuildContext context) {
          final wordPair = WordPair.random(); // Delete these two lines.
          return Text(wordPair.asPascalCase);
          return Scaffold (
            appBar: AppBar(
              title: Text('Startup Name Generator'),
            ),
            body: _buildSuggestions(),
          );
        }
        ...
      }
  5. متد build را برای MyApp آپدیت کنید و عنوان صفحه و خانه را تغییر دهید.

    کد اصلی را با قسمت های های لایت شده بصورت زیر جابجا کنید:

    class MyApp extends StatelessWidget {
        
        Widget build(BuildContext context) {
          return MaterialApp(
            title: 'Startup Name Generator',
            home: RandomWords(),
          );
        }
      }
  6. اپ را restart کنید شما باید لیستی از جفت کلمات را تا جایی که اسکرول می کنید ببینید.

    screenshot at completion of fourth step in Androidscreenshot at completion of fourth step in iOS
    Android (left) and iOS (right)

مشکلات

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


گام های بعدی

Animated GIF of the app that you will be building.
گام 2 پیاده سازی اپ

تبریک میگم!

شما توانستید اولین اپ خود را با استفاده از فلاتر برای هردو سیستم عامل اندروید و ios بنویسید. مواردی که در این آزمایشگاه کد به آن ها دست یافتید:

  • ساخت اپ فلاتر از صفر
  • کد دارت نوشته شده
  • اجرای یک کتابخانه خارجی
  • استفاده از hot reload برای سیکل توسعه سریع
  • اجرای یک ویدجت stateful
  • ساخت لیست بی نهایت با اجرای کند
  • اجرای آیکون قلب برای ذخیره سازی کلمات مورد پسند
  • پیمایش به یک صفحه به صفحه جدید
  • تغییر رنگ تم و ساخت یک اپ تماما سفید

بیشتر بدانید