تنظيم مشروع Flutter بشكل احترافي وسهل

x32x01
  • بواسطة x32x01 ||
  • #1
لو شغال على Flutter وعايز كودك يبقى مرتب وسهل التطوير، لازم تتعلم تنظيم المشروع بطريقة احترافية. التنظيم الصح مش بس بيسهّل عليك التطوير، ده كمان بيخلي التطبيق مرن وسهل التوسع. 😎

مبدأ Separation of Concerns 🧩​

أول حاجة لازم تعرفها هي فصل المهام لكل جزء في التطبيق. يعني كل جزء له دور محدد وواضح:

1. Models 📦​

تمثل البيانات بتاعة التطبيق.
Code:
class User {
  final String id;
  final String name;
  User({required this.id, required this.name});
}

2. Providers 🔄​

بتتحكم في حالة التطبيق (State) وبتحدث الـ UI.
Code:
class UserProvider with ChangeNotifier {
  User? _user;
  User? get user => _user;

  void setUser(User newUser) {
    _user = newUser;
    notifyListeners();
  }
}

3. Repositories 🌐​

بتتعامل مع الـ API أو قاعدة البيانات.
Code:
class UserRepository {
  Future<User> fetchUser(String id) async {
    // كود لجلب البيانات من API
  }
}

4. Services 🛠️​

لخدمات زي التخزين المحلي، المصادقة، والطلبات HTTP.
Code:
class AuthService {
  Future<bool> login(String email, String password) async {
    // كود تسجيل الدخول
  }
}

5. Views 🖥️​

الشاشات والـ Widgets، منظمة حسب كل ميزة.
مثال هيكل مجلدات:
Code:
lib/
 ├── models/
 ├── providers/
 ├── repositories/
 ├── services/
 └── views/
     ├── login/
     └── home/



استخدام Provider و ChangeNotifier 🔄​

بدل ما تستخدم setState()، استخدم ChangeNotifier و Provider لتحديث الـ UI بكفاءة:
Code:
MultiProvider(
  providers: [
    ChangeNotifierProvider(create: (_) => UserProvider()),
  ],
  child: MyApp(),
);
ده بيخلي إدارة الحالة منظمة ومرنة لكل التطبيق بدل ما كل Widget تتحكم في نفسها لوحدها.



إدارة الـ Dependencies باستخدام MultiProvider 📦​

في main.dart، بنحدد كل الـ Providers عشان تبقى متاحة لكل التطبيق بسهولة:
Code:
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => UserProvider()),
        ChangeNotifierProvider(create: (_) => ThemeProvider()),
      ],
      child: MyApp(),
    ),
  );
}
الميزة هنا إن كل الشاشة ممكن توصل لأي Provider من غير ما تعمل Pass لكل المتغيرات.



النتيجة؟ ✨​

  • كود أنظف
  • تطبيق أكثر مرونة وسهل التوسع 🔧
  • إدارة State منظمة بدون تعقيد 🧠



إنشاء المجلدات والملفات تلقائيًا 📝​

بدل ما تقعد تنشئ كل مجلد وملف يدوي، ممكن تستخدم Snippets أو Scripts في IDE لتوليد المجلدات Models, Providers, Services, Views بسهولة، وده هيوفر وقتك جدًا ويخلي المشروع منظم من البداية.
2323.jpg
 
التعديل الأخير:
  • أعجبنى
التفاعلات: nouzen

المواضيع ذات الصلة

x32x01
الردود
0
المشاهدات
686
x32x01
x32x01
x32x01
الردود
0
المشاهدات
668
x32x01
x32x01
x32x01
الردود
0
المشاهدات
626
x32x01
x32x01
x32x01
الردود
0
المشاهدات
658
x32x01
x32x01
x32x01
الردود
0
المشاهدات
690
x32x01
x32x01
الوسوم : الوسوم
changenotifier clean architecture flutter models project structure provider repository pattern separation of concerns services state management
الدخول أو التسجيل السريع
نسيت كلمة مرورك؟

آخر المشاركات

إحصائيات المنتدى
المواضيع
2,388
المشاركات
2,601
أعضاء أكتب كود
574
أخر عضو
الياس
عودة
أعلى