نشر تطبيق Flutter على الويب : حوّل تطبيقك إلى موقع إلكتروني كامل

هل تعلم أن تطبيق Flutter الذي تطوره للهاتف يمكنه أن يعمل أيضًا كموقع ويب دون إعادة كتابته؟
نعم!
بفضل قدرات Flutter Web، يمكنك نشر تطبيق Flutter على الويب وتحويل مشروعك نفسه إلى تطبيق يعمل في أي متصفح — Chrome، Edge، Safari، وحتى على الجوالات.

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

أولًا: ما هو Flutter Web؟

هو إصدار من Flutter يسمح بتشغيل تطبيقك مباشرة في المتصفح باستخدام تقنيات مثل:

• HTML لهيكلة الصفحة.
• CSS لتنسيقها.
• JavaScript لتشغيل الكود الناتج عن Dart.

أي أن Flutter يقوم بتحويل مشروعك إلى تطبيق ويب تفاعلي كامل يشبه مواقع React أو Angular، لكن بواجهة Flutter المعتادة.

ثانيًا: تفعيل دعم الويب في مشروعك

قبل البدء، تأكد أن بيئتك تدعم الويب.
شغّل هذا الأمر في الطرفية:

flutter doctor

تأكد أن السطر التالي يظهر:

[✓] Chrome - develop for the web

إن لم يكن، فعّل الويب يدويًا عبر:

flutter config --enable-web

الآن يمكنك إنشاء نسخة ويب من تطبيقك:

flutter create .

ثالثًا: تجربة تطبيقك في المتصفح

اختبر تطبيقك مباشرة:

flutter run -d chrome

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

• LayoutBuilder
• MediaQuery
• ResponsiveRowColumn

🧠 تذكّر: تطبيقات الويب تحتاج إلى تصميم متجاوب (Responsive Design) أكثر من تطبيقات الهاتف.

رابعًا: بناء نسخة النشر (Build for Web)

الآن حان وقت إعداد النسخة النهائية:

flutter build web

سيتم إنشاء مجلد جديد داخل مشروعك باسم:

build/web

يحتوي هذا المجلد على:

• index.html
• ملفات CSS و JavaScript
• جميع الموارد والصور المضغوطة

وهذه هي النسخة الجاهزة للنشر على الإنترنت 🚀

خامسًا: اختيار طريقة الاستضافة

أمامك عدة خيارات رائعة لاستضافة تطبيقك:

🔸 1. Firebase Hosting (الأفضل لتطبيقات Flutter)

أوامر بسيطة:

firebase init hosting
firebase deploy

وسيعطيك Firebase رابطًا مباشرًا لتطبيقك.

🔸 2. GitHub Pages

• ارفع مجلد build/web إلى فرع gh-pages.
• استخدم إعدادات GitHub لتفعيل الموقع من هذا الفرع.

🔸 3. Vercel / Netlify

• أنشئ حسابًا على vercel.com أو netlify.com.
• اربط مستودع GitHub الخاص بك.
• اختر مجلد النشر: build/web
• وسيصبح موقعك متاحًا خلال ثوانٍ.

سادسًا: تحسين الأداء وتجربة المستخدم

لكي يبدو تطبيقك احترافيًا على الويب:

• فعّل Tree Shaking لتقليل حجم الكود.
• استخدم صور WebP بدلاً من PNG.
• أضف Meta Tags في index.html لتحسين SEO.
• حدّث عنوان الصفحة عبر: import 'dart:html' as html; html.document.title = 'اسم تطبيقك';
• تأكد من أن الخطوط والألوان تعمل على جميع المتصفحات.

سابعًا: نشر التحديثات لاحقًا

عندما تُحدّث الكود، كل ما عليك فعله هو:

flutter build web

ثم إعادة رفع الملفات إلى الاستضافة.
بسهولة وسرعة ⚡

الخلاصة

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

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