מחלקת Widget משלך

חלק מהיחידה הוספת אינטראקטיביות במסלול ה-Flutter של Coddy. שיעור 9 מתוך 34.

כל ווידג'ט שהשתמשת בו, Text, Row, Scaffold, הוא מחלקה שמישהו כתב. אפשר לכתוב מחלקה משלך, וכבר יש לך אחת: MyApp.

מכאן והלאה, לאפליקציות שלך יהיו שתי מחלקות. MyApp מגדירה את האפליקציה באמצעות MaterialApp, ולמסך יש מחלקה משלו, HomePage:

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Hi')),
    );
  }
}

extends StatelessWidget הופך את HomePage לווידג'ט. השורה const HomePage({super.key}); היא זו שמאפשרת לך לכתוב HomePage(): העתק אותה כפי שהיא, עם שם המחלקה שלך. build מחזירה את מה שהווידג'ט מציג.

השתמש בה כמו בכל ווידג'ט אחר: home: HomePage(). קל יותר לקרוא מסך שנמצא במחלקה משלו, ובשיעורים הבאים הדבר יאפשר למסך להשתנות בזמן שהאפליקציה שסביבו נשארת זהה.

אתגר

קל

המחלקה HomePage כתובה בתחתית הקובץ, אבל האפליקציה עדיין מציגה את מסך Coming soon הישן שלה.

הוסף ל־Scaffold שב־HomePage סרגל AppBar עם הכותרת Notes.
גרום ל־MyApp להציג אותו: החלף את כל ה־Scaffold שאחרי home: ב־HomePage().

נסו בעצמכם

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(child: Text('Coming soon')),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('No notes yet')),
    );
  }
}