Свой класс виджета

Часть раздела Добавляем интерактивность путешествия по 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.

Добавь в HomePage компонент Scaffold с панелью 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')),
    );
  }
}