
- بواسطة x32x01 ||
لو شغال على Flutter وعايز كودك يبقى مرتب وسهل التطوير، لازم تتعلم تنظيم المشروع بطريقة احترافية. التنظيم الصح مش بس بيسهّل عليك التطوير، ده كمان بيخلي التطبيق مرن وسهل التوسع. 
مبدأ Separation of Concerns
أول حاجة لازم تعرفها هي فصل المهام لكل جزء في التطبيق. يعني كل جزء له دور محدد وواضح:
1. Models
تمثل البيانات بتاعة التطبيق.
2. Providers
بتتحكم في حالة التطبيق (State) وبتحدث الـ UI.
3. Repositories
بتتعامل مع الـ API أو قاعدة البيانات.
4. Services
لخدمات زي التخزين المحلي، المصادقة، والطلبات HTTP.
5. Views
الشاشات والـ Widgets، منظمة حسب كل ميزة.
مثال هيكل مجلدات:
استخدام Provider و ChangeNotifier
بدل ما تستخدم
ده بيخلي إدارة الحالة منظمة ومرنة لكل التطبيق بدل ما كل Widget تتحكم في نفسها لوحدها.
إدارة الـ Dependencies باستخدام MultiProvider
في main.dart، بنحدد كل الـ Providers عشان تبقى متاحة لكل التطبيق بسهولة:
الميزة هنا إن كل الشاشة ممكن توصل لأي Provider من غير ما تعمل Pass لكل المتغيرات.
النتيجة؟
إنشاء المجلدات والملفات تلقائيًا
بدل ما تقعد تنشئ كل مجلد وملف يدوي، ممكن تستخدم Snippets أو Scripts في IDE لتوليد المجلدات Models, Providers, Services, Views بسهولة، وده هيوفر وقتك جدًا ويخلي المشروع منظم من البداية.

مبدأ 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(),
);
إدارة الـ Dependencies باستخدام MultiProvider
في main.dart، بنحدد كل الـ Providers عشان تبقى متاحة لكل التطبيق بسهولة: Code:
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => UserProvider()),
ChangeNotifierProvider(create: (_) => ThemeProvider()),
],
child: MyApp(),
),
);
}
النتيجة؟
- كود أنظف
- تطبيق أكثر مرونة وسهل التوسع
- إدارة State منظمة بدون تعقيد
إنشاء المجلدات والملفات تلقائيًا
بدل ما تقعد تنشئ كل مجلد وملف يدوي، ممكن تستخدم Snippets أو Scripts في IDE لتوليد المجلدات Models, Providers, Services, Views بسهولة، وده هيوفر وقتك جدًا ويخلي المشروع منظم من البداية. التعديل الأخير: