استلام نتيجة

جزء من قسم القوائم والشاشات في رحلة Flutter على Coddy. الدرس 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);
              },
            ),
        ],
      ),
    );
  }
}