Menu
CoddyTech

Kembali dengan Tombol

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

Tombol panah kembali bukan satu-satunya cara untuk kembali. Tombol Simpan atau Selesai juga seharusnya menutup layarnya saat ditekan. Navigator.pop mengeluarkan layar teratas dari tumpukan, sama seperti tombol panah kembali:

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

Push dan pop adalah sepasang: push menambahkan layar ke tumpukan, pop mengeluarkannya. Mendorong layar beranda lagi tidak akan membawa kamu kembali. Tindakan itu akan menambahkan layar beranda kedua di atas tumpukan, dengan tombol panah kembali yang mengarah ke pengaturan.

challenge icon

Tantangan

Mudah

Tombol Save di layar pengaturan tidak melakukan apa pun. Buat tombol itu menutup layar pengaturan dan kembali ke layar beranda dengan Navigator.pop.

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Save'),
        ),
      ),
    );
  }
}
quiz iconUji dirimu

Pelajaran ini berisi kuis singkat. Mulai pelajarannya untuk menjawab kuis dan melacak progresmu.

Semua pelajaran di List dan Layar

Latihan sendiri: Compiler Flutter online