Flutter Navigator

View Categories

Flutter Navigator

Untuk membuat aplikasi yang sesuai dengan kebutuhan pengguna, seringkali dibutuhkan beberapa layar yang berbeda. Pengguna akan berpindah-pindah dari layar-layar tersebut dan kembali ke layar utama. Di Flutter, fitur ini dapat diimplementasikan menggunakan Navigator yang merupakan bagian dari framework Flutter.

Dalam artikel ini, kita akan membahas bagaimana proses navigasi dilakukan melalui dua route atau layar yang berbeda. Untuk melakukannya, kita dapat mengikuti beberapa langkah berikut:

  1. Membuat dua route atau layar yang berbeda.
  2. Navigasi ke route atau layar kedua menggunakan fungsi Navigator.push().
  3. Kembali ke route atau layar pertama menggunakan fungsi Navigator.pop().

Mari kita bahas langkah-langkah tersebut dengan lebih detail.

Membuat Dua Route

Di sini, kita akan membuat dua route, di mana route pertama akan memiliki satu tombol yang jika ditekan akan membawa pengguna ke route kedua, dan begitu juga sebaliknya untuk route kedua yang memiliki satu tombol untuk mengembalikan pengguna ke route pertama. Untuk melakukannya, ikuti kode di bawah ini:

// ignore: camel_case_types
class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Halaman 1'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Pergi ke halaman 2'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen Halaman 2"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Kembali!'),
        ),
      ),
    );
  }
}

Fungsi Navigator.push

Untuk beralih ke route baru, gunakan fungsi Navigator.push. Fungsi push menambahkan route ke dalam tumpukan route yang dikelola oleh Navigator. Di dalam fungsi build() widget route pertama, buat pemanggilan onPressed agar mengarah ke route kedua seperti di bawah ini:

onPressed: () {
            Navigator.pushNamed(context, '/second');
          },

Fungsi Navigator.pop

Untuk mengimplementasikan kembali ke route asli, buat pemanggilan onPressed pada route kedua seperti berikut:

onPressed: () {
            Navigator.pop(context);
          },

Berikut ini adalah source code lengkap ketika telah mengikuti langkah di atas

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Named Routes',
    initialRoute: '/',
    routes: {
      '/': (context) => const firstRoute(),
      '/second': (context) => const secondRoute(),
    },
  ));
}

// ignore: camel_case_types
class firstRoute extends StatelessWidget {
  const firstRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Halaman 1'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Pergi ke halaman 2'),
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
        ),
      ),
    );
  }
}

// ignore: camel_case_types
class secondRoute extends StatelessWidget {
  const secondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Nextgen Halaman 2"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Kembali!'),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter WebSocket
Tutorial setelahnya : Argumen Dalam Named Route Di Flutter
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan