صنف 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')),
    );
  }
}