كيفية كتابة أول تطبيق باستخدام Flutter

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

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

• تثبيت بيئة تطوير Flutter على جهاز الكمبيوتر الخاص بك
• تثبيت محرر الأكواد مثل Visual Studio Code أو Android Studio
• فهم أساسيات لغة البرمجة Dart

“اقرأ أيضاً: شرح استخدام ويدجت RotationTransition في فلاتر“

خطوات كتابة التطبيق الأول

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

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

ابدأ بفتح Visual Studio Code وانقر فوق زر “عرض” View في القائمة العلوية، ثم حدد “مربع الأدوات” Command Palette في القائمة المنسدلة. يمكن الوصول إلى مربع الأدوات أيضًا باستخدام اختصار لوحة المفاتيح Ctrl + Shift + P. ثم اكتب “flutter” في مربع الأدوات واختر Flutter: New Project.

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

سيتم إنشاء المشروع ويتم فتح ملف main.dart الذي يحتوي على الكود الأساسي لتطبيق Flutter.

بدل من ذلك قم بفتح محرر الأوامر (Terminal) واكتب الأمر التالي لإنشاء تطبيق Flutter الأول الخاص بك:

flutter create my_first_flutter_app

سيقوم هذا الأمر بإنشاء مشروع Flutter جديد في المجلد الذي قمت بإنشائه. بعد الانتهاء من إنشاء المشروع، ستجد بعض الملفات والمجلدات الأساسية اللازمة لتطوير التطبيق. من بينها ملف lib/main.dart، وهو ملف الدخول لتطبيقك.

“اقرأ أيضاً: شرح استخدام ويدجت ListTile في فلاتر“

خطوة 2: تعديل الواجهة الأولى للتطبيق

الآن يمكنك تعديل واجهة التطبيق في ملف 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',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My First Flutter App'),
        ),
        body: Center(
          child: Text('مرحباً بالعالم'),
        ),
      ),
    );
  }
}

في هذا الكود، قمنا بإضافة عنصر “Text” لعرض “مرحباً بالعالم” في وسط الشاشة

“اقرأ أيضاً: شرح استخدام ويدجت WillPopScope في فلاتر“

خطوة 3: شرح الأكواد

دعونا نتحدث عن الأكواد التي تم إضافتها في هذا المثال:

import 'package:flutter/material.dart';

هذا السطر يستيرد حزمة المكونات الأساسية لتطبيق Flutter، بما في ذلك المكونات التي تستخدم في هذا المثال.

void main() {
  runApp(MyApp());
}

هذا السطر يقوم بتشغيل تطبيق Flutter الجديد. تم استخدام runApp() لتشغيل MyApp()، وهو عبارة عن الكلاس الرئيسي للتطبيق.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First Flutter App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello, world!'),
        ),
        body: Center(
          child: Text('مرحباً بالعالم'),
        ),
      ),
    );
  }
}

هذا الكلاس هو الكلاس الرئيسي للتطبيق، ويتضمن MaterialApp() و Scaffold() و Text(). يستخدم MaterialApp() لتعريف تطبيق Flutter الخاص بك، بما في ذلك العنوان والمظهر العام للتطبيق. Scaffold() هو واجهة المستخدم الأساسية للتطبيق، ويتضمن AppBar() الذي يظهر على الأعلى ويمكن تخصيصه باستخدام عنوان مخصص، والجسم الأساسي للتطبيق الذي يتم تعريفه باستخدام Center() و Text().

“اقرأ أيضاً: شرح استخدام ويدجت RangeSlider في فلاتر“

خطوة 4: تشغيل التطبيق

بعد الانتهاء من تعديل واجهة التطبيق، يمكنك تشغيل التطبيق باستخدام محاكي Android أو iOS أو باستخدام جهاز حقيقي متصل بجهاز الكمبيوتر الخاص بك.

• لتشغيل التطبيق باستخدام محاكي Android، يمكنك استخدام Android Studio أو برنامج Genymotion. قم بتحديد المحاكي وانقر فوق زر “تشغيل” Run في VS Code.
• لتشغيل التطبيق باستخدام محاكي iOS، يمكنك استخدام Xcode. قم بتحديد المحاكي وانقر فوق زر “تشغيل” Run في VS Code.
• لتشغيل التطبيق باستخدام جهاز حقيقي، يجب عليك توصيل الجهاز بجهاز الكمبيوتر الخاص بك وتمكين وضع التطوير في الجهاز. ثم قم بتحديد الجهاز وانقر فوق زر “تشغيل” Run في VS Code.

عند تشغيل التطبيق، يجب أن ترى “مرحباً بالعالم” في وسط الشاشة.

“اقرأ أيضاً: شرح استخدام ويدجت AnimatedContainer في فلاتر“

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