تثبيت بيئة تطوير Flutter

إطار تطوير تطبيقات الهواتف المحمولة، بما في ذلك سطح المكتب والويب أيضًا.

Page content

الآن أحتاج إلى تحديث التطبيق على متجر Google Play لاستخدام نسخة جديدة من SDK لـ Android، لذا أقوم بتحسين ونشر هذا الدليل القديم الذي كتبته قبل بضع سنوات.

صورة لشاشة صفحة تطبيق Logical Fallacy Detector على متجر Google PlayStore

قطعة من صفحة التطبيق على PlayStore.

كان هذا الدليل مكتوبًا في أغسطس 2022، وتم تحديثه ونشره في أبريل 2024. وبسبب ذلك، قد يحتوي على بعض المعلومات القديمة.

كيفية الإجراء

الخطوات لتنصيب Flutter على جهاز كمبيوتر يعمل بنظام Linux

تثبيت أدوات التطوير

https://docs.flutter.dev/get-started/install/linux/android

التحقق من الأدوات

which bash file mkdir rm which

تثبيت الحزم

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

تثبيت الحزم المطلوبة لتطوير تطبيقات Android

sudo apt-get install \
    libc6:i386 libncurses5:i386 \
    libstdc++6:i386 lib32z1 \
    libbz2-1.0:i386

تثبيت الحزم المطلوبة لتطوير تطبيقات Linux

sudo apt-get install \
      clang cmake git \
      ninja-build pkg-config \
      libgtk-3-dev liblzma-dev \
      libstdc++-12-dev

تثبيت VSCode

https://code.visualstudio.com/docs/setup/linux

هناك رابط متوفر لتنزيل حزمة VSCode الخاصة بـ Linux: https://go.microsoft.com/fwlink/?LinkID=760868

ثم قم بتثبيته مثل:

sudo apt install ./<file>.deb

# إذا كنت تعمل على نظام Linux أقدم، فعليك تشغيل هذا بدلًا من ذلك:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # تثبيت التبعيات

توجد إصدارات أخرى من Linux أيضًا على هذه الصفحة “setup/linux”.

تثبيت إضافات Flutter لـ VSCode: https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

قم بتشغيل VS Code Quick Open (Ctrl+P)، أدخل الأمر التالي، واضغط Enter.

ext install Dart-Code.flutter

تثبيت Chrome

لتطوير الويب - تثبيت Chrome:

https://www.google.com/chrome/dr/download/

تثبيت Android Studio

https://developer.android.com/studio/install#linux

الحزم المطلوبة لـ Ubuntu على 64 بت

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

على أنظمة تعتمد على Ubuntu 24.04:

sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

قم بتنزيل أحدث إصدار من Android Studio من: https://developer.android.com/studio

انتقل إلى “{installation home}/bin” وابدأ:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:~/Apps/android-studio/bin

تمكين وضع KVM المسرع

https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo

إذا كان الناتج 1 أو أكثر، فهذا يعني أن التصغير المدعوم. إذا كان الناتج 0، فهذا يعني أن معالجك لا يدعم التصغير المادي.

الناتج المتوقع:

INFO: /dev/kvm exists
KVM acceleration can be used

تثبيت KVM على Linux استخدم الأمر التالي لتثبيت KVM:

Cosmic (18.10) أو الإصدارات الأحدث:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

تثبيت Flutter SDK

تثبيت SDK https://docs.flutter.dev/get-started/install/linux

https://docs.flutter.dev/get-started/install/linux/android

يمكنك تثبيت SDK يدويًا أو عبر VSCode

ملاحظات التثبيت اليدوي:

تنزيل https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

cd prj

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

export PATH=$PATH:~/prj/flutter/bin

which flutter

flutter precache

flutter config --no-analytics

flutter config

ملاحظات VSCode:

في نافذة الأوامر في VS Code (Ctrl+p)

ext install Dart-Code.flutter

في لوحة الأوامر (Ctrl+shift+p)، اكتب flutter.

اختر Flutter: New Project.

يُطلب منك VS Code تحديد موقع SDK لـ Flutter على جهازك.

إذا كان لديك SDK لـ Flutter مثبتًا، اضغط Locate SDK.

إذا لم يكن لديك SDK لـ Flutter مثبتًا، اضغط Download SDK.

هذا الخيار يوجهك إلى صفحة تثبيت Flutter إذا لم تقم بتثبيت Git كما هو مطلوب في متطلبات أدوات التطوير.

عندما يُطلب منك “Which Flutter template?"، اتجاهلها. اضغط Esc. يمكنك إنشاء مشروع اختبار بعد التحقق من إعداد التطوير الخاص بك.

بعد التثبيت في ~/Apps

echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile

source ~/.bash_profile

لتعطيل تقارير التتبع، قم بتشغيل هذا الأمر في النافذة:

dart --disable-analytics

تثبيت Android Studio

cd إلى “{installation home}/bin” وابدأ:

./studio.sh

xed ~/.bash_profile

export PATH=$PATH:/home/yourname/Apps/android-studio/bin

https://docs.flutter.dev/get-started/editor

  • ابدأ VS Code.

  • افتح View > Command Palette….

  • اكتب “install”، واختر Extensions: Install Extensions.

  • اكتب “flutter” في حقل بحث الإضافات، واختر Flutter من القائمة، واضغط Install. هذا أيضًا يثبيت الإضافة المطلوبة Dart.

  • افتح View > Command Palette (Ctrl+Shift+P)

  • اكتب “doctor”， واختر Flutter: Run Flutter Doctor. (أو اكتب flutter doctor في نافذة الأوامر)

  • تحقق من الناتج في لوحه Output للحصول على أي مشاكل. تأكد من اختيار Flutter من القائمة المنسدلة في خيارات Output المختلفة.

الفحص

flutter doctor

[!] Android toolchain - تطوير تطبيقات Android (نسخة Android SDK 34.0.0)
    ✗ مكون cmdline-tools مفقود
      ابدأ `path/to/sdkmanager --install "cmdline-tools;latest"`
      راجع https://developer.android.com/studio/command-line لمزيد من التفاصيل.
    ✗ حالة ترخيص Android مجهولة.
      ابدأ `flutter doctor --android-licenses` لقبول ترخيص SDK.
      راجع https://flutter.dev/docs/get-started/install/linux#android-setup لمزيد من التفاصيل.
[✗] Chrome - تطوير تطبيقات الويب (لا يمكن العثور على تنفيذ Chrome في google-chrome)
    ! لا يمكن العثور على Chrome. حاول تحديد CHROME_EXECUTABLE إلى تنفيذ Chrome.
[✓] Linux toolchain - تطوير تطبيقات Linux desktop

لتنصيب cmdline-tools:

  • افتح Android Studio،
  • ثم SDK (في المزيد)،
  • ثم اختر Android SDK cmdline-tools أحدث،
  • ثم اضغط على Apply

تقبل التراخيص

flutter doctor --android-licenses

إذا كنت تستخدم Chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

فحص إصدار Flutter وتحديثه

فحص إصدار Flutter:

flutter --version

لتحديث إصدار Flutter، ابدأ

flutter upgrade

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

  • افتح View > Command Palette (Ctrl+Shift+P).
  • اكتب “flutter”， واختر Flutter: New Project.
  • اختر Application.
  • أنشئ أو اختر الدليل الأصل لمشروعك الجديد.
  • أدخل اسم المشروع، مثل my_app، واضغط Enter.
  • انتظر حتى يكتمل إنشاء المشروع ويظهر ملف main.dart.

التصحيح في Flutter

ctrl+p

>flutter: اختر الجهاز

التسجيل

https://docs.flutter.dev/testing/code-debugging#logging

stderr.writeln(‘print me’);

import 'dart:developer' as developer;

void main() {
  developer.log('log me', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;

void main() {
  var myCustomObject = MyCustomObject();

  developer.log(
    'log me',
    name: 'my.app.category',
    error: jsonEncode(myCustomObject),
  );
}

نقاط التوقف

import 'dart:developer';

void someFunction(double offset) { debugger(when: offset > 30.0); // … }

نشر التطبيق على الجهاز

أنشئ apk لتطبيقك وحاول الأوامر التالية

نظف مشروعك

flutter clean

احصل على الحزم

flutter pub get

أنشئ apk

flutter build apk --release

ابحث عن apk في جهازك

اسم مشروعك\build\app\outputs\flutter-apk(في وضع الإصدار)

انسخ هذا APK وقم بتثبيته على جهازك المحمول

النوم في Dart

في الكود غير المتزامن

  await Future.delayed(Duration(seconds: 1));

في الكود المتزامن

  import 'dart:io';
  sleep(Duration(seconds:1));

روابط مفيدة

حزم مفيدة

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

إضافات VSCode

https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8

الأيقونات: https://api.flutter.dev/flutter/material/Icons-class.html

جميع الأيقونات: https://fonts.google.com/icons?selected=Material+Icons

==== جمع البيانات من الإنترنت ====

https://docs.flutter.dev/cookbook/networking/authenticated-requests

المرتبطة بـ: بناء ونشر تطبيق Android

تطبيق Flutter على الويب

إضافة Live Server لـ VSCode

Flutter مع الخادم