Buat class Widget Sendiri

Termasuk bagian Membuat Aplikasi Interaktif dalam perjalanan Flutter di Coddy. Pelajaran 9 dari 34.

Setiap widget yang pernah kamu gunakan, Text, Row, Scaffold, adalah class yang ditulis seseorang. Kamu bisa menulis class-mu sendiri, dan kamu sudah memiliki satu: MyApp.

Mulai sekarang, aplikasi kamu memiliki dua class. MyApp menyiapkan aplikasi dengan MaterialApp, dan layar memiliki class sendiri, yaitu HomePage:

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

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

extends StatelessWidget membuat HomePage menjadi widget. Baris const HomePage({super.key}); memungkinkan kamu menulis HomePage(): salin apa adanya, dengan nama class-mu. build mengembalikan apa yang ditampilkan widget.

Gunakan seperti widget lainnya: home: HomePage(). Layar yang memiliki class sendiri lebih mudah dibaca, dan dalam pelajaran berikutnya, ini memungkinkan layar berubah sementara aplikasi di sekelilingnya tetap sama.

Tantangan

Mudah

class HomePage ditulis di bagian bawah file, tetapi aplikasi masih menampilkan layar Coming soon yang lama.

Tambahkan AppBar dengan judul Notes ke Scaffold di HomePage.
Buat MyApp menampilkannya: ganti seluruh Scaffold setelah home: dengan HomePage().

Coba sendiri

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