طرق إنشاء تطبيقات فلاتر
هناك عدة طرق لإنشاء تطبيقات Flutter، وفيما يلي أبرز الطرق:
أنشاء تطبيق فلاتر باستخدام محرر نصوص:
استخدام محرر النصوص (Text Editor):
يمكنك استخدام أي محرر نصوص مفضل لديك مثل Visual Studio Code، Sublime Text، IntelliJ IDEA أو Android Studio لإنشاء تطبيقات Flutter.
يجب عليك تثبيت Flutter SDK و Dart SDK على جهاز الكمبيوتر الخاص بك، ثم يمكنك ببساطة إنشاء مشروع Flutter جديد والبدء في تطوير تطبيقك.
أنشاء تطبيق فلاتر باستخدام محرر الويب:
استخدام محرر الويب (Web IDE):
توجد بعض المنصات السحابية التي توفر بيئة تطوير متكاملة عبر الويب مثل Codemagic و DartPad.
يمكنك استخدام هذه المنصات لإنشاء وتشغيل تطبيقات Flutter بسرعة ودون الحاجة إلى تثبيت أي برامج على جهاز الكمبيوتر الخاص بك.
أنشاء تطبيق فلاتر باستخدام سطر الأوامر
استخدام الأدوات الرسمية (Flutter CLI):
يمكنك استخدام أدوات سطر الأوامر المقدمة من Flutter مباشرة لإنشاء مشاريع Flutter وإدارتها. يمكنك استخدام الأوامر مثل flutter create لإنشاء مشروع جديد و flutter run لتشغيل التطبيق على المحاكي أو الجهاز الفعلي.
أنشاء تطبيق فلاتر باستخدام القوالب
استخدام القوالب (Templates):
يمكنك استخدام قوالب جاهزة لتطوير تطبيقات Flutter، سواء كانت قوالب مجانية أو مدفوعة.
تقدم بعض الشركات والمطورين قوالب جاهزة لأنواع مختلفة من التطبيقات مثل التطبيقات الاجتماعية، التجارية، التعليمية، وغيرها.
هذه بعض الطرق الشائعة لإنشاء تطبيقات Flutter. تختلف الطرق حسب مستوى الخبرة وتفضيلات المطور، لكن الهدف هو نفسه: بناء تطبيقات متطورة وجذابة باستخدام Flutter.
خطوة بخطوة انشاء تطبيق فلات باستخدام Text Editor
سنفوم بانشاء تطبيق فلاتر Flutter باستخدام محرر النصوص إنشاء تطبيق:
خطوة 1:تثبيت Flutter SDK و Dart SDK:
نقم بتثبيت Flutter SDK و Dart SDK على جهاز الكمبيوتر الخاص بك.
يمكنك الحصول على الإرشادات اللازمة لذلك من موقع Flutter على الويب.
خطوة 2: ثبيت محرر النصوص:
نقم بتثبيت محرر النصوص مثل Visual Studio Code أو Sublime Text أو غيرها من المحررات المفضلة لدينا.
خطوة 3:إنشاء مشروع Flutter جديد:
نفتح محرر النصوص وننتقل إلى المجلد الذي نرغب في إنشاء مشروع Flutter فيه.
نستخدم سطر الأوامر التالي لإنشاء مشروع Flutter باستخدام الأمر التالي:
flutter create اسم_المشروع
flutter create myApp
حيث “اسم_المشروع” هو اسم المجلد الذي يحتوي على مشروعك.
تحرير التطبيق:
بعد إنشاء المشروع، افتح المجلد الذي تم إنشاؤه للمشروع في محرر النصوص.
ابدأ بتعديل ملف lib/main.dart، هذا هو الملف الذي يحتوي على نقطة البداية لتطبيقك.
تشغيل التطبيق:
افتح سطر الأوامر في المجلد الرئيسي لمشروعك.
استخدم الأمر flutter run لبناء التطبيق وتشغيله على المحاكي أو الجهاز الفعلي.
تصحيح الأخطاء والتعديل:
في حال واجهت أي أخطاء أو احتجت لإجراء تعديلات، ستظهر لك الرسائل في سطر الأوامر. استخدمها لتصحيح الأخطاء وإجراء التعديلات اللازمة على التطبيق.
مثال تطبيقي عملي: عرض قائمة بأسماء بعض الفواكه
سنقوم بإنشاء تطبيق بسيط باستخدام Flutter يعرض قائمة بأسماء بعض الفواكه عند النقر على أحد العناصر في القائمة، سيتم عرض رسالة توضح الفاكهة التي تم اختيارها.
سنتبع الخطوات التالية:
إنشاء المشروع:
قم بإنشاء مشروع Flutter جديد باستخدام الأمر.
flutter create fruit_list_app
تعديل ملف main.dart:
نقم بتعديل ملف lib/main.dart ونستبدل الكود بالكود التالي:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fruit List App',
home: FruitListScreen(),
);
}
}
class FruitListScreen extends StatelessWidget {
final List<String> fruits = ['Apple', 'Banana', 'Orange', 'Grapes'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fruit List'),
),
body: ListView.builder(
itemCount: fruits.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(fruits[index]),
onTap: () {
_showFruitDetail(context, fruits[index]);
},
);
},
),
);
}
void _showFruitDetail(BuildContext context, String fruit) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Selected Fruit'),
content: Text('You selected: $fruit'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
}
}
تشغيل التطبيق:
في المجلد الرئيسي للمشروع، قم بتشغيل التطبيق باستخدام الأمر flutter run.
بعد تشغيل التطبيق، سترى قائمة بأسماء الفواكه.
عند النقر على أحد العناصر، سيظهر مربع حوار يعرض اسم الفاكهة التي تم اختيارها.
هذا مثال بسيط على كيفية إنشاء تطبيق Flutter عملي باستخدام محرر النصوص.
تطبيق فلاتر يعرض قائمة ببعض الوجبات السريعة.
في هذا المثال، سنقوم بإنشاء تطبيق Flutter بسيط يعرض قائمة ببعض الوجبات السريعة.
عند النقر على أحد العناصر في القائمة، سيتم عرض صفحة تفاصيل الوجبة التي تم اختيارها، بما في ذلك السعر ووصف الوجبة.
الخطوات:
إنشاء المشروع:
نقم بإنشاء مشروع Flutter جديد باستخدام الأمر :
flutter create food_app
تعديل ملف main.dart:
نقم بتعديل ملف lib/main.dart ونستبدل الكود بالكود التالي:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Food App',
home: FoodListScreen(),
);
}
}
class FoodListScreen extends StatelessWidget {
final List<Map<String, dynamic>> foods = [
{'name': 'Burger', 'price': 10, 'description': 'A classic burger'},
{'name': 'Pizza', 'price': 12, 'description': 'Delicious pizza with toppings'},
{'name': 'Tacos', 'price': 8, 'description': 'Authentic Mexican tacos'},
{'name': 'Sushi', 'price': 15, 'description': 'Fresh and tasty sushi'},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Food List'),
),
body: ListView.builder(
itemCount: foods.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(foods[index]['name']),
subtitle: Text('\$${foods[index]['price']}'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FoodDetailScreen(food: foods[index]),
),
);
},
);
},
),
);
}
}
class FoodDetailScreen extends StatelessWidget {
final Map<String, dynamic> food;
FoodDetailScreen({required this.food});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(food['name']),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Price: \$${food['price']}'),
SizedBox(height: 8.0),
Text('Description: ${food['description']}'),
],
),
),
);
}
}تشغيل التطبيق:
في المجلد الرئيسي للمشروع، قم بتشغيل التطبيق باستخدام الأمر: flutter run.
بعد تشغيل التطبيق، سترى قائمة بالوجبات السريعة. عند النقر على أحد العناصر، ستظهر صفحة تفاصيل الوجبة التي تم اختيارها، بما في ذلك السعر ووصف الوجبة. هذا مثال آخر عملي وبسيط يوضح كيفية إنشاء تطبيق Flutter باستخدام محرر النصوص.
إنشاء تطبيق فلاتر باستخدام محرر الكود VSCODE
سنسير خطوة بخطوة في كيف ننشيء تطبيق فلاتر باستخدام محرر الاكواد VSCODE
لإنشاء تطبيق فلاتر باستخدام محرر الأكواد Visual Studio Code:
الخطوة 1:تثبيت Visual Studio Code والإضافات اللازمة:
قم بتنزيل وتثبيت Visual Studio Code من الموقع الرسمي: https://code.visualstudio.com/.
بعد تثبيته، قم بتثبيت إضافة Flutter و Dart. يمكنك القيام بذلك من خلال الانتقال إلى قائمة Extensions في الجانب الأيسر من شريط الأدوات والبحث عن “Flutter” و “Dart”، ثم قم بتثبيتهما.
الخطوة 2:إنشاء مشروع جديد:
قم بفتح Visual Studio Code.
انقر على قائمة الأوامر (View) في الأعلى، ثم اختر Terminal لفتح نافذة الطرفية.
في نافذة الطرفية، قم بتشغيل الأمر التالي لإنشاء مشروع جديد:
flutter create myApp3
flutter create اسم_المشروع
هذا الأمر سينشئ مجلدًا جديدًا باسم المشروع الذي هو myApp3 يحتوي كل ملفات التطبيق الأساسية.
الخطوة 4:فتح المشروع في Visual Studio Code:
انتقل إلى قائمة File واختر Open Folder (افتح مجلد).
حدد مجلد المشروع الذي تم إنشاؤه في الخطوة السابقة وانقر على “Open” (افتح).
سيتم فتح المشروع في Visual Studio Code، ويمكنك الآن التحرير والتعديل على ملفاته.
تحرير التطبيق:
نفتح ملف lib/main.dart، وهو الملف الذي يحتوي على دالة main() والتي تعتبر نقطة البداية لتطبيقك.
نقم بتحرير هذا الملف اذا اردنا ان نصيف شيئا ما
تشغيل التطبيق:
قم بفتح نافذة الطرفية في Visual Studio Code.
اكتب الأمر التالي لتشغيل التطبيق:
flutter run
سيقوم هذا الأمر ببناء التطبيق وتشغيله على المحاكي أو الجهاز المتصل.
خطوات انشاء تطبيق فلاتر باستخدام :Web IDE
سنقوم بإنشاء تطبيق بسيط باستخدام Flutter وذلك باستخدام Web IDE المدعومة من DartPad. سنقوم بإنشاء تطبيق يعرض قائمة بأسماء بعض الفواكه. عند النقر على أحد العناصر في القائمة، سيتم عرض رسالة توضح الفاكهة التي تم اختيارها.
تعتبر DartPad بيئة تطوير مبسطة ومتكاملة عبر الويب بدون الحاجة إلى تثبيت أي شيء. سنتبع الخطوات التالية:
زيارة موقع DartPad:
افتح متصفح الويب وانتقل إلى DartPad.
إنشاء التطبيق:
في نافذة التحرير على الجانب الأيسر، امسح الكود الموجود واستبدله بالكود التالي:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fruit List',
home: FruitListScreen(),
);
}
}
class FruitListScreen extends StatelessWidget {
final List<String> fruits = ['Apple', 'Banana', 'Orange', 'Grapes'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fruit List'),
),
body: ListView.builder(
itemCount: fruits.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(fruits[index]),
onTap: () {
_showFruitDetail(context, fruits[index]);
},
);
},
),
);
}
void _showFruitDetail(BuildContext context, String fruit) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Selected Fruit'),
content: Text('You selected: $fruit'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
}
}تشغيل التطبيق:
بعد كتابة الكود، قم بالنقر على زر “Run” في أعلى الصفحة.
سيتم تشغيل التطبيق في النافذة المجاورة. قم بتجربة النقر على أحد الفواكه في القائمة لرؤية عرض الفاكهة المحددة.
بهذه الطريقة، يمكنك إنشاء تطبيق Flutter بسيط باستخدام Web IDE مثل DartPad دون الحاجة إلى تثبيت أي برامج أو أدوات على جهاز الكمبيوتر الخاص بك.
أنشاء تطبيق فلاتر باستخدام سطر الأوامر Flutter CLI
اليكم خطوة بخطوة كيفية انشاء تطبيق فلاتر باستخدام :Flutter CLI
بالطبع! سنقوم بإنشاء تطبيق بسيط باستخدام Flutter CLI (Command Line Interface). سيكون التطبيق عبارة عن قائمة بأسماء بعض الفواكه. عند النقر على أحد العناصر في القائمة، سيتم عرض رسالة توضح الفاكهة التي تم اختيارها. سنتبع الخطوات التالية:
تثبيت Flutter SDK:
قم بتثبيت Flutter SDK على جهاز الكمبيوتر الخاص بك. يمكنك متابعة الخطوات الموجودة في موقع Flutter لتثبيته.
إنشاء مشروع جديد:
نقم بفتح سطر الأوامر (Command Prompt) أو الطرفية وانتقل إلى المجلد الذي ترغب في إنشاء مشروع Flutter فيه.
استخدم الأمر التالي لإنشاء مشروع Flutter جديد:
flutter create fruit_list_app
حيث “fruit_list_app” هو اسم المشروع.
تعديل ملف main.dart:
ننتقل إلى المجلد الذي تم إنشاؤه للمشروع (fruit_list_app) ونفتح الملف lib/main.dart باستخدام محرر النصوص.
نستبدل الكود الموجود في الملف بالكود التالي:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fruit List',
home: FruitListScreen(),
);
}
}
class FruitListScreen extends StatelessWidget {
final List<String> fruits = ['Apple', 'Banana', 'Orange', 'Grapes'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Fruit List'),
),
body: ListView.builder(
itemCount: fruits.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(fruits[index]),
onTap: () {
_showFruitDetail(context, fruits[index]);
},
);
},
),
);
}
void _showFruitDetail(BuildContext context, String fruit) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Selected Fruit'),
content: Text('You selected: $fruit'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Close'),
),
],
);
},
);
}
}تشغيل التطبيق:
عندما تكون في المجلد الرئيسي لمشروعك، استخدم الأمر التالي لتشغيل التطبيق:
flutter run
سيقوم هذا الأمر بتشغيل التطبيق على المحاكي المتصل أو الجهاز الفعلي.
بهذه الطريقة، يمكنك إنشاء تطبيق Flutter بسيط باستخدام Flutter CLI بسهولة من خلال الطرفية، دون الحاجة إلى بيئة تطوير متكاملة أو محرر نصوص خاص.
أنشاء تطبيق فلاتر باستخدام القوالب:
اشرح خطوة بخطوة كيفية انشاء تطبيق فلاتر باستخدام:Templates
سنتناول كيفية إنشاء تطبيق Flutter باستخدام قالب جاهز.
قوالب Flutter هي مجموعات جاهزة من الشفرة التي توفر تصميمات مسبقة ومكونات مثبتة تمكنك من البدء بسرعة في تطوير تطبيقاتك دون الحاجة إلى بناء كل شيء من الصفر.
سنقوم بإنشاء تطبيق بسيط باستخدام قالب جاهز يعرض قائمة بأسماء بعض الفواكه. عند النقر على أحد العناصر في القائمة، سيتم عرض رسالة توضح الفاكهة التي تم اختيارها.
سنستخدم لهذا الغرض قالب “flutter_bloc”.
تثبيت قالب Flutter Bloc:
نقم بتثبيت الأداة الإضافية flutter_bloc بإضافة التالي إلى ملف pubspec.yaml الخاص بمشروعك:
dependencies: flutter: sdk: flutter flutter_bloc: ^7.0.0
بعد ذلك، نقم بتشغيل الأمر flutter pub get في سطر الأوامر لتثبيت الاعتمادات الجديدة.
إنشاء المشروع باستخدام القالب:
بعد تثبيت الاعتمادات، قم بفتح سطر الأوامر (Command Prompt) أو الطرفية وانتقل إلى المجلد الذي ترغب في إنشاء مشروع Flutter فيه.
استخدم الأمر التالي لإنشاء مشروع Flutter جديد باستخدام القالب “flutter_bloc”:
flutter create --template=flutter_bloc fruit_list_app
حيث “fruit_list_app” هو اسم المشروع.
تعديل المشروع:
نقم بالانتقال إلى مجلد المشروع الذي تم إنشاؤه (fruit_list_app) ونفتحه باستخدام محرر النصوص.
نقم بتحرير ملف lib/main.dart لتعديل التطبيق وفقًا لاحتياجاتك، يمكنك استخدام الكود الموجود في الأمثلة السابقة لإنشاء الواجهة المستخدم والتفاعل.
تشغيل التطبيق:
استخدم الأمر flutter run في سطر الأوامر أو الطرفية لتشغيل التطبيق.
سيقوم Flutter ببناء التطبيق وتشغيله على المحاكي المتصل أو الجهاز الفعلي.
بهذه الطريقة، يمكنك البدء في تطوير تطبيقات Flutter باستخدام قوالب جاهزة مثل “flutter_bloc” بسهولة وسرعة دون الحاجة إلى بناء كل شيء من الصفر.