戻る矢印

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

プッシュした画面には、戻る方法が必要です。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'),
      ),
    );
  }
}