Panah Kembali

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

Layar yang kamu dorong ke stack memerlukan cara untuk kembali. AppBar menyediakan cara itu secara otomatis: saat ada layar di bawahnya dalam stack, app bar menampilkan panah kembali di bagian awalnya.

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

Ketuk panah itu untuk mengeluarkan layar teratas dari stack, lalu layar di bawahnya akan muncul kembali seperti semula. Gestur kembali bawaan ponsel dan tombol kembali Android melakukan hal yang sama.

Layar pertama aplikasi tidak memiliki layar di bawahnya, jadi app bar-nya tidak menampilkan panah.

Tantangan

Mudah

Buka detail di ponsel: tidak ada cara untuk kembali. Beri DetailScreen sebuah AppBar dengan judul Details, agar muncul panah kembali.

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 StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}