Tutorial Flutter Cara Gampang Berpindah Halaman

Tutorial Flutter Cara Praktis Berpindah Halaman

 - Aplikasi yang bersifat dinamis tentunya membutuhkan interaksi antara halaman satu dengan halaman yang lainya. Pada tutorial ini kita akan mencar ilmu cara yang paling dasar untuk berpindah halaman memakai Flutter.

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

Navigator.push() : untuk berpindah ke route yang gres 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, misalnya project yang aku buat namanya basicNavigation. Kalian sanggup memakai Android Studio atau memakai versi CLI untuk menciptakan projectnya. Ketika menciptakan project, pastikan laptop kalian terkoneksi dengan internet.

2. Buka file main.dart

Setelah selesai menciptakan project, lalu buka file main.dart yang berada pada folder lib. Hapus semua aba-aba bawaan yang sudah otomatis ada dikala menciptakan project flutter. 

Berikut urutan menambahkan kodenya :

Tambahkan aba-aba untuk import library material.dart :

import 'package:flutter/material.dart'; 

Tambahkan aba-aba dibawahnya untuk main agar sanggup ditampilkan :

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

Pada aba-aba diatas, halaman yang pertama kali ditampilkan yakni class HalamanPertama, selanjutnya tambahkan aba-aba dibawahnya untuk menciptakan 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 aba-aba dibawahnya, kodenya menyerupai 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 menciptakan halaman pertama dan kedua, kini kita akan mengimplementasikan Navigator.push() untuk berpindah halaman kedua dan Navigator.pop() untuk kembali ke halaman pertama.

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

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

Kemudian untuk halaman kedua juga sama, tambahkan aba-aba untuk implementasi Navigator.pop() sehabis komentar atau ganti komentarnya pada bab onPressed() :

Navigator.pop(context); 

Untuk aba-aba lengkap pada file main.dart menjadi menyerupai 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 dibentuk memakai emulator atau real device. Hasilnya menyerupai berikut :

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

Share this post