شروع فلاتر از صفر: نصب، اولین اپ و ساختار پروژه

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

#فلاتر دقیقاً چیست؟

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

#نصب

• SDK فلاتر را از سایت رسمی دانلود و پوشه‌اش را به PATH اضافه کنید.
• Android Studio را برای SDK اندروید و شبیه‌ساز نصب کنید (یا گوشی واقعی را با USB debugging وصل کنید).
• دستور زیر را اجرا کنید و تا وقتی همه موارد سبز نشده‌اند، مشکلات را رفع کنید:

flutter doctor

اگر دسترسی شما به سرورهای پیش‌فرض کند یا محدود است، می‌توانید با متغیرهای محیطی PUB_HOSTED_URL و FLUTTER_STORAGE_BASE_URL از یک میرور معتبر استفاده کنید.

#ساخت و اجرای اولین پروژه

flutter create my_app
cd my_app
flutter run

این سه خط یک اپ نمونه (شمارنده) می‌سازد و روی دستگاه متصل اجرا می‌کند. حالا فایل lib/main.dart را باز کنید. کوچک‌ترین اپ فلاتر این شکلی است:

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('سلام فلاتر')),
        body: const Center(child: Text('اولین اپ من')),
      ),
    );
  }
}

#ساختار پروژه

• lib/: تمام کد Dart شما؛ نقطه شروع main.dart است.
• pubspec.yaml: نام پروژه، نسخه، وابستگی‌ها (پکیج‌ها)، فونت‌ها و تصاویر.
• android/، ios/، web/، windows/: پوسته‌ی هر پلتفرم؛ معمولاً فقط برای تنظیمات و انتشار سراغشان می‌روید.
• test/: تست‌ها.

#همه چیز Widget است

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

#Hot Reload، بزرگ‌ترین مزیت

بعد از تغییر کد، کلید r (یا ذخیره در IDE) تغییر را در کمتر از یک ثانیه و بدون از دست رفتن وضعیت اپ نشان می‌دهد. R یا Hot Restart اپ را از اول اجرا می‌کند و وقتی به کار می‌آید که ساختار state را عوض کرده‌اید.

#قدم بعدی

بعد از اجرای اولین اپ، سراغ سه موضوع بروید: چیدمان (Row، Column، Expanded)، ناوبری بین صفحه‌ها، و مدیریت state. اگر این سه را خوب یاد بگیرید، بیشتر اپ‌های واقعی را می‌توانید بسازید.