Sonucu Geri Al

Coddy'nin Flutter Journey'sinin Listeler ve Ekranlar bölümünün bir parçası. Ders 22 / 33.

Bazı ekranlar bir soru sormak için vardır: bir renk seçin, bir tarih seçin. Yanıtın, soruyu soran ekrana geri dönmesi gerekir. Navigator.pop yanıtı taşıyabilir:

Navigator.pop(context, 'Green');

Diğer tarafta Navigator.push bir Future döndürür: ekrandan çıkıldığında, daha sonra gelen bir değer. await bunu bekler ve bekleyen işlev async olarak işaretlenir:

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

Sonuç bir String? değeridir: biri geri okuna basarak ayrıldığında hiçbir şey gönderilmez ve color değeri null olur. if bu durumda eski seçimi korur. İlerleyen bir bölüm, Future ve await konusunu baştan sona anlatır.

Görev

Orta

Bir renk seçmek renk ekranını kapatır, ancak ana ekran bundan hiçbir zaman haberdar olmaz. Seçimin geri dönmesini sağla:

renk ekranında rengi parametre olarak vererek geri dön: Navigator.pop(context, color)
ana ekranda push işlemini await ile bekle ve bir renk geri döndüğünde Your color: Green metnini göster (seçilen renkle birlikte)
geri okuyla çıkmak eski metni korur

Kendin dene

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