التنقل بين الشاشات — أساسيات Flutter

التنقل في Flutter

1. التنقل البسيط (Navigator.push)

// الانتقال لشاشة جديدة
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => DetailsScreen()),
);

// الرجوع
Navigator.pop(context);

// الرجوع مع بيانات
Navigator.pop(context, 'result data');

2. تمرير البيانات

// الشاشة الأولى - إرسال
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailsScreen(
      title: 'عنوان',
      id: 123,
    ),
  ),
);

// الشاشة الثانية - استقبال
class DetailsScreen extends StatelessWidget {
  final String title;
  final int id;

  const DetailsScreen({required this.title, required this.id});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(child: Text('ID: $id')),
    );
  }
}

3. Named Routes

// في main.dart
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomeScreen(),
    '/details': (context) => DetailsScreen(),
    '/profile': (context) => ProfileScreen(),
    '/settings': (context) => SettingsScreen(),
  },
)

// التنقل
Navigator.pushNamed(context, '/details');

// مع arguments
Navigator.pushNamed(
  context,
  '/details',
  arguments: {'id': 123, 'title': 'منتج'},
);

// استقبال arguments
class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    return Text('ID: ${args['id']}');
  }
}

4. onGenerateRoute (للتحكم الكامل)

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/details') {
      final args = settings.arguments as Map;
      return MaterialPageRoute(
        builder: (context) => DetailsScreen(
          id: args['id'],
          title: args['title'],
        ),
      );
    }
    return MaterialPageRoute(builder: (context) => HomeScreen());
  },
)

5. Bottom Navigation Bar

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _currentIndex = 0;

  final _screens = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _screens[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'الرئيسية',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'بحث',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'حسابي',
          ),
        ],
      ),
    );
  }
}

6. Drawer (القائمة الجانبية)

Scaffold(
  appBar: AppBar(title: Text('تطبيقي')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              CircleAvatar(
                radius: 30,
                backgroundImage: NetworkImage(userImage),
              ),
              SizedBox(height: 10),
              Text('أحمد محمد', style: TextStyle(color: Colors.white)),
              Text('ahmed@email.com', style: TextStyle(color: Colors.white70)),
            ],
          ),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('الرئيسية'),
          onTap: () {
            Navigator.pop(context);
            Navigator.pushNamed(context, '/');
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('الإعدادات'),
          onTap: () {
            Navigator.pop(context);
            Navigator.pushNamed(context, '/settings');
          },
        ),
        Divider(),
        ListTile(
          leading: Icon(Icons.logout, color: Colors.red),
          title: Text('تسجيل خروج', style: TextStyle(color: Colors.red)),
          onTap: () => _logout(),
        ),
      ],
    ),
  ),
)

7. Tab Bar

class TabScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text('التبويبات'),
          bottom: TabBar(
            tabs: [
              Tab(icon: Icon(Icons.home), text: 'رئيسية'),
              Tab(icon: Icon(Icons.star), text: 'مميز'),
              Tab(icon: Icon(Icons.person), text: 'حسابي'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            HomeTab(),
            FeaturedTab(),
            ProfileTab(),
          ],
        ),
      ),
    );
  }
}