나만의 위젯 클래스

Coddy Flutter 여정의 앱에 상호작용 추가하기 섹션에 포함된 레슨. 34개 중 9번째.

지금까지 사용한 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에 제목이 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')),
    );
  }
}