새 화면 열기

Coddy Flutter 여정의 목록과 화면 섹션에 포함된 레슨. 33개 중 18번째.

앱에는 여러 화면이 있습니다. 목록 화면, 항목 하나의 세부 정보 화면, 설정 페이지 등이 있습니다. Flutter에서 화면은 위젯이며, 보통 자체 클래스에 있는 Scaffold입니다.

Navigator는 카드 더미처럼 화면을 스택에 보관합니다. 맨 위에 있는 화면이 보이는 화면입니다. Navigator.push는 새 화면을 맨 위에 올립니다.

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute는 휴대전화에서 화면이 전환되는 방식처럼 새 화면을 밀어 넣습니다. builder는 표시할 화면을 반환하는 함수입니다.

context는 위젯 트리에서 현재 위치를 Navigator에 알려 줍니다. 그래서 HomeScreen은 MaterialApp 내부에 독립적인 클래스로 있습니다. 이 클래스의 context를 통해 MaterialApp이 만드는 내비게이터를 찾을 수 있습니다.

챌린지

쉬움

About this app 버튼은 아직 아무 동작도 하지 않습니다. Navigator.push를 사용해 AboutScreen을 열도록 만드세요.

직접 해보기

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}