Kendi Widget Sınıfınız

Coddy'nin Flutter Journey'sinin Etkileşimli Uygulamalar bölümünün bir parçası. Ders 9 / 34.

Kullandığınız her araç takımı, Text, Row, Scaffold, birinin yazdığı bir sınıftır. Siz de kendi sınıfınızı yazabilirsiniz ve zaten bir tane yazdınız: MyApp.

Bundan sonra uygulamalarınızda iki sınıf olacak. MyApp, uygulamayı MaterialApp ile kurar ve ekranın kendine ait bir sınıfı olur: HomePage:

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

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

extends StatelessWidget, HomePage'i bir araç takımı yapar. const HomePage({super.key}); satırı, HomePage() yazmanızı sağlar: olduğu gibi, sınıfınızın adıyla kopyalayın. build, araç takımının gösterdiği şeyi döndürür.

Diğer araç takımları gibi kullanın: home: HomePage(). Kendi sınıfında tanımlanmış bir ekranı okumak daha kolaydır ve sonraki derslerde bu sayede uygulamanın geri kalanı aynı kalırken ekran değişebilir.

Görev

Kolay

HomePage sınıfı dosyanın en altında yazılmış, ancak uygulama hâlâ eski Coming soon ekranını gösteriyor.

HomePage içindeki Scaffold'a başlığı Notes olan bir AppBar ekle.
MyApp'in bunu göstermesini sağla: home: ifadesinden sonraki Scaffold'un tamamını HomePage() ile değiştir.

Kendin dene

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