DevCoach 164: Flutter | Navigasikan Aplikasimu dengan Navigator 2.0

Transcript

1. Navigasikan Aplikasimu dengan Navigator 2.0 Achmad Ilham Imanuddin Curriculum Developer Multi-platform Flutter
2. 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
5. Navigasi di Flutter
6. Navigation Anonymous Routes
7. Anonymous Routes Cara ini dilakukan seperti navigasi aplikasi mobile pada umumnya yang menampilkan halaman di atas halaman lainnya, seperti tumpukan halaman (stack).
8. 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.
9. 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
10. Anonymous Routes Limitasinya: • Tidak cocok untuk aplikasi besar • Sulit di-maintain
11. Navigation Anonymous Routes Named Routes
12. Named Routes Cara ini memanfaatkan properti routes di MaterialApp atau CupertinoApp.
13. Named Routes Untuk bernavigasi, cukup memanfaatkan method pushNamed(). Hanya menambahkan nama rute yang sudah didaftarkan sebelumnya, aplikasi akan bernavigasi ke halaman tujuan.
14. Named Routes Limitasinya: • Tidak bisa membuat parameter yang fleksibel. • Tidak mendukung deep linking, terutama untuk platform web dan desktop.
15. Navigation Anonymous Routes Advanced Named Routes Named Routes
16. Advanced Named Routes Lebih fleksibel lagi, Anda bisa menggunakan properti onGenerateRoute yang ada di dalam widget MaterialApp atau CupertinoApp.
17. Advanced Named Routes Tetap menggunakan pushNamed() untuk bernavigasi ke halaman tertentu.
18. Pertanyaan Dari ketiga opsi tersebut, pendekatan mana yang sering teman-teman gunakan?
19. Navigation Anonymous Routes Advanced Named Routes Named Routes Only Mobile Apps Imperative Navigation
20. Apakah ada yang salah dengan Navigator.push() ?
21. Web dan Desktop ?
22. Stage of Flutter App Survey Sumber: Flutter on the web, slivers, and platform-specific issues
23. Web-like Experience Survey Sumber: Flutter on the web, slivers, and platform-specific issues
24. Web-like Experience URL Support /restaurant/detail/:restaurantId
25. Web-like Experience State Restoration
26. Web-like Experience URL Support - Nested Navigation
27. Navigation 2.0
28. Navigation 2.0 Konsep navigasi bergaya deklaratif yang memungkinkan untuk mengelola seluruh halaman aplikasi secara fleksibel.
29. Mengapa Navigator 2.0? • Declarative Paradigm
30. Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack
31. Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack • Web Support
32. Mengapa Navigator 2.0? • Declarative Paradigm • Navigation Stack • Web Support • Nested Navigation
33. Komponen Navigator 2.0 Flutter menyediakan API bernama Page API dan Router API. Router API Page API
34. Komponen Navigator 2.0 • RouteInformationProvider: sebuah kelas yang menyediakan informasi halaman untuk widget Router.
35. Komponen Navigator 2.0 • RouteInformationParser: sebuah kelas untuk memilah informasi halaman.
36. Komponen Navigator 2.0 • RouterDelegate: sebuah kelas yang digunakan widget Router untuk membangun ulang navigation stack.
37. Komponen Navigator 2.0 • BackButtonDispatcher: sebuah kelas untuk menangani perilaku System Back Button pada sistem operasi.
38. Letʼs Break Down The Code!
39. URL Plan Restaurant App Home Page Detail Page Review Page /restaurant /restaurant/detail/:id /restaurant/review?name=ilham&review=mantaps
40. Page Configuration Plan Restaurant App Home Page Detail Page Review Page HomePageConfiguration() DetailPageConfiguration(id) ReviewPageConfiguration(name, review)
41. Restaurant App Router API • RouterDelegate Handle app state and notify the Page API. • RouteInformationParser
42. Restaurant App Router API • RouterDelegate ◦ currentConfiguration Page configuration based on current state. • RouteInformationParser
43. Restaurant App Router API • RouterDelegate ◦ setNewRoutePath Update app state based on page configuration. • RouteInformationParser
44. Restaurant App Page API • Pages The list of pages with which to populate the history. • onPopPage
45. Restaurant App Page API • Pages • onPopPage Callback that will run when the pop() method is called.
46. Restaurant App Router API • RouterDelegate • RouteInformationParser ◦ parseRouteInformation Parse URL and return page configuration.
47. Restaurant App Router API • RouterDelegate • RouteInformationParser ◦ restoreRouteInformation Return URL to address bar based on page configuration.
49. Feedback! Hadiah: • 1 Token Langganan Academy 30 Hari)* *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback
53. Thank You Data Science