Media Belajar Bahasa Pemrograman | by APPKEY

DartTutorial Dart 32 : Memahami Navigation and Routing Flutter

Tutorial Dart 32 : Memahami Navigation and Routing Flutter

-

Pada Flutter telah tersedia mekanisme navigasi dan routing yang idiomatis, di mana hal ini mirip dengan metode build seperti yang digunakan pada widget. Pada artikel ini, kami akan mengajak Anda untuk memahami tentang Navigation and Routing Flutter. Jika Anda ingin tahu, simak terus artikel ini sampai akhir.

Apa Itu Navigation and Routing Flutter?

Navigation and Routing adalah beberapa konsep inti dari semua aplikasi seluler, yang memungkinkan pengguna berpindah di antara halaman yang berbeda. Kita tahu bahwa setiap aplikasi seluler berisi beberapa layar untuk menampilkan berbagai jenis informasi.

Misalnya, sebuah aplikasi dapat memiliki layar yang berisi berbagai produk. Ketika pengguna mengklik produk itu, segera akan muncul informasi rinci tentang produk itu. Di Flutter, layar dan halaman dikenal sebagai rute, dan rute ini hanyalah sebuah widget. Di Android, rute mirip dengan Activity, sedangkan di iOS setara dengan ViewController.

Di aplikasi seluler apa pun, menavigasi ke halaman yang berbeda menentukan alur kerja aplikasi, dan cara menangani navigasi dikenal sebagai routing. Flutter menyediakan kelas routing dasar MaterialPageRoute dan dua metode Navigator.push() dan Navigator.pop() yang menunjukkan cara menavigasi di antara dua rute. Langkah-langkah berikut diperlukan untuk memulai Navigation and Routing Flutter untuk aplikasi Anda.

  • Langkah 1: Pertama, Anda perlu membuat dua rute.
  • Langkah 2: Kemudian, navigasikan ke satu rute dari rute lain dengan menggunakan metode Navigator.push().
  • Langkah 3: Terakhir, navigasikan ke rute pertama dengan menggunakan metode Navigator.pop().

Menciptakan Dua Rute

Pada navigation dan routes pada Flutter ini kita akan membuat dua rute untuk navigasi. Di kedua rute, kami hanya membuat satu tombol. Ketika kita menekan tombol di halaman beranda, itu akan menavigasi ke halaman profile.

Sekali lagi, ketika kita menekan tombol di halaman profile, itu akan kembali ke halaman beranda. Cuplikan kode di bawah ini membuat dua rute di aplikasi Flutter.

1.	class BerandaRoute extends StatelessWidget {  
2.	  @override  
3.	  Widget build(BuildContext context) {  
4.	    return Scaffold(  
5.	      appBar: AppBar(  
6.	        title: Text('Beranda Route'),  
7.	      ),  
8.	      body: Center(  
9.	        child: RaisedButton(  
10.	          child: Text('Profile Route'),  
11.	          onPressed: () {  
12.	            // Akan menuju profile route ketika ditekan.  
13.	          },  
14.	        ),  
15.	      ),  
16.	    );  
17.	  }  
18.	}  
19.	  
20.	class ProfileRoute extends StatelessWidget {  
21.	  @override  
22.	  Widget build(BuildContext context) {  
23.	    return Scaffold(  
24.	      appBar: AppBar(  
25.	        title: Text("Profile Route"),  
26.	      ),  
27.	      body: Center(  
28.	        child: RaisedButton(  
29.	          onPressed: () {  
30.	            // Akan kembali menuju beranda route ketika ditekan.  
31.	          },  
32.	          child: Text('Beranda Route'),  
33.	        ),  
34.	      ),  
35.	    );  
36.	  }  
37.	}  

Menavigasikkan ke rute kedua menggunakan metode Navigator.push()

Selanjutnya pada tutorial navigation and routing Flutter ini, Anda melakukan navigasi ke rute profile menggunakan metode Navigator.push(). Metode Navigator.push() digunakan untuk menavigasi/beralih ke rute/halaman/layar baru.

Di sini, metode push() menambahkan halaman/rute pada tumpukan dan kemudian mengelolanya dengan menggunakan Navigator. Sekali lagi kami menggunakan kelas MaterialPageRoute yang memungkinkan transisi antara rute menggunakan animasi khusus platform. Kode di bawah ini menjelaskan penggunaan metode Navigator.push().

1.	// Diletakan pada BerandaRoute  
2.	onPressed: () {  
3.	  Navigator.push(  
4.	    context,  
5.	    MaterialPageRoute(builder: (context) => ProfileRoute()),  
6.	  );  
7.	}  

Kembali ke rute pertama menggunakan metode Navigator.pop()

Sekarang, kita perlu menggunakan metode Navigator.pop() untuk menutup rute profile dan kembali ke rute pertama. Metode pop() memungkinkan kita untuk menghapus rute saat ini dari tumpukan, yang dikelola oleh Navigator.

Untuk menerapkan kembali ke rute asli, kita perlu memperbarui metode callback onPressed() di widget SecondRoute seperti cuplikan kode di bawah ini:

Artikel Terkait  Tutorial Dart 6 : Pengenalan Operator pada Dart dan Contohnya

1.	// Diletakan pada ProfileRoute    
2.	onPressed: () {  
3.	  Navigator.pop(context);  
4.	}  

Sekarang, mari kita lihat kode lengkap untuk mengimplementasikan navigasi antara dua rute. Pertama, buat proyek Flutter dan masukkan kode berikut ke dalam file main.dart.

1.	import 'package:flutter/material.dart';  
2.	  
3.	void main() {  
4.	  runApp(MaterialApp(  
5.	    title: 'Flutter Navigation',  
6.	    theme: ThemeData(  
7.	      primarySwatch: Colors.black,  
8.	    ),  
9.	    home: BerandaRoute(),  
10.	  ));  
11.	}  
12.	  
13.	class BerandaRoute extends StatelessWidget {  
14.	  @override  
15.	  Widget build(BuildContext context) {  
16.	    return Scaffold(  
17.	      appBar: AppBar(  
18.	        title: Text('Beranda Route'),  
19.	      ),  
20.	      body: Center(  
21.	        child: RaisedButton(  
22.	          child: Text('Profile Route'),  
23.	          color: Colors.blueGrey,  
24.	          onPressed: () {  
25.	            Navigator.push(  
26.	              context,  
27.	              MaterialPageRoute(builder: (context) => ProfileRoute()),  
28.	            );  
29.	          },  
30.	        ),  
31.	      ),  
32.	    );  
33.	  }  
34.	}  
35.	  
36.	class ProfileRoute extends StatelessWidget {  
37.	  @override  
38.	  Widget build(BuildContext context) {  
39.	    return Scaffold(  
40.	      appBar: AppBar(  
41.	        title: Text("Profile Route"),  
42.	      ),  
43.	      body: Center(  
44.	        child: RaisedButton(  
45.	          color: Colors.blueGrey,  
46.	          onPressed: () {  
47.	            Navigator.pop(context);  
48.	          },  
49.	          child: Text('Beranda Route'),  
50.	        ),  
51.	      ),  
52.	    );  
53.	  }  
54.	}  

Navigasi dengan Rute Bernama

Pada Flutter, Anda dapat menavigasi ke layar baru dengan membuat rute baru dan mengelolanya dengan menggunakan Navigator. Navigator mempertahankan riwayat rute berbasis tumpukan (stack).

Jika ada kebutuhan untuk menavigasi ke layar yang sama di banyak bagian aplikasi, pendekatan ini tidak bermanfaat karena menghasilkan duplikasi kode. Solusi untuk masalah ini dapat dihilangkan dengan mendefinisikan rute bernama dan dapat menggunakan rute bernama untuk navigasi.

Kita dapat bekerja dengan rute bernama dengan menggunakan fungsi Navigator.pushNamed(). Fungsi ini membutuhkan dua argumen yang diperlukan (konteks dan string build) dan satu argumen opsional.

Selain itu,  kita tahu tentang MaterialPageRoute, yang bertanggung jawab untuk transisi halaman. Jika kita tidak menggunakan ini, maka sulit untuk mengubah halaman. Langkah-langkah berikut diperlukan, yang menunjukkan cara menggunakan rute bernama.

1. Buat dua layar

Anda perlu membuat dua layar ketika akan bekerja dengan navigation and routing Flutter. Kode berikut membuat dua layar di aplikasi yang sedang Anda buat.

1.	class BerandaScreen extends StatelessWidget {  
2.	  @override  
3.	  Widget build(BuildContext context) {  
4.	    return Scaffold(  
5.	      appBar: AppBar(  
6.	        title: Text('Beranda Screen'),  
7.	      ),  
8.	      body: Center(  
9.	        child: RaisedButton(  
10.	          child: Text('Search Screen'),  
11.	          color: Colors.blueGrey,  
12.	          onPressed: () {  
13.	          },  
14.	        ),  
15.	      ),  
16.	    );  
17.	  }  
18.	}  
19.	  
20.	class SearchScreen extends StatelessWidget {  
21.	  @override  
22.	  Widget build(BuildContext context) {  
23.	    return Scaffold(  
24.	      appBar: AppBar(  
25.	        title: Text("Search Screen"),  
26.	      ),  
27.	      body: Center(  
28.	        child: RaisedButton(  
29.	          color: Colors.blueGrey,  
30.	          onPressed: () {  
31.	          },  
32.	          child: Text('Beranda Screen'),  
33.	        ),  
34.	      ),  
35.	    );  
36.	  }  
37.	}  

2. Menentukan rute

Pada langkah ini, kita harus menentukan rute. Konstruktor MaterialApp bertanggung jawab untuk mendefinisikan rute awal dan rute lainnya sendiri.

Di sini rute awal memberitahu awal halaman dan properti rute mendefinisikan rute dan widget bernama yang tersedia. Kode berikut menjelaskannya dengan lebih jelas.

1.	MaterialApp(  
2.	  title: 'Named Route Navigation',  
3.	  theme: ThemeData(  
4.	    primarySwatch: Colors.black,  
5.	  ),  
6.	  initialRoute: '/',  
7.	  routes: {  
8.	    '/': (context) => BerandaScreen(),  
9.	    '/search': (context) => SearchScreen(),  
10.	  },  
11.	));  

3. Navigasikan ke layar kedua menggunakan fungsi Navigator.pushNamed().

Pada langkah ini, kita perlu memanggil metode Navigator.pushNamed() untuk navigasi. Untuk ini, kita perlu memperbarui callback onPressed() dalam metode build HomeScreen seperti cuplikan kode di bawah ini.

1.	onPressed: () {    
2.	  Navigator.pushNamed(context, '/search');  
3.	}  

4. Gunakan fungsi Navigator.pop() untuk kembali ke layar pertama.

Ini adalah langkah terakhir dalam navigation dan routes pada Flutter, di mana kita akan menggunakan metode Navigator.pop() untuk kembali ke layar pertama.

1.	onPressed: () {  
2.	  Navigator.pop(context);  
3.	},  

Berikut ini adalah kode lengkap dari penjelasan di atas dalam proyek Flutter dan jalankan di emulator untuk mendapatkan output.

1.	import 'package:flutter/material.dart';  
2.	  
3.	void main() {  
4.	  runApp( MaterialApp(  
5.	    title: 'Named Route Navigation',  
6.	    theme: ThemeData(  
7.	      primarySwatch: Colors.black,  
8.	    ),  
9.	    initialRoute: '/',  
10.	    routes: {  
11.	      '/': (context) => BerandaScreen(),  
12.	      '/search': (context) => SearchScreen(),  
13.	    },  
14.	  ));  
15.	}  
16.	  
17.	class BerandaScreen extends StatelessWidget {  
18.	  @override  
19.	  Widget build(BuildContext context) {  
20.	    return Scaffold(  
21.	      appBar: AppBar(  
22.	        title: Text('Beranda Screen'),  
23.	      ),  
24.	      body: Center(  
25.	        child: RaisedButton(  
26.	          child: Text('Search Screen'),  
27.	          color: Colors.blueGrey,  
28.	          onPressed: () {  
29.	            Navigator.pushNamed(context, '/search');  
30.	          },  
31.	        ),  
32.	      ),  
33.	    );  
34.	  }  
35.	}  
36.	  
37.	class SearchScreen extends StatelessWidget {  
38.	  @override  
39.	  Widget build(BuildContext context) {  
40.	    return Scaffold(  
41.	      appBar: AppBar(  
42.	        title: Text("Search Screen"),  
43.	      ),  
44.	      body: Center(  
45.	        child: RaisedButton(  
46.	          color: Colors.blueGrey,  
47.	          onPressed: () {  
48.	            Navigator.pop(context);  
49.	          },  
50.	          child: Text('Beranda Screen'),  
51.	        ),  
52.	      ),  
53.	    );  
54.	  }  
55.	}  

Itulah penjelasan tentang navigation and routing Flutter yang perlu Anda ketahui ketika ingin belajar Flutter. Jika Anda tertarik untuk belajar Flutter secara lebih mendalam, jangan lupa kunjungi Tutorial Dart di Codekey.

Codekey adalah media untuk Anda yang ingin belajar bahasa pemrograman secara gratis dan dapat diakses kapan saja serta di mana saja.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Python 9 : Cara Membuat Looping Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial Python 7 : Python String Format dan Cara Mudahnya

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial PHP 22 : Cara Membuat Redirect PHP dengan Cepat dan Mudah

Jika Anda melakukan browsing di browser kesayangan Anda, mungkin Anda pernah melihat link yang berisikan “php redirect” atau yang...

Tutorial PHP 23 : Cara Membuat Messages Alert PHP

Alert box atau alert messages digunakan di situs web untuk menampilkan pesan peringatan kepada pengguna bahwa mereka telah memasukkan...

Tutorial Dart 18 : Ayo Mulai, Pelajari Cara Install Flutter

Pada seri tutorial Dart kali ini, Codekey akan menampilkan hal yang sedikit berbeda, yaitu tentang aplikasi-aplikasi yang mendukung pemrograman...

Tutorial SQL 8 : Constraint SQL, Bagaimana Fungsi dan Penggunaannya?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Tutorial Javascript 8 : Array Javascript, Panduan Lengkap Cara Membuatnya

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial PHP 8 : Memahami Array Multidimensi PHP

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial SQL 9 : Agregasi SQL, Cara Mengolah data Menggunakan Fungsi Ini

Agregasi data adalah cara runtuh, meringkas, atau mengelompokan data. Agregasi adalah hal yang selalu ada di setiap aplikasi untuk...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya