פתיחת מסך חדש

חלק מהיחידה רשימות ומסכים במסלול ה-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'),
      ),
    );
  }
}