自分だけのWidgetクラス

CoddyのFlutterジャーニー「アプリをインタラクティブにする」セクションの一部。レッスン 9/34。

これまでに使ったウィジェット、Text、Row、Scaffoldは、どれも誰かが書いたクラスです。自分でクラスを書くこともできます。すでにひとつあります。MyAppです。

ここから先、アプリには2つのクラスがあります。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 に、タイトルが Notes の AppBar を追加してください。
MyApp にそれを表示させるには、home: の後にある Scaffold 全体を 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')),
    );
  }
}