Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DevCoach 164: Flutter | Navigasikan Aplikasimu ...
Search
Nad
August 18, 2024
0
30
DevCoach 164: Flutter | Navigasikan Aplikasimu dengan Navigator 2.0
Nad
August 18, 2024
Tweet
Share
More Decks by Nad
See All by Nad
DevCoach 173: iOS | Mendalami SwiftUI, UI Framework Masa Depan!
nadiaaa22
0
53
DevCoach 172: Flutter | Tingkatkan Pengalaman Pengguna dengan Lokalisasi dan Aksesibilitas
nadiaaa22
0
62
DevCoach 171: Machine Learning in Google Cloud | Vertex AI di Google Cloud
nadiaaa22
0
180
DevCoach 170: Data Science | Data + Visuals = Dashboards with Impact!
nadiaaa22
0
81
DevCoach 169: Flutter | Jelajahi Media Gambar dengan Image Picker
nadiaaa22
0
62
DevCoach 168: ML in Google Cloud | Training dan Deployment Model Machine Learning dengan Google Cloud
nadiaaa22
0
76
DevCoach 167: Data Science | Aku Bisa, Coders! Mengolah Data Amburadul Jadi Lebih Insightful
nadiaaa22
0
65
DevCoach 166: Flutter | Navigasi Masa Depan dengan GoRouter
nadiaaa22
0
38
DevCoach 165: Data Science | Data Scientist Nggak Bisa Analisis Data? Jangan ya dek ya!
nadiaaa22
0
65
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
43
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
Designing for humans not robots
tammielis
249
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
What's in a price? How to price your products and services
michaelherold
243
11k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
How GitHub (no longer) Works
holman
311
140k
RailsConf 2023
tenderlove
28
870
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Transcript
Navigasikan Aplikasimu dengan Navigator 2.0 Achmad Ilham Imanuddin Curriculum Developer
Multi-platform Flutter
Pokok Pembahasan • Berpetualang dalam Navigasi Flutter • Berkenalan dengan
Navigator 2.0 • Praktik Seru dengan Navigator 2.0 • Eksplorasi Dunia Navigator 2.0 di Web App Multi-platform Flutter
None
None
Navigasi di Flutter
Navigation Anonymous Routes
Anonymous Routes Cara ini dilakukan seperti navigasi aplikasi mobile pada
umumnya yang menampilkan halaman di atas halaman lainnya, seperti tumpukan halaman (stack).
Anonymous Routes Untuk berpindah ke halaman lain, cara ini tidak
perlu memanggil nama rute. • Navigator.push() untuk menampilkan halaman baru. • Navigator.pop() untuk kembali ke halaman sebelumnya.
Anonymous Routes Untuk berpindah ke halaman lain, cara ini tidak
perlu memanggil nama rute. • Navigator.push() untuk menampilkan halaman baru. • Navigator.pop() untuk kembali ke halaman sebelumnya
Anonymous Routes Limitasinya: • Tidak cocok untuk aplikasi besar •
Sulit di-maintain
Navigation Anonymous Routes Named Routes
Named Routes Cara ini memanfaatkan properti routes di MaterialApp atau
CupertinoApp.
Named Routes Untuk bernavigasi, cukup memanfaatkan method pushNamed(). Hanya menambahkan
nama rute yang sudah didaftarkan sebelumnya, aplikasi akan bernavigasi ke halaman tujuan.
Named Routes Limitasinya: • Tidak bisa membuat parameter yang fleksibel.
• Tidak mendukung deep linking, terutama untuk platform web dan desktop.
Navigation Anonymous Routes Advanced Named Routes Named Routes
Advanced Named Routes Lebih fleksibel lagi, Anda bisa menggunakan properti
onGenerateRoute yang ada di dalam widget MaterialApp atau CupertinoApp.
Advanced Named Routes Tetap menggunakan pushNamed() untuk bernavigasi ke halaman
tertentu.
Pertanyaan Dari ketiga opsi tersebut, pendekatan mana yang sering teman-teman
gunakan?
Navigation Anonymous Routes Advanced Named Routes Named Routes Only Mobile
Apps Imperative Navigation
Apakah ada yang salah dengan Navigator.push() ?
Web dan Desktop ?
Stage of Flutter App Survey Sumber: Flutter on the web,
slivers, and platform-specific issues
Web-like Experience Survey Sumber: Flutter on the web, slivers, and
platform-specific issues
Web-like Experience URL Support /restaurant/detail/:restaurantId
Web-like Experience State Restoration
Web-like Experience URL Support - Nested Navigation
Navigation 2.0
Navigation 2.0 Konsep navigasi bergaya deklaratif yang memungkinkan untuk mengelola
seluruh halaman aplikasi secara fleksibel.
Mengapa Navigator 2.0? • Declarative Paradigm
Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack
Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack •
Web Support
Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack •
Web Support • Nested Navigation
Komponen Navigator 2.0 Flutter menyediakan API bernama Page API dan
Router API. Router API Page API
Komponen Navigator 2.0 • RouteInformationProvider: sebuah kelas yang menyediakan informasi
halaman untuk widget Router.
Komponen Navigator 2.0 • RouteInformationParser: sebuah kelas untuk memilah informasi
halaman.
Komponen Navigator 2.0 • RouterDelegate: sebuah kelas yang digunakan widget
Router untuk membangun ulang navigation stack.
Komponen Navigator 2.0 • BackButtonDispatcher: sebuah kelas untuk menangani perilaku
System Back Button pada sistem operasi.
Letʼs Break Down The Code!
URL Plan Restaurant App Home Page Detail Page Review Page
/restaurant /restaurant/detail/:id /restaurant/review?name=ilham&review=mantaps
Page Configuration Plan Restaurant App Home Page Detail Page Review
Page HomePageConfiguration() DetailPageConfiguration(id) ReviewPageConfiguration(name, review)
Restaurant App Router API • RouterDelegate Handle app state and
notify the Page API. • RouteInformationParser
Restaurant App Router API • RouterDelegate ◦ currentConfiguration Page configuration
based on current state. • RouteInformationParser
Restaurant App Router API • RouterDelegate ◦ setNewRoutePath Update app
state based on page configuration. • RouteInformationParser
Restaurant App Page API • Pages The list of pages
with which to populate the history. • onPopPage
Restaurant App Page API • Pages • onPopPage Callback that
will run when the pop() method is called.
Restaurant App Router API • RouterDelegate • RouteInformationParser ◦ parseRouteInformation
Parse URL and return page configuration.
Restaurant App Router API • RouterDelegate • RouteInformationParser ◦ restoreRouteInformation
Return URL to address bar based on page configuration.
None
Feedback! Hadiah: • 1 Token Langganan Academy 30 Hari)* *untuk
pengisi feedback terpilih! dicoding.id/devcoachfeedback
None
None
None
Thank You Data Science