버튼으로 돌아가기

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

뒤로 가기 화살표만이 이전 화면으로 돌아가는 방법은 아닙니다. Save 또는 Done 버튼도 누르면 해당 화면을 닫아야 합니다. Navigator.pop은 뒤로 가기 화살표와 마찬가지로 스택에서 맨 위 화면을 제거합니다.

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

push와 pop은 한 쌍입니다. push는 화면을 추가하고, pop은 화면을 제거합니다. 홈 화면을 다시 push해도 이전 화면으로 돌아가지 않습니다. 화면 더미 맨 위에 두 번째 홈 화면이 추가되어, 뒤로 가기 화살표를 누르면 설정 화면으로 이동하게 됩니다.

챌린지

쉬움

설정 화면의 Save 버튼을 눌러도 아무 일도 일어나지 않습니다. 설정 화면을 닫고 Navigator.pop을 사용해 홈 화면으로 돌아가도록 만드세요.

직접 해보기

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

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