إنشاء تطبيقات الهواتف باستخدام Flutter: من البداية إلى النشر على Google Play و App Store

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

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

المتطلبات الأساسية

• معرفة أساسية بلغة البرمجة Dart.
• خبرة سابقة في تطوير واجهات المستخدم باستخدام HTML و CSS أو أي لغة برمجة أخرى.
• جهاز كمبيوتر بنظام تشغيل Windows أو macOS أو Linux.
• محاكي Android أو جهاز iPhone/iPad (لإجراء الاختبارات على iOS).
• حساب مطور على متجر Google Play أو App Store (إذا كنت تخطط لنشر التطبيق).

الخطوة 1: تثبيت Flutter وإعداد بيئة التطوير

1. تحميل وتثبيت Flutter: قم بزيارة الموقع الرسمي لـ Flutter وقم بتحميل أحدث إصدار يناسب نظام التشغيل الخاص بك. بعد اكتمال التحميل، قم بفك ضغط الملف وأضف مسار مجلد Flutter إلى متغيرات النظام (System Environment Variables).
2. تثبيت محرر الكود Visual Studio Code: يمكنك استخدام أي محرر نصوص، لكن يُفضّل استخدام Visual Studio Code. قم بتنزيله من الموقع الرسمي.
3. تثبيت ملحقات Flutter و Dart: افتح Visual Studio Code، وانتقل إلى قسم “Extensions” (الملحقات). ابحث عن “Flutter” وقم بتثبيته، ستجد أيضًا إضافة “Dart” سيتم تثبيتها تلقائيًا.
4. إعداد محاكي Android: قم بتثبيت Android Studio من الموقع الرسمي. بعد تثبيته، افتح Android Studio وانتقل إلى “AVD Manager” وقم بإنشاء محاكي جديد.
5. تأكيد تثبيت Flutter: flutter doctor سيقوم Flutter بفحص بيئة التطوير والتأكد من أن كل شيء مثبت بشكل صحيح. إذا ظهرت أي مشاكل، اتبع التعليمات لحلها.

الخطوة 2: إنشاء مشروع Flutter جديد

1. افتح Visual Studio Code، واضغط على Ctrl + Shift + P لفتح نافذة الأوامر.
2. اكتب Flutter: New Project واختر “New Application Project”.
3. قم بتسمية المشروع، على سبيل المثال MyFirstApp.
4. حدد المجلد الذي ترغب بحفظ المشروع فيه، وستلاحظ إنشاء مشروع جديد يحتوي على الملفات والمجلدات الأساسية.

الخطوة 3: فهم هيكل مشروع Flutter

هيكل المشروع في Flutter يتكون من العديد من الملفات والمجلدات، ولكن الملفات الأساسية التي سنعمل عليها هي:

• lib/main.dart: الملف الرئيسي الذي يحتوي على الكود المصدري للتطبيق.
• pubspec.yaml: يحتوي على إعدادات المشروع، وإدارة الحزم (Packages) والصور والخطوط.

الخطوة 4: إنشاء واجهة مستخدم بسيطة

في هذه الخطوة، سنقوم بإنشاء واجهة مستخدم تحتوي على قائمة من العناصر (ListView) لكل عنصر زر للضغط عليه. افتح lib/main.dart وقم بتعديله كالتالي:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: List.generate(10, (index) {
          return ListTile(
            title: Text('Item $index'),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text('Item $index clicked!'),
                ),
              );
            },
          );
        }),
      ),
    );
  }
}

الخطوة 5: إضافة وظائف إضافية للتطبيق

لنقم بإضافة صفحة جديدة تُعرض عند الضغط على أي عنصر في القائمة. سنقوم أولاً بإنشاء ملف جديد باسم details_page.dart في مجلد lib:

import 'package:flutter/material.dart';

class DetailsPage extends StatelessWidget {
  final int itemIndex;

  DetailsPage({required this.itemIndex});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details of Item $itemIndex'),
      ),
      body: Center(
        child: Text(
          'This is the detail view for item $itemIndex.',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

ثم قم بتحديث main.dart لجعل الصفحة الجديدة تفتح عند الضغط على أي عنصر:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        children: List.generate(10, (index) {
          return ListTile(
            title: Text('Item $index'),
            trailing: Icon(Icons.arrow_forward),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailsPage(itemIndex: index),
                ),
              );
            },
          );
        }),
      ),
    );
  }
}

الخطوة 6: اختبار التطبيق على المحاكي

1. قم بفتح المحاكي أو توصيل جهازك الفعلي.
2. في Visual Studio Code، اضغط على F5 أو على زر “Run” في الزاوية العلوية.
3. سترى التطبيق يظهر على المحاكي مع إمكانية التنقل بين الصفحة الرئيسية وصفحة التفاصيل.

الخطوة 7: نشر التطبيق على Google Play أو App Store

1. إعداد ملف Manifest: انتقل إلى android/app/src/main/AndroidManifest.xml وأضف معلومات التطبيق مثل package name والصلاحيات المطلوبة.
2. إعداد ملف build.gradle: انتقل إلى android/app/build.gradle وتأكد من إعداد النسخة (version) واسم التطبيق.
3. إنشاء ملف APK أو AAB: في نافذة الأوامر، اكتب: flutter build apk --release أو لإنشاء ملف AAB: flutter build appbundle --release
4. رفع التطبيق على متجر Google Play: قم بإنشاء حساب مطور، وافتح Google Play Console، وقم برفع ملف AAB أو APK الذي أنشأته للتو.
5. نشر التطبيق على App Store: تحتاج إلى جهاز macOS لرفع التطبيق على App Store. استخدم Xcode لرفع التطبيق، وقم بإضافة التفاصيل اللازمة مثل App ID، والصلاحيات، ووصف التطبيق.

خاتمة

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