التنقل والمسارات

لا وجود لتطبيق من شاشة واحدة. فبمجرد وجود قائمة، توجد شاشة تفاصيل؛ وبمجرد وجود شاشة تفاصيل، يوجد زر رجوع، وإيماءة سحب على iOS، ومفتاح مادي على Android، وسؤال عمّا يبقى في الذاكرة خلال ذلك.

تنمذج Flutter هذا الأمر على هيئة مكدّس. الشاشة المرئية هي التي في القمة؛ والإضافة إلى المكدّس تضع شاشة فوقها، والإزالة منه تحذفها وتكشف السابقة. يتولى Navigator، الذي يوفّره MaterialApp دون أي جهد، إدارة هذا المكدّس، ويحرّك الانتقالات وفق أعراف المنصة، ويربط زر الرجوع المادي. النموذج بسيط، ولهذا تحديدًا ينبغي فهم حدوده قبل اختيار أداة أكثر تعقيدًا.

هذا الموضوع أيضًا هو الذي تُكتسب فيه أكثر العادات السيئة كلفة: مسارات مسمّاة بوسائط غير مُنمَّطة لا يتحقق منها المترجم، ومكدّس ينمو بلا حدود لأننا نُكدّس شاشة تسجيل الدخول بدل استبدالها، واستخدام context بعد await بينما الشاشة قد اختفت بالفعل. سنعالج الحالات الثلاث.

التكديس والإزالة

أبسط صيغة تبني شاشة الوجهة في مكانها:

import 'package:flutter/material.dart';

// Depuis l'écran de liste, on ouvre le détail.
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      // MaterialPageRoute applique la transition native de la plateforme :
      // glissement latéral sur iOS, fondu vertical sur Android.
      MaterialPageRoute(
        builder: (context) => const EcranDetail(),
      ),
    );
  },
  child: const Text('Voir le détail'),
)