- بواسطة x32x01 ||
لو شغال على Flutter وعايز كودك يبقى مرتب وسهل التطوير، لازم تتعلم تنظيم المشروع بطريقة احترافية. التنظيم الصح مش بس بيسهّل عليك التطوير، ده كمان بيخلي التطبيق مرن وسهل التوسع. 😎
مثال هيكل مجلدات:
ده بيخلي إدارة الحالة منظمة ومرنة لكل التطبيق بدل ما كل Widget تتحكم في نفسها لوحدها.
الميزة هنا إن كل الشاشة ممكن توصل لأي Provider من غير ما تعمل Pass لكل المتغيرات.

مبدأ Separation of Concerns 🧩
أول حاجة لازم تعرفها هي فصل المهام لكل جزء في التطبيق. يعني كل جزء له دور محدد وواضح:1. Models 📦
تمثل البيانات بتاعة التطبيق. كود:
class User {
final String id;
final String name;
User({required this.id, required this.name});
} 2. Providers 🔄
بتتحكم في حالة التطبيق (State) وبتحدث الـ UI. كود:
class UserProvider with ChangeNotifier {
User? _user;
User? get user => _user;
void setUser(User newUser) {
_user = newUser;
notifyListeners();
}
} 3. Repositories 🌐
بتتعامل مع الـ API أو قاعدة البيانات. كود:
class UserRepository {
Future<User> fetchUser(String id) async {
// كود لجلب البيانات من API
}
} 4. Services 🛠️
لخدمات زي التخزين المحلي، المصادقة، والطلبات HTTP. كود:
class AuthService {
Future<bool> login(String email, String password) async {
// كود تسجيل الدخول
}
} 5. Views 🖥️
الشاشات والـ Widgets، منظمة حسب كل ميزة.مثال هيكل مجلدات:
كود:
lib/
├── models/
├── providers/
├── repositories/
├── services/
└── views/
├── login/
└── home/ استخدام Provider و ChangeNotifier 🔄
بدل ما تستخدمsetState()، استخدم ChangeNotifier و Provider لتحديث الـ UI بكفاءة: كود:
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => UserProvider()),
],
child: MyApp(),
); إدارة الـ Dependencies باستخدام MultiProvider 📦
في main.dart، بنحدد كل الـ Providers عشان تبقى متاحة لكل التطبيق بسهولة: كود:
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => UserProvider()),
ChangeNotifierProvider(create: (_) => ThemeProvider()),
],
child: MyApp(),
),
);
} النتيجة؟ ✨
- كود أنظف ✅
- تطبيق أكثر مرونة وسهل التوسع 🔧
- إدارة State منظمة بدون تعقيد 🧠
