افتح شاشة جديدة

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 18 من 33.

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

يحتفظ Navigator بشاشاتك في مكدس، مثل كومة من البطاقات. الشاشة الموجودة في الأعلى هي التي تراها. يضع Navigator.push شاشة جديدة في الأعلى:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

تُدخل MaterialPageRoute الشاشة الجديدة بانزلاق، كما يفعل الهاتف. أما builder فهي دالة تُعيد الشاشة المراد عرضها.

يخبر context عنصر Navigator بمكانك في شجرة عناصر واجهة المستخدم. لهذا السبب، فإن HomeScreen صنف مستقل داخل MaterialApp: إذ يمكن لـ context الخاص بها العثور على أداة التنقل التي ينشئها MaterialApp.

التحدي

سهل

زر About this app لا يفعل شيئًا حتى الآن. اجعله يفتح AboutScreen باستخدام Navigator.push.

جرّب بنفسك

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  const AboutScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}