دليل خطوة بخطوة لمساعدتك في إنشاء أول تطبيق Flutter من تصميمك والمضي قدمًا

يفترض هذا الدليل أنك قمت بالفعل بتثبيت Flutter وأدوات التطوير الضرورية (على سبيل المثال ، Android Studio أو Visual Studio Code مع ملحق Flutter).

1. افتح IDE الخاص بك (Android Studio أو Visual Studio Code).
2. أنشئ مشروع Flutter جديدًا:
   • في Android Studio: انقر على “ملف”> “جديد”> “مشروع Flutter جديد”.
   • في Visual Studio Code: اضغط على “Ctrl + Shift + P” (Windows / Linux) أو “Cmd + Shift + P” (Mac) لفتح لوحة الأوامر ، ثم اكتب “Flutter: New Project” واضغط على Enter.
3. أدخل اسم مشروع ، مثل “my_first_flutter_app” ، وحدد الموقع الذي تريد حفظه فيه. انقر فوق “التالي” (Android Studio) أو “إنهاء” (Visual Studio Code).
4. سيتم فتح مشروع Flutter الجديد الخاص بك باستخدام نموذج تطبيق “عداد” افتراضي. حدد موقع lib/main.dart الملف الذي يحتوي على الكود المصدري للتطبيق.
5. استبدل محتوى 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: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, world!',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
    );
  }
}

يعرّف هذا الرمز “مرحبًا ، أيها العالم!” التطبيق مع شريط التطبيق والنص في المنتصف.

6. احفظ main.dart الملف.
7. قم بتشغيل التطبيق:
   • في Android Studio: انقر فوق الزر “تشغيل” (رمز التشغيل الأخضر) في شريط الأدوات.
   • في Visual Studio Code: اضغط على “F5” أو انقر على “تشغيل”> “بدء التصحيح” في القائمة العلوية.
8. سيتم إنشاء التطبيق وتشغيله إما على محاكي أو جهاز مادي متصل. يجب أن ترى رسالة “Hello، world!” نص على الشاشة.

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

إذن ، ما هي الخطوة التالية في التعلم؟

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

1. ادرس أساسيات Dart : تستخدم Flutter لغة Dart كلغة برمجتها. تعرف على بناء جملة Dart وأنواع البيانات وهياكل التحكم ومفاهيم البرمجة الموجهة للكائنات. تعد وثائق Dart الرسمية مكانًا رائعًا للبدء: https://dart.dev/guides
2. افهم نظام الأدوات : الأدوات هي اللبنات الأساسية لتطبيقات Flutter. تعرف على الأدوات عديمة الحالة وذات الحالة ، واستكشف كتالوج الأدوات لمعرفة المتاح: https://flutter.dev/docs/development/ui/widgets
3. تعرف على التخطيطات : تعرف على كيفية إنشاء تخطيطات باستخدام عناصر واجهة مستخدم مثل الصفوف والأعمدة والحاويات والموسعة. سيساعدك هذا في إنشاء واجهات سريعة الاستجابة وجذابة بصريًا: https://flutter.dev/docs/development/ui/layout
4. التنقل والتوجيه : تعرف على كيفية التنقل بين الشاشات (المسارات) المختلفة في تطبيقك ، وكيفية تمرير البيانات بينها: https://flutter.dev/docs/development/ui/navigation
5. إدارة الحالة : مع زيادة تعقيد تطبيقك ، ستحتاج إلى إدارة الحالة بكفاءة. استكشف مناهج إدارة الحالة المختلفة ، مثل الموفر أو BLoC أو Redux: https://flutter.dev/docs/development/data-and-backend/state-mgmt
6. العمل مع الأصول والصور : تعرف على كيفية تضمين الأصول وإدارتها ، مثل الصور والخطوط ، في تطبيقك: https://flutter.dev/docs/development/ui/assets-and-images
7. الرسوم المتحركة : فهم كيفية إنشاء رسوم متحركة وانتقالات سلسة في تطبيقك لتحسين تجربة المستخدم: https://flutter.dev/docs/development/ui/animations
8. الشبكات : تعرف على كيفية تقديم طلبات الشبكة والتعامل مع الاستجابات ، عادةً عند التفاعل مع واجهات برمجة تطبيقات RESTful: https://flutter.dev/docs/development/data-and-backend/networking
9. المثابرة : اكتشف طرق تخزين البيانات محليًا على الجهاز باستخدام قواعد البيانات أو التفضيلات المشتركة: https://flutter.dev/docs/development/data-and-backend/storage
10. الاختبار وتصحيح الأخطاء : تعرف على أدوات الاختبار وتصحيح الأخطاء لضمان جودة واستقرار تطبيقك: https://flutter.dev/docs/testing
11. نشر تطبيقك : تعرف على كيفية تحضير تطبيقك للإصدار ونشره في متاجر التطبيقات ، مثل Google Play: https://docs.flutter.dev/deployment/android ومتجر التطبيقات: https://docs.flutter.dev / النشر / ios

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

عدة موارد ومنصات تفاعلية حيث يمكنك تعلم وممارسة الرفرفة مباشرة:

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

فيما يلي بعض المصادر التفاعلية الشائعة لتعلم وممارسة Flutter:

1. وثائق Flutter الرسمية : تحتوي وثائق Flutter الرسمية على العديد من الأمثلة ومقتطفات التعليمات البرمجية والأدوات التفاعلية التي يمكنك استخدامها مباشرة وتجربتها. يوفر الموقع الرسمي أيضًا مختبرات رموز خطوة بخطوة ترشدك خلال إنشاء تطبيق أو ميزة معينة: https://flutter.dev/docs
2. قناة Flutter على YouTube : تتميز قناة Flutter الرسمية على YouTube بالعديد من البرامج التعليمية والعروض التوضيحية والعروض التقديمية المفيدة التي تغطي موضوعات مختلفة. تتضمن بعض مقاطع الفيديو جلسات برمجة مباشرة تتيح لك المتابعة وإنشاء تطبيق: https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw
3. DartPad : DartPad هو محرر على الإنترنت يسمح لك بكتابة وتشغيل ومشاركة كود Dart و Flutter مباشرة في متصفحك. إنها طريقة رائعة لتجربة مقتطفات التعليمات البرمجية والممارسة دون إعداد بيئة تطوير محلية: https://dartpad.dev/
4. Udemy : يقدم Udemy العديد من الدورات التدريبية الشاملة في Flutter ، مثل “The Complete 2023 Flutter Development Bootcamp with Dart” للدكتور أنجيلا يو أو “Flutter & Dart – الدليل الكامل [إصدار 2023]” لـ Maximilian Schwarzmüller. تحتوي هذه الدورات التدريبية على أمثلة عملية ومسابقات وتمارين لمساعدتك على التدرب: https://www.udemy.com/
5. Codecademy : لدى Codecademy دورة تفاعلية تسمى “Learn Flutter” تغطي أساسيات تطوير Flutter من خلال التدريبات العملية: https://www.codecademy.com/learn/learn-flutter
6. Ray Wenderlich : يتميز موقع Ray Wenderlich الإلكتروني بالعديد من البرامج التعليمية والتسجيلات الرقمية للشاشة حول تطوير Flutter. تتضمن بعض البرامج التعليمية تمارين عملية حيث تقوم بإنشاء تطبيق أو ميزة معينة: https://www.raywenderlich.com/library؟domain_ids[]=2

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