ボタンで戻る

CoddyのFlutterジャーニー「リストと画面」セクションの一部。レッスン 20/33。

戻る方法は、戻る矢印だけではありません。Save ボタンや Done ボタンも、押すとその画面を閉じます。Navigator.popは、戻る矢印と同じように、スタックから一番上の画面を取り除きます。

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

push と pop は対になっています。push は画面をスタックに追加し、pop は画面を取り除きます。ホーム画面をもう一度 push しても、前の画面には戻りません。スタックの一番上にホーム画面がもう1つ追加され、戻る矢印を押すと設定画面に進むことになります。

チャレンジ

簡単

設定画面の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'),
        ),
      ),
    );
  }
}