Buka Layar Baru

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

Aplikasi memiliki lebih dari satu layar: daftar, lalu detail satu item, kemudian halaman pengaturan. Di Flutter, layar adalah widget, biasanya berupa Scaffold dalam class tersendiri.

Navigator menyimpan layar-layarmu dalam sebuah tumpukan, seperti tumpukan kartu. Layar yang berada di paling atas adalah yang kamu lihat. Navigator.push menaruh layar baru di paling atas:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute menggeser layar baru masuk seperti yang dilakukan ponsel. builder-nya adalah fungsi yang mengembalikan layar yang akan ditampilkan.

context memberi tahu Navigator posisimu di pohon widget. Itulah sebabnya HomeScreen adalah class tersendiri di dalam MaterialApp: context-nya dapat menemukan navigator yang dibuat oleh MaterialApp.

Tantangan

Mudah

Tombol About this app belum melakukan apa pun. Buat tombol tersebut membuka AboutScreen dengan Navigator.push.

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: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}