Tutorial Flutter Cara Mudah Berpindah Halaman

Tutorial Flutter Cara Mudah Berpindah Halaman

Codingtive.com - Aplikasi yang bersifat dinamis tentunya membutuhkan interaksi antara halaman satu dengan halaman yang lainya. Pada tutorial ini kita akan belajar cara yang paling dasar untuk berpindah halaman menggunakan Flutter.

Untuk berpindah halaman, Flutter memiliki beberapa metode. Sekarang kita akan mencoba menggunakan metode yang dasar dan sangat mudah, yaitu menggunakan method Navigator.push() dan Navigator.pop(). Apa perbedaanya ?

Navigator.push() : untuk berpindah ke route yang baru atau route yang lain.
Navigator.pop() : untuk menghapus route yang terakhir dan kembali ke route sebelumnya

Ikuti langkah-langkah berikut untuk mencoba mengimplementasikan penggunaan Navigator.push() dan Navigator.pop() :

1. Buat project Flutter

Buat project flutter terlebih dahulu, contohnya project yang saya buat namanya basicNavigation. Kalian dapat menggunakan Android Studio atau menggunakan versi CLI untuk membuat projectnya. Ketika membuat project, pastikan laptop kalian terkoneksi dengan internet.

2. Buka file main.dart

Setelah selesai membuat project, kemudian buka file main.dart yang berada pada folder lib. Hapus semua kode bawaan yang sudah otomatis ada ketika membuat project flutter. 

Berikut urutan menambahkan kodenya :

Tambahkan kode untuk import library material.dart :

import 'package:flutter/material.dart';

Tambahkan kode dibawahnya untuk main supaya dapat ditampilkan :

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: HalamanPertama(),
  ));
}

Pada kode diatas, halaman yang pertama kali ditampilkan yaitu class HalamanPertama, selanjutnya tambahkan kode dibawahnya untuk membuat class HalamanPertama :

class HalamanPertama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Pertama'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Pindah Halaman Kedua'),
          onPressed: () {
            // implementasi Navigator.push()
          },
        ),
      ),
    );
  }
}

Sekarang halaman pertama sudah kita buat, selanjutnya buat class untuk halaman kedua. Tambahkan kode dibawahnya, kodenya seperti berikut :

class HalamanKedua extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Kedua"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
          onPressed: () {
            // implementasi Navigator.pop()
          },
        ),
      ),
    );
  }
}

3. Implementasi Navigator

Setelah membuat halaman pertama dan kedua, sekarang kita akan mengimplementasikan Navigator.push() untuk berpindah halaman kedua dan Navigator.pop() untuk kembali ke halaman pertama.

Cara implementasinya yaitu lihat pada class HalamanPertama bagian RaisedButton terdapat properties onPressed() yang isinya komentar untuk implementasi. Tambahkan kode dibawah komentar atau ganti kode komentar dengan kode berikut :

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

Kemudian untuk halaman kedua juga sama, tambahkan kode untuk implementasi Navigator.pop() setelah komentar atau ganti komentarnya pada bagian onPressed() :

Navigator.pop(context);

Untuk kode lengkap pada file main.dart menjadi seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: HalamanPertama(),
  ));
}

class HalamanPertama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Pertama'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Pindah Halaman Kedua'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => HalamanKedua()),
            );
          },
        ),
      ),
    );
  }
}

class HalamanKedua extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Kedua"),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Kembali'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

4. Jalankan project

Untuk mencobanya, jalankan project yang sudah dibuat menggunakan emulator atau real device. Hasilnya seperti berikut :

Demikian Tutorial Flutter Cara Mudah Berpindah Halaman, jika kalian ada pertanyaan atau mau berdiskusi dapat lewat kolom komentar dibawah. Jangan lupa share dan terus kunjungi codingtive ya.

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: