إعداد تطبيق فلاتر من الصفر: لبناء أول مشروع احترافي

إذا كنت تقف الآن أمام فكرة إنشاء تطبيق Flutter جديد، فغالبًا أنت في نفس اللحظة التي مرّ بها كل مطوّر تقريبًا في بدايته: حماس كبير، وفضول أكبر، لكن أيضًا بعض التوتر من كثرة الأدوات والخطوات والأسماء التي تظهر فجأة أمامك. هل تحتاج إلى Android Studio؟ هل يكفي VS Code؟ هل يجب تثبيت Android SDK يدويًا؟ ماذا عن المحاكي؟ ولماذا يظهر التطبيق على الهاتف أحيانًا ولا يعمل على المحاكي؟ هذه الأسئلة كلها طبيعية جدًا، بل إنها علامة جيدة، لأنك بالفعل بدأت تفكر بالطريقة الصحيحة.

Flutter من أكثر الأطر التي جعلت بناء التطبيقات متعددة المنصات يبدو أقرب إلى المتعة منه إلى المعاناة. تكتب مرة واحدة، وتشغل على Android وiOS والويب وأحيانًا سطح المكتب، ومع ذلك لا تفقد الإحساس بالتحكم في التفاصيل. لكن لكي تصل إلى هذه الراحة، تحتاج أولًا إلى إعداد البيئة بشكل صحيح، ثم فهم هيكل المشروع، ثم تجربة تطبيق بسيط، وبعدها تبدأ الرحلة الحقيقية. هذا المقال مكتوب ليأخذ بيدك خطوة خطوة، ليس فقط لتثبيت Flutter، بل لتفهم ما الذي يحدث خلف الكواليس، وكيف تبدأ مشروعك بطريقة نظيفة ومنظمة، وكيف تتجنب أكثر الأخطاء شيوعًا التي يقع فيها المبتدئون.

ما هو Flutter ولماذا يفضله الكثير من المطورين؟

Flutter هو إطار عمل مفتوح المصدر من Google لبناء واجهات المستخدم. الفكرة الأساسية فيه بسيطة جدًا لكنها قوية للغاية: بدل أن تكتب تطبيقًا منفصلًا لكل منصة، يمكنك استخدام قاعدة كود واحدة تقريبًا وتستهدف منصات متعددة. Flutter يعتمد على لغة Dart، وهي لغة سهلة نسبيًا، سريعة في التعلم، ومناسبة جدًا لبناء واجهات تفاعلية حديثة.

السبب الحقيقي وراء حب الكثير من المطورين لـ Flutter لا يقتصر على "تطبيق واحد لكل المنصات". هناك عوامل أخرى مهمة جدًا. أولًا، الأداء ممتاز لأن Flutter يرسم الواجهة بنفسه بدل الاعتماد الكلي على عناصر النظام الأصلية. ثانيًا، نظام الـ hot reload يجعل تجربة التطوير سريعة وممتعة، لأنك ترى التغييرات مباشرة تقريبًا. ثالثًا، مجتمع Flutter ضخم، والوثائق الرسمية عادة واضحة ومفيدة. رابعًا، يمكنك بناء واجهات جميلة جدًا بتكلفة زمنية أقل مقارنة ببعض البدائل.

لكن رغم كل ذلك، البداية الصحيحة مهمة جدًا. كثير من الناس يظنون أن إعداد Flutter مجرد تنزيل حزمة وتشغيل أمر واحد. في الواقع، الإعداد الجيد يشمل التأكد من تثبيت كل المتطلبات، وضبط المسارات البيئية، وتجربة المشروع الأول، وفهم ملفات المشروع الأساسية، ثم التأكد من أن أجهزتك جاهزة للتطوير. إذا بنيت هذه الأساسيات بشكل سليم، ستتجنب ساعات طويلة من الحيرة لاحقًا.

المتطلبات الأساسية قبل البدء

قبل أن تبدأ، تأكد من توفر الأمور التالية:

1. جهاز يعمل بنظام Windows أو macOS أو Linux.

2. مساحة كافية على القرص.

3. اتصال جيد بالإنترنت لتنزيل Flutter وAndroid SDK والحزم.

4. محرر أكواد مثل VS Code أو Android Studio.

5. هاتف Android أو محاكي للتجربة.

6. روح صبر بسيطة، لأن أول إعداد دائمًا يستهلك بعض الوقت، وهذا طبيعي.

الأمر الجميل هو أنك لست بحاجة إلى جهاز خارق. Flutter يعمل جيدًا على أجهزة متوسطة، ما دام النظام مستقرًا وذاكرته مناسبة. المهم ليس القوة الخارقة، بل التنظيم الصحيح.

الخطوة الأولى: تثبيت Flutter SDK

Flutter SDK هو قلب كل شيء. بدون SDK لن تتمكن من إنشاء المشاريع أو تشغيلها أو بنائها. ستحتاج إلى تنزيل Flutter من الموقع الرسمي، ثم فك الضغط عنه في مكان مناسب على جهازك.

أين تضع Flutter؟

من الأفضل أن تضع Flutter في مسار واضح وغير معقد. على سبيل المثال:

• في Windows: C:\src\flutter

• في macOS أو Linux: ~/development/flutter

السبب في ذلك بسيط: عندما يكون المسار قصيرًا وواضحًا، تقل المشاكل المتعلقة بالأذونات أو المسارات الطويلة أو المسافات الغريبة في الاسم. كثير من المبتدئين يضعون Flutter داخل مجلدات عميقة جدًا ثم يواجهون مشاكل غير ضرورية.

ضبط PATH

بعد تنزيل Flutter وفك الضغط، يجب أن تضيف مسار مجلد bin إلى متغير البيئة PATH حتى تتمكن من استخدام أوامر Flutter من أي نافذة طرفية.

على Windows، يتم ذلك من إعدادات النظام الخاصة بالبيئة.
على macOS وLinux، غالبًا ستضيف السطر التالي إلى ملف مثل ~/.zshrc أو ~/.bashrc:

export PATH="$PATH:$HOME/development/flutter/bin"

ثم تنفذ:

source ~/.zshrc

أو:

source ~/.bashrc

الآن يمكنك اختبار التثبيت بكتابة:

flutter --version

إذا ظهر رقم الإصدار، فهذا جيد جدًا. لقد اجتزت أول خطوة حاسمة.

تشغيل فحص البيئة باستخدام flutter doctor

بعد التثبيت، من الأفضل ألا تندفع مباشرة لإنشاء تطبيق. بدل ذلك، استخدم أمر التشخيص الشهير:

flutter doctor

هذا الأمر من أهم الأوامر التي ستتعلمها في بداية رحلتك. هو لا يبني تطبيقًا، بل يفحص بيئتك ويخبرك ما الذي ينقصك. قد يظهر لك أنك تحتاج إلى Android Studio، أو Android SDK، أو قبول التراخيص الخاصة بالأندرويد، أو تثبيت أداة إضافية.

مثال على ما قد تراه:

[✓] Flutter (Channel stable, 3.x.x, on Windows 10 64-bit)
[!] Android toolchain - develop for Android devices
[✓] Chrome - develop for the web
[✓] Visual Studio Code
[!] Android Studio
[✓] Connected device

العلامة [✓] تعني أن كل شيء سليم.
العلامة [!] تعني أن هناك شيئًا يحتاج انتباهًا.
أحيانًا تكون المشكلة بسيطة جدًا، مثل عدم قبول تراخيص Android SDK.

لإصلاح التراخيص، استخدم:

flutter doctor --android-licenses

ثم وافق على التراخيص المطلوبة واحدة واحدة.

هذه الخطوة تبدو مملة قليلًا، لكنها من أفضل ما يمكنك فعله في البداية. لأنك عندما تنهي flutter doctor بدون أخطاء، تصبح لديك بيئة نظيفة ومستقرة، وهذا يختصر الكثير من الوقت لاحقًا.

تثبيت Android Studio أو VS Code

يمكنك استخدام Flutter مع محررين مختلفين، لكن الخيارين الأكثر شيوعًا هما Android Studio وVisual Studio Code.

Android Studio

Android Studio مفيد جدًا إذا كنت تريد كل شيء في مكان واحد: SDK Manager، Emulator، أدوات Android، وفحص الجهاز. لكنه ثقيل نسبيًا على بعض الأجهزة.

VS Code

VS Code خفيف وسريع ومحبوب لدى كثير من المطورين. ومع إضافات Flutter وDart يصبح ممتازًا جدًا للبرمجة اليومية.

كثير من المطورين يستخدمون مزيجًا من الاثنين: Android Studio لإدارة الـ SDK والمحاكي، وVS Code للكتابة اليومية. هذا خيار عملي جدًا.

إنشاء مشروع Flutter جديد

بعد أن أصبحت البيئة جاهزة، حان وقت إنشاء المشروع الأول. افتح الطرفية واكتب:

flutter create my_flutter_app

سيقوم Flutter بإنشاء مشروع كامل باسم my_flutter_app.
بعدها ادخل إلى المجلد:

cd my_flutter_app

ثم شغل التطبيق:

flutter run

إذا كان هناك جهاز متصل أو محاكي مفتوح، فسيبدأ التطبيق الافتراضي بالظهور. هذا هو أول انتصار حقيقي. ليس لأنه التطبيق النهائي، بل لأنك الآن تأكدت أن البيئة كلها تعمل من البداية إلى النهاية.

ما الذي يحتويه مشروع Flutter الجديد؟

عندما تنشئ مشروعًا جديدًا، ستلاحظ ملفات ومجلدات متعددة. أهمها:

my_flutter_app/
├── android/
├── ios/
├── lib/
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── pubspec.yaml
└── README.md

مجلد lib

هذا هو المكان الأهم بالنسبة لك كمطور. غالبًا ستكتب معظم كود Dart هنا، وخاصة داخل main.dart.

ملف pubspec.yaml

هذا الملف من أهم ملفات Flutter. هنا تضيف الحزم الخارجية، وتتعرف على الأصول مثل الصور والخطوط، وتضبط بعض تفاصيل المشروع.

مجلد android وios

يحتويان على إعدادات المنصات الأصلية. قد لا تحتاج إلى التعديل عليهما كثيرًا في البداية، لكن وجودهما مهم جدًا عند التخصيص أو البناء النهائي.

مجلد test

مخصص للاختبارات.

مجلد web وغيرها

Flutter يمكنه استهداف منصات متعددة، ولذلك ترى مجلدات خاصة بكل منصة.

فهم هذا الهيكل من البداية يجعلك تشعر أن المشروع ليس "سحرًا" غامضًا، بل بنية واضحة يمكنك التحكم فيها.

أول ملف Dart: main.dart

افتح الملف 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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text(
          'Count: $_counter',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

هذا المثال الافتراضي ممتاز للتعلم، لأنه يشرح لك مفاهيم أساسية جدًا مثل:

• main() نقطة البداية.

• runApp() لتشغيل التطبيق.

• MaterialApp لبناء التطبيق باستخدام تصميم Material.

• Scaffold لتكوين الصفحة.

• StatefulWidget عندما تريد واجهة تتغير.

لكن في البداية، لا تكتفِ بالحفظ. حاول أن تفهم الفكرة: Flutter يبني الواجهة من الـ widgets. كل شيء تقريبًا Widget. النص Widget، الصورة Widget، الزر Widget، وحتى ترتيب العناصر Widget. هذه الفلسفة هي سر قوة Flutter.

إنشاء أول واجهة بسيطة بنفسك

الآن لنكتب نسخة أبسط وأكثر وضوحًا. سنبني شاشة ترحيبية بسيطة تحتوي على عنوان ونص وزر.

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(
      debugShowCheckedModeBanner: false,
      title: 'My First Flutter App',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Welcome'),
        centerTitle: true,
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(
                Icons.flutter_dash,
                size: 100,
              ),
              const SizedBox(height: 20),
              const Text(
                'Hello Flutter!',
                style: TextStyle(
                  fontSize: 32,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 12),
              const Text(
                'This is your first simple Flutter screen.',
                textAlign: TextAlign.center,
                style: TextStyle(fontSize: 18),
              ),
              const SizedBox(height: 30),
              ElevatedButton(
                onPressed: () {
                  debugPrint('Button pressed');
                },
                child: const Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

هذا المثال يبدو بسيطًا، لكنه في الحقيقة يعلمك الكثير. لقد استخدمت StatelessWidget لأن الصفحة لا تحتاج إلى تغيير داخلي مستمر. واستخدمت Column لترتيب العناصر عموديًا. واستخدمت Padding لإعطاء مساحة جميلة حول المحتوى. واستخدمت ElevatedButton لإضافة تفاعل. كل هذه العناصر ستتكرر معك في تطبيقات كثيرة جدًا.

الفرق بين StatelessWidget وStatefulWidget

هذا الموضوع مهم للغاية، ومن الأفضل أن تفهمه بعمق منذ البداية.

StatelessWidget

يستخدم عندما تكون الواجهة ثابتة أو لا تعتمد على تغييرات داخلية كثيرة.
مثال: صفحة "حول التطبيق"، نص تعريفي، أو شاشة لا تحتاج لتحديث.

StatefulWidget

يستخدم عندما تتغير الواجهة بناءً على حدث أو قيمة داخلية.
مثال: عداد، نموذج إدخال، سلة مشتريات، تبديل بين الوضع الليلي والنهاري، أو أي تفاعل ديناميكي.

مثال بسيط على StatefulWidget:

import 'package:flutter/material.dart';

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

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

  void increment() {
    setState(() {
      count++;
    });
  }

  void decrement() {
    setState(() {
      count--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter'),
      ),
      body: Center(
        child: Text(
          'Count = $count',
          style: const TextStyle(fontSize: 30),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: increment,
            child: const Icon(Icons.add),
          ),
          const SizedBox(height: 10),
          FloatingActionButton(
            onPressed: decrement,
            child: const Icon(Icons.remove),
          ),
        ],
      ),
    );
  }
}

الجزء الأهم هنا هو setState(). عندما تتغير القيمة الداخلية، تخبر Flutter أن يعيد بناء الواجهة من جديد. وهذا يعيد رسم ما يجب رسمه فقط. فهم هذه الفكرة سيجعلك تشعر براحة أكبر عندما تبدأ ببناء صفحات أكثر تعقيدًا.

فهم pubspec.yaml

ملف pubspec.yaml هو قلب إدارة الحزم والأصول في المشروع. كثيرون يتعاملون معه على أنه ملف عابر، لكن الحقيقة أنه مهم جدًا. هنا تضيف المكتبات الخارجية، وتحدد الصور والخطوط، وتضبط بعض الإعدادات.

مثال:

name: my_flutter_app
description: A simple Flutter application.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^5.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/icons/

إذا أردت استخدام صورة في التطبيق، تضعها داخل مجلد مثل:

assets/images/logo.png

ثم تعلن عنها في pubspec.yaml كما رأيت. بعد ذلك يمكنك استخدامها في الكود:

Image.asset('assets/images/logo.png')

من الأخطاء الشائعة جدًا أن ينسى المطور مسافة indentation في YAML. ملف YAML حساس جدًا للمسافات. لذلك كن دقيقًا في ترتيب الأسطر والمسافات، لأن خطأ صغيرًا في المسافة قد يمنع التطبيق من العمل.

إضافة الحزم الخارجية

Flutter قوي بحد ذاته، لكن جماله الحقيقي يظهر أكثر مع الحزم الخارجية. هناك آلاف الحزم المفيدة التي تختصر عليك الوقت والجهد.

على سبيل المثال، إذا أردت تخزين بيانات بسيطة محليًا، قد تستخدم shared_preferences.
إذا أردت طلبات HTTP، قد تستخدم http أو dio.
إذا أردت إدارة الحالة، قد تستخدم provider أو riverpod أو bloc.

مثال على إضافة http:

dependencies:
  flutter:
    sdk: flutter
  http: ^1.2.2

ثم تنفذ:

flutter pub get

بعدها يمكنك استخدامها:

import 'package:http/http.dart' as http;

Future<void> fetchData() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    debugPrint(response.body);
  } else {
    debugPrint('Request failed');
  }
}

هذه الفكرة مهمة جدًا: لا تكتب كل شيء من الصفر إن لم تكن بحاجة فعلية لذلك. استخدم الحزم بحكمة، لأنها تجعل مشروعك أسرع في التطوير وأقل عرضة للأخطاء.

تشغيل التطبيق على هاتف حقيقي

أحيانًا يكون المحاكي بطيئًا أو لا يعطيك الإحساس الواقعي للتطبيق. هنا تأتي فائدة الهاتف الحقيقي. لتشغيل التطبيق على هاتف Android:

1. فعّل خيارات المطور على الهاتف.

2. فعّل USB debugging.

3. وصّل الهاتف عبر USB.

4. تأكد من ظهوره في:

flutter devices

إذا ظهر الجهاز، شغل التطبيق:

flutter run

هذه التجربة مفيدة جدًا، لأنها تكشف لك الفروقات بين المحاكي والجهاز الحقيقي. أحيانًا الواجهة تبدو جيدة على المحاكي لكن تحتاج تحسينًا بسيطًا على الهاتف الحقيقي، خاصة فيما يتعلق بالأحجام والتباعد وسرعة الاستجابة.

استخدام المحاكي Emulator

إذا لم يكن لديك هاتف متصل، فالمحاكي خيار ممتاز. يمكن إنشاؤه من Android Studio عبر Device Manager. بعد فتح المحاكي، ارجع للطرفية واكتب:

flutter devices

سترى الجهاز الافتراضي ظاهرًا. ثم نفذ:

flutter run

المحاكي مفيد جدًا أثناء التطوير السريع، لكن تذكر أن بعض المشاكل تظهر فقط على الهاتف الحقيقي، خصوصًا الأداء أو الأذونات أو الكاميرا أو التخزين. لذلك الأفضل ألا تعتمد على المحاكي وحده.

أهم أوامر Flutter التي يجب حفظها مبكرًا

ليس المطلوب أن تحفظ كل شيء، لكن هناك أوامر ستستخدمها باستمرار:

flutter create app_name

إنشاء مشروع جديد.

flutter run

تشغيل التطبيق.

flutter doctor

فحص البيئة.

flutter pub get

تنزيل الحزم.

flutter devices

عرض الأجهزة المتصلة.

flutter clean

تنظيف ملفات البناء المؤقتة.

flutter build apk

بناء نسخة APK للإصدار النهائي.

هذه الأوامر تشكل جزءًا كبيرًا من روتينك اليومي كمطور Flutter.

بناء صفحة رئيسية أفضل من البداية

بدل الصفحة الافتراضية البسيطة، دعنا نبني شاشة أكثر جمالًا. هذا المثال يعطيك فكرة عن تنظيم الواجهة في Flutter.

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(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Setup Guide',
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: const DashboardPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Dashboard'),
        centerTitle: true,
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          Container(
            padding: const EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: Colors.indigo.shade50,
              borderRadius: BorderRadius.circular(20),
            ),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Welcome back!',
                  style: TextStyle(
                    fontSize: 28,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  'Your Flutter environment is ready, and now you can start building real apps with confidence.',
                  style: TextStyle(fontSize: 16),
                ),
              ],
            ),
          ),
          const SizedBox(height: 20),
          Row(
            children: [
              Expanded(
                child: _InfoCard(
                  title: 'Setup',
                  subtitle: 'Done',
                  icon: Icons.check_circle,
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: _InfoCard(
                  title: 'Device',
                  subtitle: 'Connected',
                  icon: Icons.phone_android,
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          const _SectionTitle(title: 'Next Steps'),
          const SizedBox(height: 10),
          const _StepItem(
            text: 'Learn widgets and layouts deeply.',
          ),
          const _StepItem(
            text: 'Try navigation between screens.',
          ),
          const _StepItem(
            text: 'Connect your app to a real API.',
          ),
          const _StepItem(
            text: 'Add state management when needed.',
          ),
        ],
      ),
    );
  }
}

class _InfoCard extends StatelessWidget {
  final String title;
  final String subtitle;
  final IconData icon;

  const _InfoCard({
    required this.title,
    required this.subtitle,
    required this.icon,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        border: Border.all(color: Colors.grey.shade300),
      ),
      child: Column(
        children: [
          Icon(icon, size: 32, color: Colors.indigo),
          const SizedBox(height: 10),
          Text(
            title,
            style: const TextStyle(fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 4),
          Text(subtitle),
        ],
      ),
    );
  }
}

class _SectionTitle extends StatelessWidget {
  final String title;

  const _SectionTitle({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

class _StepItem extends StatelessWidget {
  final String text;

  const _StepItem({required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Icon(Icons.arrow_right, size: 24),
          const SizedBox(width: 8),
          Expanded(
            child: Text(
              text,
              style: const TextStyle(fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

هذا المثال يعطيك لمحة عن كيفية تقسيم الواجهة إلى Widgets صغيرة قابلة لإعادة الاستخدام. وهذه عادة ممتازة جدًا. كلما كتبت كودًا منظمًا، صارت الصيانة أسهل، وصار التطوير أسرع، وصار الخطأ أسهل في الاكتشاف.

تنظيم المشروع من البداية

من الأخطاء الشائعة أن يضع المطور كل شيء داخل main.dart. قد ينجح هذا في الأيام الأولى، لكن سرعان ما يصبح المشروع فوضويًا. الأفضل أن تنظّم الملفات بشكل معقول.

مثال على هيكل منظم:

lib/
├── main.dart
├── screens/
│   ├── home_screen.dart
│   ├── login_screen.dart
│   └── settings_screen.dart
├── widgets/
│   ├── custom_button.dart
│   └── custom_text_field.dart
├── models/
│   └── user_model.dart
└── services/
    └── api_service.dart

هذا الترتيب ليس قانونًا صارمًا، لكنه يساعد جدًا. عندما تكبر التطبيقات، تصبح الحاجة إلى التنظيم ضرورة وليست رفاهية. وأجمل ما في Flutter أنه يسمح لك ببناء بنية نظيفة دون تعقيد زائد، طالما كنت حريصًا من البداية.

إضافة التنقل بين الشاشات

لا يوجد تطبيق حقيقي تقريبًا يتكون من شاشة واحدة فقط. لذلك من المهم أن تتعلم التنقل.

مثال بسيط:

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(
      debugShowCheckedModeBanner: false,
      home: const FirstScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondScreen(),
              ),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(
        child: Text(
          'You are now on the second screen',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

هذا المثال بسيط جدًا، لكنه يمثل الفكرة الأساسية. لاحقًا قد تستخدم أسماء مسارات واضحة أو أنظمة تنقل أكثر تنظيماً، لكن فهم Navigator.push وNavigator.pop أولًا مهم جدًا.

التعامل مع الأخطاء الشائعة عند إعداد Flutter

كل مطور Flutter تقريبًا يواجه بعض المشاكل في البداية. والخبر المطمئن هنا أن أغلبها معروف وسهل الحل إذا عرفت السبب.

1) Flutter لا يظهر في الطرفية

غالبًا السبب هو عدم إضافة Flutter إلى PATH بشكل صحيح.

2) flutter doctor يظهر مشاكل في Android toolchain

قد تحتاج إلى تثبيت Android SDK أو قبول التراخيص.

3) المحاكي لا يعمل

قد يكون المحاكي غير مفعّل من إعدادات الـ BIOS أو يحتاج جهاز افتراضي جديدًا أو تعريفات معينة.

4) التطبيق لا يثبت على الهاتف

أحيانًا السبب بسيط مثل عدم تفعيل USB debugging أو وجود مشكلة في الكابل.

5) خطأ في pubspec.yaml

غالبًا يكون بسبب indentation أو اسم ملف غير صحيح.

6) التطبيق يعمل ثم يتوقف مع hot reload

أحيانًا تحتاج إلى flutter clean ثم:

flutter pub get
flutter run

هذه ليست نهاية العالم. بالعكس، هذه من طبيعة التطوير البرمجي. المهم ألا تشعر بالإحباط. كل خطأ صغير تتجاوزه الآن سيحميك من عشرات الأخطاء لاحقًا.

الفرق بين hot reload وhot restart

هذا موضوع جميل ومهم جدًا.

Hot reload

يُحدّث الواجهة بسرعة مع الحفاظ على الحالة الحالية غالبًا.
مفيد جدًا أثناء تعديل الألوان والنصوص والتصميم.

Hot restart

يعيد تشغيل التطبيق من جديد مع إعادة تهيئة الحالة.
مفيد عندما تحتاج إلى استعادة الوضع الكامل للتطبيق.

الفهم الجيد لهذا الفرق يختصر عليك وقتًا كبيرًا أثناء التطوير.

إضافة صورة وخط مخصص

إذا أردت أن تجعل تطبيقك يبدو أكثر احترافية، فغالبًا ستضيف صورًا وخطوطًا مخصصة.

صورة من الأصول

بعد وضع الصورة داخل assets/images/, استخدم:

Image.asset(
  'assets/images/banner.png',
  width: 200,
  height: 200,
)

خط مخصص

أضف الخط في pubspec.yaml:

flutter:
  fonts:
    - family: Cairo
      fonts:
        - asset: assets/fonts/Cairo-Regular.ttf
        - asset: assets/fonts/Cairo-Bold.ttf
          weight: 700

ثم استخدمه:

Text(
  'مرحبا بك في Flutter',
  style: TextStyle(
    fontFamily: 'Cairo',
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

هذه التفاصيل الصغيرة تصنع فرقًا كبيرًا في الانطباع البصري.

مثال عملي: شاشة تسجيل دخول بسيطة

لنطبق ما تعلمناه على واجهة مفيدة. هذه شاشة تسجيل دخول بسيطة.

import 'package:flutter/material.dart';

void main() {
  runApp(const LoginApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const LoginScreen(),
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal),
      ),
    );
  }
}

class LoginScreen extends StatefulWidget {
  const LoginScreen({super.key});

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController emailController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

  void login() {
    final email = emailController.text.trim();
    final password = passwordController.text.trim();

    if (email.isEmpty || password.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Please fill all fields'),
        ),
      );
      return;
    }

    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Logging in with $email'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Icon(Icons.lock_outline, size: 80),
              const SizedBox(height: 20),
              const Text(
                'Login',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 30),
              TextField(
                controller: emailController,
                decoration: const InputDecoration(
                  labelText: 'Email',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 16),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: const InputDecoration(
                  labelText: 'Password',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 24),
              SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: login,
                  child: const Text('Sign In'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

هذا المثال يعكس شيئًا مهمًا جدًا: Flutter ليس فقط للواجهات الجميلة، بل أيضًا لتجربة مستخدم جيدة. الحقول، الأزرار، التحقق من المدخلات، والتنبيهات كلها جزء من بناء تطبيق محترم من أول يوم.

بناء وإصدار التطبيق النهائي

عندما تنتهي من التطوير وتريد نسخة نهائية، يمكنك بناء التطبيق.

APK للأندرويد

flutter build apk

AAB للنشر على Google Play

flutter build appbundle

إصدار الويب

flutter build web

قبل البناء النهائي، تأكد من اختبار التطبيق جيدًا. فالنسخة النهائية ليست المكان المناسب لاكتشاف خطأ كان يمكن تجاوزه مبكرًا.

نصائح مهمة جدًا للمبتدئين

الرحلة مع Flutter أجمل بكثير عندما تتقدم بهدوء وثبات. لا تحاول أن تبني تطبيقًا ضخمًا في الأسبوع الأول. ابدأ بشاشات بسيطة، ثم تعلم التنقل، ثم النماذج، ثم الاتصال بـ API، ثم التخزين المحلي، ثم إدارة الحالة. هذا الترتيب الطبيعي يجعل التعلم أكثر متعة وأقل توترًا.

لا تحفظ كل شيء دفعة واحدة. Flutter واسع، وهذا طبيعي. ركز على فهم الwidgets الأساسية أولًا: Container, Row, Column, Padding, Text, Image, Scaffold, AppBar, ListView, Stack, Expanded, SizedBox. بعد ذلك ستجد أن بناء الواجهات صار أسهل بكثير.

لا تخف من قراءة الوثائق الرسمية. أحيانًا تكون أقصر طريق للحل هي العودة إلى المصدر نفسه. ولا تخف أيضًا من التجربة والخطأ، فالكود لا يكافئ من لا يجرّب.

ولا تنسَ أن كل تطبيق ناجح بدأ بشاشة فارغة. الفرق بين البداية والمنتج الجيد ليس السحر، بل الاستمرارية، والترتيب، والتكرار، والتعلم من الأخطاء.

خاتمة

إعداد Flutter ليس مجرد تثبيت أداة تطوير. هو أول خطوة حقيقية نحو فهم طريقة بناء التطبيقات الحديثة بطريقة عملية وسلسة. عندما تضبط البيئة جيدًا، وتفهم flutter doctor، وتتعرف على هيكل المشروع، وتكتب أول main.dart بنفسك، فأنت لم تعد مجرد شخص "يحاول تجربة Flutter"، بل أصبحت على الطريق الصحيح لبناء تطبيقات حقيقية.

قد يبدو الأمر في البداية كثير التفاصيل، لكن مع أول مشروع صغير ستشعر أن الصورة بدأت تتضح. بعدها ستتساءل كيف كنت تتخيل أن تطوير التطبيقات أصعب من هذا. نعم، ستواجه أخطاء، وستتوقف أحيانًا عند سطر واحد يربكك، لكن هذا طبيعي تمامًا. كل مطور مرّ من هنا. والفارق الحقيقي هو من يكمل التعلم بهدوء ويحوّل الفضول إلى مهارة.

Flutter جميل لأنه يفتح لك الباب لبناء واجهات سريعة وأنيقة وعملية. ومع إعداد صحيح من البداية، يصبح الطريق أمامك أوضح بكثير. ابدأ بمشروع صغير، نظّم ملفاتك، تعلم widget واحدة في كل مرة، ولا تتعجل القفز إلى التعقيد قبل أن تفهم الأساس.