Tutorial Flutter Cara Routing dengan Navigator

Tutorial Flutter Cara Routing dengan Navigator 

Codingtive.com - Navigasi digunakan untuk interaksi dan berpindah dari halaman satu ke halaman lainnya, untuk navigasi pada Flutter memiliki beberapa metode. Pada tutorial ini kita akan belajar membuat routing dan berpindah halaman dengan menggunakan Navigator.pushNamed(). Navigator.pushNamed() digunakan untuk berpindah halaman dengan menggunakan penamaan dari routenya. 

Codingtive menyediakan tutorial flutter bahasa indonesia, untuk metode berpindah halaman yang paling dasar dan mudah kalian dapat mempelajarinya pada Tutorial Flutter Cara Mudah Berpindah Halaman.

Kita akan belajar membuat aplikasi yang dapat berpindah dari satu halaman ke halaman lain, dengan menggunakan metode routing navigator.pushNamed(). Ikuti langkah-langkah berikut :

1. Buat project flutter

Pastikan laptop kalian sudah install flutter, jika belum kalian dapat mencobanya di dokumentasi cara install flutter. Buat project flutter dan beri nama flutter_routing, untuk instalasinya membutuhkan koneksi internet dan tunggu sampai proses sinkronisasi selesai.

2. Membuat layout

Selanjutnya kita akan membuat 3 halaman untuk mencoba berpindah halaman, buka file main.dart pada folder lib. Kemudian hapus semua isinya, pertama tambahkan import library material terlebih dahulu :

import 'package:flutter/material.dart';

Selanjutnya buat class untuk halaman pertama, dan sediakan tombol untuk berpindah halaman, kodenya seperti berikut :

class HalamanPertama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Pertama'),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            RaisedButton(
              child: Text('Pindah Halaman Kedua'),
              onPressed: () {
                Navigator.pushNamed(context, HalamanKedua.routeName);
              },
            ),
            RaisedButton(
              child: Text('Pindah Halaman Ketiga'),
              onPressed: () {
                Navigator.pushReplacementNamed(context, HalamanKetiga.routeName);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Terdapat 2 button pada kode diatas, berikut perbedaannya :

Navigator.pushNamed() : berpindah halaman dan dapat kembali ke halaman sebelumnya

Navigator.pushReplacementNamed() : berpindah halaman, namun tidak dapat kembali ke halaman sebelumnya

Kemudian buatlah class untuk halaman kedua, tambahkan kode dibawah class halaman pertama :

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

Navigator.pop() : digunakan untuk kembali ke halaman / route yang sebelumnya.

Selanjutnya buat class untuk halaman ketiga, tambahkan kode dibawah class halaman kedua :

class HalamanKetiga extends StatelessWidget {
  static const String routeName = "/halamanKetiga";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Ketiga"),
      ),
      body: Center(
        child: Text('Halaman Ketiga'),
      ),
    );
  }
}

Pada halaman ketiga tidak dapat kembali ke route atau halaman sebelumnya, karena sebelumnya kita menggunakan Navigator.pushReplacementNamed() untuk berpindah ke halaman ketiga.

3. Membuat routing 

Setelah halaman sudah kita buat, selanjutnya kita akan membuat routing, caranya dengan menambahkan kode berikut dan letakan setelah import :

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Routing Navigation',
    initialRoute: '/',
    routes: {
      '/' : (context) => HalamanPertama(),
      HalamanKedua.routeName : (context) => HalamanKedua(),
      HalamanKetiga.routeName : (context) => HalamanKetiga(),
    },
  ));
}

initialRoute : digunakan untuk route default yang pertama kali ditampilkan, pada kode diatas route yang pertama kali ditampilkan yaitu halaman pertama.

routes : berisi daftar nama route untuk setiap halaman, agar route halaman dapat diakses perlu di registrasi nama routenya pada bagian routes.

Sebelum mencoba dijalankan, buka file widget_test.dart pada folder test. dan tambahkan komentar untuk pemanggilan class MyApp karena kita tidak menggunakan class tersebut. Kode yang dikomentar seperti berikut :

//import 'package:first_app/main.dart';
//await tester.pumpWidget(MyApp());

Kode Lengkap

Untuk kode lengkapnya pada file main.dart seperti berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Routing Navigation',
    initialRoute: '/',
    routes: {
      '/' : (context) => HalamanPertama(),
      HalamanKedua.routeName : (context) => HalamanKedua(),
      HalamanKetiga.routeName : (context) => HalamanKetiga(),
    },
  ));
}

class HalamanPertama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Pertama'),
      ),
      body: Center(
        child: ListView(
          children: <Widget>[
            RaisedButton(
              child: Text('Pindah Halaman Kedua'),
              onPressed: () {
                Navigator.pushNamed(context, HalamanKedua.routeName);
              },
            ),
            RaisedButton(
              child: Text('Pindah Halaman Ketiga'),
              onPressed: () {
                Navigator.pushReplacementNamed(context, HalamanKetiga.routeName);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

class HalamanKetiga extends StatelessWidget {
  static const String routeName = "/halamanKetiga";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Halaman Ketiga"),
      ),
      body: Center(
        child: Text('Halaman Ketiga'),
      ),
    );
  }
}

Sekarang coba jalankan dengan emulator atau hp kalian, hasilnya seperti berikut :

Demikian Tutorial Flutter Cara Routing dengan Navigator, jika teman-teman ada pertanyaan atau kendala dapat mengisi kolom komentar dibawah. Jangan lupa untuk subscribe website codingtive untuk mendapatkan pemberitahuan update tutorial dan artikel menarik lainnya.

Untuk belajar lebih lanjut dan menerapkan yang sudah kalian pelajari pada tutorial ini, kalian dapat melanjutkan belajar pada Tutorial Membuat Form Login dan Register Keren dengan Flutter. Semoga bermanfaat.

Bagikan Artikel ini

Berlangganan update artikel terbaru via email: