12.Flutter - Navigation



Navigasi


Navigasi merupakan kunci dari aplikasi berbasis mobile dimana user dapat berpindah antar halaman, misalanya user membuka halaman utama dan halaman detail, flutter menyediakan kelas Navigator untuk membantu kita melakukan navigasi pada aplikasi yang kita buat, kita bisa membuat navigasi antar widget dengan nama atau tanpa nama routes.

Stack dari Navigasi

Ketika kita mulai menggunakan kelas Navigator, hal yang perlu kita ketahui adalah bahwa kelas tersebut memanajemen tumpukan (Stack) Navigasi, history dari screen/pages yang telah dikunjungi. ketika kita melakukan navigasi kembali (back), kita melakukan pop Route dari stack.

Navigasi Forward

Ketika kita beralih ke halaman lain dari halaman awal, kita melakukan push Navigasi ke stack.



Navigasi Back



Navigasi Tanpa Nama dengan parameter

Navigasi ini dapat kita gunakan untuk aplikasi sederhana yang tidak terlalu banyak widget, untuk melakukan navigasi forward berikut adalah contohnya:


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

Kita membuat objek dari MaterialPageRoute dengan builder yang akan menciptakan widget untuk dinavigasi.

Cara lain untuk melakukan hal sama tanpa menciptakan MaterialPageRoute adalah dengan PageRouteBuilder.


PageRouteBuilder pageRoute = PageRouteBuilder (
  pageBuilder: (BuildContext context, Animation animation, Animation secondaryAnimation) {
    return YourWidget(yourWidget);
    }
  );

Navigator.push(context, pageRoute,);

Ketika melakukan navigasi, MaterialPageRoutes melakukan animasi secara otomatis untuk aplikasi yang kita buat, animasi akan berbeda untuk setiap platform (Android, iOS). PageRouteBuilder mengizinkan kita untuk membuat animasi yang kita inginkan.

MaterialPageRoute juga mempunyai custructor fullScreenDialog, hal ini membuat target Widget baru ditampilkan sebagai sebuah dialog dengan tombol close dari pada tombol back.

Untuk melakukan navigasi back kita tidak melakukan kode apapun, tombol back akan otomatis melakukan Navigator.pop untuk mengembalikan user ke halaman sebelumnya.


Demo Navigation Tanpa Nama (Download Source Code)

  1. Langkah 1. Download (clone) Kode dari github.
  2. Langkah 2. Buat sebuah project baru
  3. Langkah 3. Hapus seluruh kode yang ada di main.dart
  4. Langkah 4. Ketik kode yang sudah di clone dari github pada folder app_navigation/main.dart


Navigasi Dengan Nama

Navigasi dengan nama, menjadikan kode kita lebih baik dan mencegah duplikasi kode. Kita mendefenisikan route (navigasi) ketika kita membangun (build) MaterialApp pada Top Widget Tree.

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return new MaterialApp(
       ... [ // kode lainnya ] ...
       routes: <String, WidgetBuilder> {
         '/customer': (context) => CustomerWidget(),
         '/order': (context) => OrderWidget(), 
       },
     );
   }
}

Karena kita telah mendefenisikan routenya, maka untuk melakukan navigasi kita hanya perlu memanggil nama routenya saja:

Navigator.pushNamed(context, "/order");


Sangat mudah bukan ? hal yang perlu diingat bahwa, jika menggunakan named route maka home: pada MaterialApp tidak digunakan.

Demo Navigation Dengan Nama (Download Source Code)
  1. Langkah 1. Download (clone) Kode dari github.
  2. Langkah 2. Buat sebuah project baru
  3. Langkah 3. Hapus seluruh kode yang ada di main.dart
  4. Langkah 4. Ketik kode yang sudah di clone dari github pada folder app_navigation/main2.dart

Melewatkan Argumen Ke Routing Dengan Nama

Navigator menyediakan kemampuan untuk beranvigasi ke nama routing dari bagian manapun dari aplikasi menggunakan indentifier umum, ada kalanya kita ingin melewatkan argumen (data) ke routing dengan nama. Kita bisa menggunakan argumen/parameter dari metode Navigator.pushNamed(). Gunakan metode ModalRoute.of() untuk meng-ekstrak argumennya, atau didalam fungsi onGenerateRoute() yang disediakan oleh konstruktor MaterialApp atau CupertinoApp.

Demo Parameter Navigasi Dengan Nama (Download Source Code)
  1. Langkah 1. Download (clone) Kode dari github.
  2. Langkah 2. Buat sebuah project baru
  3. Langkah 3. Hapus seluruh kode yang ada di main.dart
  4. Langkah 4. Ketik kode yang sudah di clone dari github pada folder app_navigation/main2_parameter.dart



12.Flutter - Navigation 12.Flutter - Navigation Reviewed by jc on April 28, 2020 Rating: 5

No comments:

Powered by Blogger.