إذا أعجبك المحتوى لا تنسى أن تدعمنا بلايك ❤️

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

Good morning!
Start your day with positive energy and confidence in your abilities. Remember, programming is not just about writing code; it’s about solving the world’s problems. Keep learning, and be patient with mistakes—they are the first sign that you are making progress. Today is your chance to write code that makes a difference!

What is GetX in Flutter?

GetX is a powerful, lightweight, and highly efficient package for Flutter that simplifies state management, navigation, and dependency injection. It is widely used for its ease of use and minimal boilerplate code, making it an ideal choice for both beginners and experienced developers.


---

Key Features of GetX

1. State Management:

GetX provides a simple and reactive approach to manage the state of your app.

You can update UI elements automatically when the state changes without writing complex logic.


Example:

var count = 0.obs; // Observable variable

void increment() {
count++; // Automatically updates the UI
}


2. Navigation (Routing):

GetX makes navigation between pages extremely simple without the need for a BuildContext.

You can use it to pass data between screens easily.


Example:

Get.to(NextScreen()); // Navigate to another screen
Get.back(); // Go back to the previous screen


3. Dependency Injection:

GetX allows you to manage dependencies easily by injecting them where needed.

This eliminates the need for manually creating and disposing of instances.


Example:

final controller = Get.put(Controller()); // Dependency injection


4. Performance:

GetX is highly efficient as it updates only the necessary widgets instead of rebuilding the entire widget tree.



5. Built-in Utilities:

GetX includes utilities for dialog boxes, snackbars, and other UI elements, making development faster and more convenient.





---

Advantages of GetX

Simple API: Easy to learn and implement.

Minimal Boilerplate Code: Less repetitive code compared to other state management solutions.

Reactive Programming: Automatically updates UI when the state changes.

No BuildContext Required: Perform navigation and state updates without needing BuildContext.



---

When to Use GetX?

When you need a lightweight and reactive state management solution.

For projects where simplicity and performance are a priority.

When you want a single package to handle state management, navigation, and dependency injection.



---

Example: Counter App Using GetX

import 'package:flutter/material.dart';
import 'package:get/get.dart';

// Controller for state management
class CounterController extends GetxController {
var count = 0.obs;

void increment() => count++;
}

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: CounterScreen(),
);
}
}

class CounterScreen extends StatelessWidget {
final CounterController controller = Get.put(CounterController());

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("GetX Counter")),
body: Center(
child: Obx(() => Text(
"Count: ${controller.count}",
style: TextStyle(fontSize: 30),
)),
),
floatingActionButton: FloatingActionButton(
onPressed: controller.increment,
child: Icon(Icons.add),
),
);
}
}


---

Conclusion

GetX is a comprehensive and efficient package that simplifies many aspects of Flutter development, from state management to navigation and dependency injection. Its minimal learning curve and robust performance make it a popular choice among developers.

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

1. إضافة مكتبة Dio إلى مشروعك

أول خطوة هي إضافة مكتبة Dio إلى ملف pubspec.yaml في مشروعك. افتح الملف وأضف السطر التالي تحت قسم dependencies:

yaml
dependencies:
flutter:
sdk: flutter
dio: ^5.0.0

ثم احفظ الملف وشغل الأمر التالي لتثبيت المكتبة:

bash
flutter pub get

2. استيراد Dio في الكود

بعد تثبيت المكتبة، تحتاج إلى استيرادها في ملف دارت الذي ستستخدم فيه Dio. على سبيل المثال، في ملف main.dart:

dart
import 'package:dio/dio.dart';

3. إنشاء مثيل Dio

الخطوة التالية هي إنشاء مثيل لكائن Dio الذي ستستخدمه لإجراء الطلبات:

dart
Dio dio = Dio();

4. إجراء طلب GET

إليك كيفية إجراء طلب GET باستخدام Dio. سنقوم بتحميل البيانات من رابط محدد:

dart
void fetchData() async {
try {
Response response = await dio.get('https://jsonplaceholder.typicode.com/posts');
print(response.data);
} catch (e) {
print('Error: $e');
}
}

5. التعامل مع البيانات المسترجعة

عادةً، تحتاج إلى التعامل مع البيانات المسترجعة بطريقة أكثر تخصصًا. على سبيل المثال، يمكنك تحويل البيانات إلى كائنات دارت:

dart
void fetchData() async {
try {
Response response = await dio.get('https://jsonplaceholder.typicode.com/posts');
List<dynamic> data = response.data;
data.forEach((post) {
print('Title: ${post['title']}');
});
} catch (e) {
print('Error: $e');
}
}

🔷️ الشرح القادم 》》》

🆕️ ⏮ استدعاء البيانات من الإنترنت.

ضع 👍 في حال رغبتك لعرض الدرس

استدعاء البيانات من الإنترنت في تطبيقات Flutter هو عملية شائعة ومهمة لتطوير التطبيقات التي تعتمد على الشبكات. سنشرح هذه العملية بشكل مبسط ومفصل خطوة بخطوة.

الخطوة الأولى: إضافة الحزم اللازمة

أول شيء يجب القيام به هو إضافة الحزم الضرورية إلى ملف pubspec.yaml الخاص بمشروعك. أشهر حزمة تستخدم لهذا الغرض هي http.

yaml
dependencies:
flutter:
sdk: flutter
http: ^0.13.3

ثم قم بتشغيل الأمر التالي لتثبيت الحزم:

bash
flutter pub get

الخطوة الثانية: استيراد الحزم في الكود

بعد تثبيت الحزمة، تحتاج إلى استيرادها في ملف Dart الخاص بك.

dart
import 'package:http/http.dart' as http;
import 'dart:convert';

الخطوة الثالثة: إنشاء دالة لجلب البيانات

يمكنك الآن إنشاء دالة لجلب البيانات من الإنترنت باستخدام مكتبة http.

dart
Future<void> fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

if (response.statusCode == 200) {
// تحويل البيانات المستلمة إلى صيغة JSON
List<dynamic> data = json.decode(response.body);
print(data);
} else {
throw Exception('Failed to load data');
}
}

الخطوة الرابعة: استدعاء الدالة في واجهة المستخدم

يمكنك استدعاء هذه الدالة في واجهة المستخدم الخاصة بك. على سبيل المثال، يمكنك استدعاء الدالة عند الضغط على زر:

dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
fetchData();
},
child: Text('Fetch Data'),
),
),
),
);
}

Future<void> fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

if (response.statusCode == 200) {
List<dynamic> data = json.decode(response.body);
print(data);
} else {
throw Exception('Failed to load data');
}
}
}

الخطوة الخامسة: عرض البيانات في واجهة المستخدم

لنفترض أنك تريد عرض البيانات في قائمة. يمكنك استخدام FutureBuilder لإدارة الحالة غير المتزامنة واستدعاء البيانات وعرضها عند الاسترجاع.

dart
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: DataList(),
),
);
}
}

class DataList extends StatefulWidget {
@override
_DataListState createState() => _DataListState();
}

class _DataListState extends State<DataList> {
Future<List<dynamic>> fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

if (response.statusCode == 200) {
return json.decode(response.body);
} else {
throw Exception('Failed to load data');
}
}

@override
Widget build(BuildContext context) {
return FutureBuilder<List<dynamic>>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
} else {
final data = snapshot.data!;
return ListView.builder(
itemCount: data.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(data[index]['title']),
subtitle: Text(data[index]['body']),
);
},
);
}
},
);
}
}

ملخص

1. أضف حزمة http إلى ملف pubspec.yaml.
2. استورد الحزمة في ملف Dart الخاص بك.
3. أنشئ دالة لاستدعاء البيانات باستخدام http.get.
4. استدع الدالة في واجهة المستخدم (مثلاً، عند الضغط على زر).
5. استخدم FutureBuilder لعرض البيانات المسترجعة في واجهة المستخدم.

بهذه الخطوات، يمكنك بسهولة استدعاء البيانات من الإنترنت وعرضها في تطبيق Flutter الخاص بك.

🆕️🔷️🔷️🆕️》》》الدرس متوفر الآن
ℹ️ استدعاء البيانات من الانترنت
انشر الدرس الآن لتعميم الفائدة للجميع.

إذا أعجبك الدرس شاركه لتعم الفائدة، ولأي ملاحظات اكتب في التعليقات، هذا يساعدنا على تطوير المحتوى.

درس جديد عن Push Notification
اذا اعجبك لاتنسونا من دعم و اي اسئلة لتوضيح حاضرين ان شاء الله

أبرز التعليقات والآراء منكم نضيفها للفيديو وممكن نتناقش فيها بخصوص هذا الموضوع

رابط قناة
https://youtube.com/@nadimtech360?si=tmGAf6eu0atrjuaV

انضمو لهذه لقناة لدعم مبرمجين سوريا💚🤍