Nhận lại kết quả

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 22 trên 33.

Một số màn hình dùng để hỏi một câu hỏi: chọn màu, chọn ngày. Câu trả lời cần được chuyển lại màn hình đã hỏi. Navigator.pop có thể mang theo câu trả lời:

Navigator.pop(context, 'Green');

Ở phía bên kia, Navigator.push trả về một Future: một giá trị sẽ đến sau, khi màn hình được mở bằng lệnh push được đóng lại. await chờ giá trị đó, còn hàm chờ phải được đánh dấu là async:

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

Kết quả là một String?: khi ai đó rời đi bằng mũi tên quay lại, không có gì được gửi và color là null. Khi đó, if giữ nguyên lựa chọn cũ. Một phần sau sẽ giải thích đầy đủ về Future và await.

Thử thách

Trung bình

Chọn một màu sẽ đóng màn hình chọn màu, nhưng màn hình chính không nhận được thông tin về lựa chọn đó. Hãy để lựa chọn được gửi về:

trên màn hình chọn màu, gọi pop kèm theo màu: Navigator.pop(context, color)
trên màn hình chính, dùng await với lệnh push và khi nhận lại màu, hiển thị Your color: Green (với màu đã chọn)
thoát bằng mũi tên quay lại sẽ giữ nguyên dòng chữ cũ

Tự làm thử

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);
              },
            ),
        ],
      ),
    );
  }
}