結果を受け取る

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

画面の中には、色や日付を選んでもらうためのものがあります。選んだ結果は、質問した画面に戻す必要があります。Navigator.popを使うと、その結果を渡せます。

Navigator.pop(context, 'Green');

一方、Navigator.pushはFutureを返します。これは、プッシュした画面がポップされたときに届く値です。awaitでその値を待ち、待機する関数にはasyncを付けます。

onPressed: () async {
  final String? color = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const ColorScreen()),
  );
  if (color != null) {
    setState(() {
      chosen = color;
    });
  }
},

結果はString?です。戻る矢印で画面を離れた場合、何も送られず、colorはnullになります。その場合、ifによって以前の選択が維持されます。後のセクションで、Futureとawaitについて詳しく説明します。

チャレンジ

中級

色を選ぶと色選択画面は閉じますが、ホーム画面にはそのことが伝わりません。選択した色が戻るようにしましょう：

色選択画面では、色を渡してポップします：Navigator.pop(context, color)
ホーム画面では、プッシュをawaitし、色が戻ってきたらYour color: Green（選択した色）を表示します
戻る矢印で画面を離れた場合は、以前のテキストがそのまま表示されます

自分で試してみよう

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 StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String chosen = 'none';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Paint')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Your color: $chosen', style: const TextStyle(fontSize: 24)),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ColorScreen()),
                );
              },
              child: const Text('Choose a color'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Pick a color')),
      body: ListView(
        children: [
          for (String color in ['Red', 'Green', 'Blue'])
            ListTile(
              title: Text(color),
              onTap: () {
                Navigator.pop(context);
              },
            ),
        ],
      ),
    );
  }
}