فلاتر چیست؟ ساخت اپلیکیشن اندروید و iOS با یک کد؛ راهنمای سبزوار

می‌خواهید اپلیکیشنی بسازید که هم روی گوشی اندرویدی کار کند و هم روی آیفون؛ ولی دو بار هم کدنویسی نمی‌خواهید بکنید. فلاتر دقیقاً برای همین ساخته شده است.

فلاتر و Dart چه هستند؟

فلاتر ابزار ساخت اپلیکیشن است که شرکت گوگل ارائه کرده و Dart زبان برنامه‌نویسی آن است. با یک مجموعه کد می‌توانید اپلیکیشن اندروید و iOS بسازید. صفحه‌ها در فلاتر از قطعه‌هایی به اسم ویجت ساخته می‌شوند: دکمه، متن، تصویر، فرم و لیست، که مثل لگو روی هم قرار می‌گیرند.

یک مثال ساده

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Hello')),
        body: const Center(child: Text('My first app')),
      ),
    );
  }
}

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

با فلاتر چه چیزی می‌شود ساخت؟

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

فلاتر و ساخت جداگانه‌ی اپلیکیشن، چه فرقی دارند؟

قبل از فلاتر چه چیزی بلد باشیم؟

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

مسیر یادگیری فلاتر

1. زبان Dart: متغیر، تابع، کلاس و برنامه‌نویسی ناهمگام.
2. ویجت‌ها و طراحی صفحه: چیدمان، دکمه، فرم و لیست.
3. مدیریت وضعیت: نگه داشتن داده‌ها در اپلیکیشن‌های بزرگ‌تر.
4. اتصال به سرور: خواندن داده از API و نمایش آن.
5. ذخیره‌سازی و امکانات گوشی: دوربین، اعلان و موقعیت مکانی.
6. انتشار: ساخت خروجی و آماده‌سازی برای مارکت‌ها.

اشتباه‌های تازه‌کارها

• شروع از یک اپلیکیشن خیلی بزرگ. بهتر است اول یک اپلیکیشن کوچک ولی کامل بسازید.
• کپی کردن کد بدون فهمیدن اینکه هر ویجت چه کاری می‌کند.
• نادیده گرفتن حالت خطا؛ مثلاً وقتی اینترنت قطع است اپلیکیشن چه نشان بدهد.

دو نوع ویجت؛ ثابت و پویا

ویجت‌هایی که شکلشان هیچ‌وقت عوض نمی‌شود، مثل یک عنوان ثابت، StatelessWidget هستند. وقتی چیزی روی صفحه تغییر می‌کند، مثل شمارنده یا یک فرم، به ویجتی با وضعیت (StatefulWidget) نیاز دارید. هر بار که وضعیت را عوض می‌کنید، فلاتر همان بخش را دوباره می‌کشد:

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});
  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => setState(() => count++),
      child: Text('Clicked $count times'),
    );
  }
}

اتصال اپلیکیشن به سرور

بیشتر اپلیکیشن‌ها اطلاعاتشان را از یک سرور می‌گیرند: لیست محصولات، پیام‌ها، سفارش‌ها. سرور این اطلاعات را معمولاً به شکل JSON می‌فرستد و اپلیکیشن آن را می‌خواند و روی صفحه نشان می‌دهد. نکته‌ی مهم این است که اینترنت ممکن است قطع باشد، پس همیشه سه حالت را در نظر بگیرید: در حال بارگذاری، موفق و خطا.

مدیریت وضعیت؛ چرا لازم می‌شود؟

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

انتشار اپلیکیشن

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

پروژه‌های تمرینی

• یک لیست کارها با افزودن، حذف و علامت‌گذاری.
• اپلیکیشن نمایش دوره‌ها یا محصولات از یک API.
• اپلیکیشن یادداشت با ذخیره‌ی اطلاعات روی گوشی.
• اپلیکیشنی که از دوربین یا موقعیت مکانی استفاده می‌کند.

هر کدام از این‌ها وقتی تمام شود یک نمونه‌کار واقعی است و اگر آن را منتشر کنید، برای کارفرما از هر توضیحی قانع‌کننده‌تر است.

سؤال‌هایی که تازه‌کارها زیاد می‌پرسند

کامپیوتر قوی لازم دارم؟

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

برای iOS هم باید کد جداگانه بنویسم؟

نه، همان کد اصلی برای هر دو سیستم کار می‌کند. فقط برای ساخت خروجی iOS به ابزارهای ساخت مخصوص آن سیستم نیاز دارید.

Dart سخت است؟

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

فلاتر به درد کار واقعی می‌خورد؟

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

فلاتر را در سبزوار حضوری یاد بگیرید

دوره‌ی فلاتر الکترا ۴۸ جلسه و ۷۲ ساعت است و همین مسیر را قدم‌به‌قدم می‌رود. اگر اپلیکیشنتان به سرور و API نیاز دارد، دوره‌ی لاراول هم می‌تواند بخش سرور را برایتان بسازد. با ۰۹۳۰۹۱۱۸۵۵۸ تماس بگیرید تا سطحتان را رایگان بسنجیم.