آموزش Flutter : ساخت اولین اپلیکیشن

نوامبر 28, 2018| علی شیرالی
ساخت اولین اپلیکیشن با فلوتر | آموزش فلوتر | اندروید ریور

در این مقاله می آموزید چگونه اولین اپلیکیشن خود را با استفاده از Flutter در اندروید استدیو بسازید . با فلاتر تنها به دانش پایه و مقدماتی برنامه نویسی و آشنایی های مقدماتی با برنامه نویسی شئ گرا نیاز دارید . همه چیز بسیار ساده و آسان است. برای یافتن دیگر مقالات آموزشی مرتبط ، تگ فلاتر رو در وبلاگ مارکت اندروید ریور دنبال کنید.

آموزش برنامه نویسی اندروید با Flutter

معرفی اپلیکیشن نهایی و شروع برنامه نویسی بر پایه فلاتر

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

شروع برنامه نویسی با فلاتر و ساخت اپلیکیشن

خب برای ساخت یک پروژه جدید از طریق منوی File و انتخاب گزینه New Flutter Project اقدام کنید بعد Flutter application را انتخاب و نکست بزنید تا پروژه ساخته شود.

حالا به این مسیر در پروژه ساخته شده خود بروید  lib/main.dart و کلیه کد های درون فایل main.dart رو حذف و با کد هایی که در زیر قرار دادیم جایگزین کنید ، این برای ساخت یک اکتیویتی آغازین Hello World مانند همه اولین اپلیکیشن های دیگر است :

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  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'),
        ),
      ),
    );
  }
}

حالا پروژه خود را Run کنید تا ببینید همه چیز درست کار می کند ، حالا شما یک اپلیکیشن چند سکویی ( قابلیت اجرا روی اندروید و iOS ) دارید.

ایجاد آیتم های لیست ویو
1 – در این گام نیاز است از یک پروژه اوپن سورس برای تولید اتوماتیک نام های برند استفاده کنیم که از وب سایت رسمی زبان دارت که پایه و اساس Flutter است دریافت کنید : مشاهده این پکیج
با دریافت این پکیج پروژه قابلیت تولید کلمات یا نام های انگلیسی به همراه کاربرد های دیگر به پروژه شما اضافه می شود.
2 – برای اضافه کردن پکیج بالا کافیست به فایل pubspec.yaml پروژه خود خطوط زیر را اضافه کنید :

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

3 – سپس کافیست بر روی Packages get کلیک کنید تا این پکیج به پروژه شما توسط اندروید استدیو اضافه شود.

4 – حالا در فایل main.dart خود پکیج رو با اضافه کردن خط import 'package:english_words/english_words.dart';
ایمپورت کنید

ساخت لیست ویو و استفاده از آیتم ها

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

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

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

class MyApp extends StatelessWidget {
  @override
  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.
        ),
      ),
    );
  }
}

کار هنوز تمام نشده و با اجرا اپلیکیشن می بینید که بجای Hello World قبلی عبارت دیگری روی صفحه پدیدار می شود.

همچنین بخوانید :  آموزش بازکردن لینک در مرورگر در سورس اندروید

یک Stateful Widget ایجاد کند
برای نمایش کلمات در قالب یک لیست ویو باید ویجت Stateful ایجاد کنید در این ویجت ویژگی ها غیر قابل تغییر و ثابت هستند یعنی نمی توانید در Properties آن تغییراتی ایجاد کنید. برای ساخت این ویجت تعریف دو کلاس نیاز است که در ادامه به آن می پردازیم .
خب حالا باید یک کلاس در فایل main.dart پروژه خود بسازید . دقیقا مانند جاوا با اضافه کردن این کد در انتهای فایل :

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

در این کلاس نام های انگلیسی به صورت دوتا ، دوتا کنار هم ( مثلا : LightGap ) قرار می گیرند و در این کلاس ذخیره می شوند.

حالا نیاز دارید تا کلاس نام های تصادفی را در فایل main.dart خود با جایگزاری کد زیر بسازید :

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

حالا اندروید استدیو به شما خطا میدهد از شما میخواهد متد Build را برای کلاس بالا بسازید. خب کافیست این متد را بسازید تا این خطا رفع شود . کد زیر را در فایل main.dart جایگزاری کنید. این متد قابلیت ساخت نام ها را به خود منتقل می کند :

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  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(wordPair.asPascalCase), // Change the highlighted text to...
          child: RandomWords(), // ... this highlighted text
        ),
      ),
    );
  }
}

ساخت لیست ویو با اسکرول بی نهایت
تقریبا بیشتر کار را انجام دادیم و حالا نیاز است تا یک لیست ویو برای جایگزاری مقادیر در آن بسازیم که در هنگام اسکرول کلمات جدیدی را تولید کند ، از طرفی اسکرول مقدار مشخصی نداشته باشد و به صورت بی نهایت بتوانیم به پایین اسکرول کنیم. برای این کار در کلاس RandomWordsState خود یک لیست _suggestions بسازید که کدها به این شکل می شوند :

class RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];

  final _biggerFont = const TextStyle(fontSize: 18.0);
  ...
}

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

همچنین بخوانید :  آموزش تغییر پکیج نیم Package Name در اندروید استدیو

حالا برای ساخت لیست ویو فانکشن _buildSuggestions() که یک ویجت یا ابزارک است را در کلاس RandomWordsState تعریف می کنیم و لیست ویو را می سازیم :

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

حالا فانکنش Buildrow_ رو به RandomWordsState اضافه کنید تا بتوانیم عناوین را تعریف و کنترل هایی رو روی تایتل ها اعمال کنید :

class RandomWordsState extends State<RandomWords> {
  ...

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
    );
  }
}

حالا متد build را باید به نحوی ینویسیم تا بتواند از نام های تولید شده استفاده کند . به این ترتیب کد این متد به این شکل می شود :

class RandomWordsState extends State<RandomWords> {
  ...
  @override
  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(),
    );
  }
  ...
}

در انتها نیز نام اپلیکیشن را انتخاب می کنیم ، این کار در کلاس آغازین اپلیکیشن انجام می شود و صفحه مین را تعریف می کنیم تا نام های پیشنهادی را به جای صفحه Hello World نمایش دهد که کد ها به این شکل می شود :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'تولید کننده نام برند',
      home: RandomWords(),
    );
  }
}

هووورا ! کار تمام است و شما اولین اپلیکیشن بر پایه فلاتر خود را در اندروید استدیو ساختید . حالا این اپلیکیشن هم قابلیت خروجی گرفتن برای اجرا روی سیستم عامل اندروید را داراست و هم می توانید برای iOS از اپلیکیشن خود خروجی بگیرید . بی نظیر نیست ؟

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

  خرید سورس های حرفه ای بازی و اپلیکیشن اندروید

  پیوستن به کانال تلگرام اندروید ریور

دسته‌ها: آموزش برنامه نویسی اندروید

دیدگاه

  • اینستاگرام ها
    نوامبر 29, 2018

    عالی بود دمتون گرم

دیدگاهتان را بنویسید

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