뒤로 가기 화살표

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

푸시한 화면에는 돌아갈 방법이 필요합니다. AppBar를 사용하면 이를 무료로 제공받을 수 있습니다. 스택에서 해당 화면 아래에 다른 화면이 있으면 앱 바 시작 부분에 뒤로 가기 화살표가 표시됩니다.

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

화살표를 탭하면 스택에서 맨 위 화면이 제거되고, 그 아래 화면이 이전 상태 그대로 다시 표시됩니다. 휴대전화의 자체 뒤로 가기 제스처와 Android 뒤로 가기 버튼도 같은 동작을 합니다.

앱의 첫 화면 아래에는 다른 화면이 없으므로 앱 바에 화살표가 표시되지 않습니다.

챌린지

쉬움

휴대전화에서 세부 정보를 열어 보세요. 뒤로 돌아갈 방법이 없습니다. DetailScreen에 Details라는 제목의 AppBar를 추가하여 뒤로 가기 화살표가 표시되도록 하세요.

직접 해보기

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: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}