flutter

Berpindah Antar Dua Halaman dengan Navigasi dalam FLutter

Keinginan:

  1. Saya ingin ketika saya tekan tulisan ‘Register here’ pada Login Form maka akan tampil halaman Form Register
  2. Ketika saya tekan tulisan ‘Kembali ke Form Login’ pada Form Register maka halaman login akan ditampilkan

 

Form Login

Buka file main.dart lalu cari kode berikut ini:

 TextButton(
                  onPressed: ( ) { },
                  child: Text(‘Register here’),
                )
Lalu masukkan kode ini dalam metode onPressed:
Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return Register();
                        },
                      ),
                    );
Keterangan:
  • Navigator.push adalah metode yang digunakan untuk menambah rute sehingga kita akan menuju ke halaman yang dituju
  • context disini adalah BuildContext jadi class MaterialApp itu tidak boleh didalamnya
  • MaterialPageRoute adalah rute milik library material

 

Import File Register

Bukalah file main.dart lalu tambahkan kode import seperti dibawah ini:
import ‘package:teks/register.dart’;
Keterangan:
teks disini adalah nama projek saya

 

Form Register

Buka file main.dart lalu cari kode berikut ini:

 TextButton(
                  onPressed: ( ) { },
                  child: Text(‘Kembali ke Form Login’),
                )
Lalu masukkan kode ini dalam metode onPressed:
Navigator.pop(context);

Keterangan:

Navigator.pop adalah metode yang digunakan untuk menghapus rute sehingga kita kembali ke halaman sebelumnya

 

Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5