Dapatkan Hasilnya Kembali

Termasuk bagian List dan Layar dalam perjalanan Flutter di Coddy. Pelajaran 22 dari 33.

Beberapa layar dibuat untuk mengajukan pertanyaan: pilih warna, pilih tanggal. Jawabannya harus kembali ke layar yang bertanya. Navigator.pop dapat membawanya:

Navigator.pop(context, 'Green');

Di sisi lain, Navigator.push memberikan Future: nilai yang tiba nanti, saat layar yang didorong ditutup dengan pop. await menunggunya, dan fungsi yang menunggu ditandai dengan async:

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

Hasilnya adalah String?: saat seseorang pergi dengan panah kembali, tidak ada yang dikirim dan color bernilai null. if mempertahankan pilihan lama saat itu. Bagian selanjutnya menjelaskan keseluruhan cerita tentang Future dan await.

Tantangan

Sedang

Memilih warna akan menutup layar warna, tetapi layar beranda tidak pernah mengetahuinya. Buat pilihan tersebut dikembalikan:

di layar warna, lakukan pop dengan warna tersebut: Navigator.pop(context, color)
di layar beranda, await hasil push dan, saat warna dikembalikan, tampilkan Your color: Green (dengan warna yang dipilih)
keluar dengan tombol panah kembali akan mempertahankan teks lama

Coba sendiri

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