Skip to content

A. Routing

1. Apa itu Routing ?

Routing / Route pada flutter mirip dengan routing pada umumnya yakni proses penamaan suatu alamat aplikasi agar ketika dibuka tidak harus menggunakan nama aslinya. Dengan pengalamatan ini aplikasi akan menjadi lebih rapih dan terstruktur.

Alt text

Bagaimana cara membuat routing ?

2. Buat Project Flutter

Buat project flutter baru dengan nama app_latihan

setelah project sudah dibuat buat 3 file dart baru pada pada folder lib dengan nama page1.dart,page2.dart,page3.dart seperti ini:

Alt text

3. Navigator dasar

Sebelum kita belajar mengenai route, kita akan membuat perpindahan halaman dari home - page3 menggunakan navigator yang sudah pernah dipelajari sebelumnya. Tulis kode berikut ini

main.dart
// ignore_for_file: use_key_in_widget_constructors

import 'package:app_latihan/page1.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Home Page"),
        centerTitle: true,
        backgroundColor: Colors.green[300],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) => Page1()));
                },
                child: const Text("Next Page"))
          ],
        ),
      ),
    );
  }
}

Kode ini akan menghasilkan tampilan tombol yang apabila diklik akan berpindah ke page selanjutnya. Selanjutnya pada page1.dart buat seperti ini:

page1.dart
// ignore_for_file: use_key_in_widget_constructors, prefer_const_constructors

import 'package:app_latihan/page2.dart';
import 'package:flutter/material.dart';

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Halaman 1"),
        centerTitle: true,
        backgroundColor: Colors.green[300],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(bottom: 20),
              child: ElevatedButton(
                  onPressed: () {
                    Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) => Page2()));
                  },
                  child: const Text("Next Page")),
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.pop(context);
                },
                child: const Text("Back"))
          ],
        ),
      ),
    );
  }
}

lalu pada page2.dart :

page2.dart
// ignore_for_file: use_key_in_widget_constructors, prefer_const_constructors

import 'package:app_latihan/page3.dart';
import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Halaman 2"),
        centerTitle: true,
        backgroundColor: Colors.green[300],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(bottom: 20),
              child: ElevatedButton(onPressed: () {
                Navigator.of(context)
                        .push(MaterialPageRoute(builder: (context) => Page3()));
              }, child: const Text("Next Page")),
            ),
            ElevatedButton(onPressed: () {
              Navigator.pop(context);
            }, child: const Text("Back"))
          ],
        ),
      ),
    );
  }
}

dan yang terakhir page3.dart:

page3.dart
// ignore_for_file: use_key_in_widget_constructors, prefer_const_constructors

import 'package:app_latihan/main.dart';
import 'package:flutter/material.dart';

class Page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Halaman 3"),
        centerTitle: true,
        backgroundColor: Colors.green[300],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              margin: EdgeInsets.only(bottom: 20),
              child: ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text("Back")),
            ),
            ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pushAndRemoveUntil(
                      MaterialPageRoute(builder: (context) => MyHomePage()),
                      (route) => false);
                },
                child: const Text("Back To Home"))
          ],
        ),
      ),
    );
  }
}

Keterangan

  • Untuk perpindahan halaman kita dapat menggunakan push
  • Untuk menghapus / kembali ke halaman kita dapat menggunakan pop
  • Untuk pushAndRemoveUntil untuk berpindah ke halaman lain dan menghapus halaman - halaman sebelumnya

4. Memulai Route

Pada main.dart buat menjadi seperti ini:

main.dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => MyHomePage(),
        '/hal1': (context) => Page1(),
        '/hal2': (context) => Page2(),
        '/hal3': (context) => Page3(),
      },
    );
  }
}

Keterangan

  • Hapus home pada materialapp
  • Initial Route digunakan untuk memilih halaman apa yang akan dijalankan pertama kali dalam hal ini yang akan di jalankan adalah '/'
  • Routes ini adalah tempat kita mendaftarkan halaman - halaman yang ada di dalam aplikasi kita. '/' adalah nama routenya & dikanannya adalah class halaman yang akan di tampilkan.

Selanjutnya coba restart app kalian, jika hasilnya tidak ada perubahan maka routenya berhasil karena kita sudah merubah dari aplikasi tanpa route menjadi memakai route

Merubah semua navigator

pada MyHomePage ubah aksi onpressed menjadi seperti ini

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, "/hal1"),
          child: const Text("Next Page"))
    ],
  ),
),

dengan menggunakan route kode perpindahan halaman menjadi lebih praktis untuk digunakan.

Tantangan
Sebagai tantangan ubahlah page1.dart,page2.dart,page3.dart menggunakan route

5. Mengirim Data

Contoh penggunaan route yang tadi hanyalah untuk perpindahan halaman saja lantas bagaimana kalau saat perpindahan harus mengirim data?

caranya adalah seperti ini:

main.dart
body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      ElevatedButton(
          onPressed: () => Navigator.pushNamed(context, "/hal1", arguments: "Hallo Route"),
          child: const Text("Next Page"))
    ],
  ),
),

kalau kita lihat kita menambahkan arguments untuk mengirim data ke halaman yang lainnya. lalu untuk menangkap datanya kodenya seperti ini:

page1.dart
Widget build(BuildContext context) {
  final data = ModalRoute.of(context)!.settings.arguments;  //mengambil data dari argumen

  return Scaffold(
    appBar: AppBar(
      title: const Text("Halaman 1"),
      centerTitle: true,
      backgroundColor: Colors.green[300],
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //menampilkan datanya
          Container(
            margin: EdgeInsets.only(bottom: 20),
            child: Text("Data yang masuk adalah ${data}")
          ),

          Container(
            margin: EdgeInsets.only(bottom: 20),
            child: ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, "/hal2"),
                child: const Text("Next Page")),
          ),
          ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("Back"))
        ],
      ),
    ),
  );
}

contoh diatas adalah pengiriman data tunggal / 1 buah data saja. Lantas bagaimana cara mengirim lebih dari 1?

untuk mengirim data lebih dari 1 kita dapat membuat class terlebih dahulu. Buat folder (di dalam folder lib) dengan nama model > lalu buat file baru dengan nama user.dart

user.dart
class User {
  String email;
  String password;

  User(this.email, this.password);
}

Setelah modelnya telah kita buat, barulah kita dapat memasukkan datanya

page1.dart
Container(
  margin: EdgeInsets.only(bottom: 20),
  child: ElevatedButton(
      onPressed: () => Navigator.pushNamed(context, "/hal2", arguments: User("admin@gmail.com", "12345678")),
      child: const Text("Next Page")),
),

Jika terdapat error impport model user yang tadi sudah di buat,untuk mengambil datanya bisa dengan cara berikut:

page2.dart
Widget build(BuildContext context) {
  final data = ModalRoute.of(context)!.settings.arguments as User; //ambil data

  return Scaffold(
    appBar: AppBar(
      title: const Text("Halaman 2"),
      centerTitle: true,
      backgroundColor: Colors.green[300],
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          //menampilkan data
          Container(
            margin: EdgeInsets.only(bottom: 20),
            child: Text("Email antum adalah ${data.email}")
          ),

          Container(
            margin: EdgeInsets.only(bottom: 20),
            child: ElevatedButton(
                onPressed: () => Navigator.pushNamed(context, "/hal3"),
                child: const Text("Next Page")),
          ),
          ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: const Text("Back"))
        ],
      ),
    ),
  );
}

Jalankan kembali & lihat perubahannya

Keterangan

  • dengan menggunakan model, data kita akan lebih enak untuk di panggil