DevCoach 164: Flutter | Navigasikan Aplikasimu dengan Navigator 2.0

by Nad

Slide 1

Slide 1 text

Navigasikan Aplikasimu dengan Navigator 2.0 Achmad Ilham Imanuddin Curriculum Developer Multi-platform Flutter

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Navigasi di Flutter

Slide 6

Slide 6 text

Navigation Anonymous Routes

Slide 7

Slide 7 text

Anonymous Routes Cara ini dilakukan seperti navigasi aplikasi mobile pada umumnya yang menampilkan halaman di atas halaman lainnya, seperti tumpukan halaman (stack).

Slide 8

Slide 8 text

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.

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Anonymous Routes Limitasinya: ● Tidak cocok untuk aplikasi besar ● Sulit di-maintain

Slide 11

Slide 11 text

Navigation Anonymous Routes Named Routes

Slide 12

Slide 12 text

Named Routes Cara ini memanfaatkan properti routes di MaterialApp atau CupertinoApp.

Slide 13

Slide 13 text

Named Routes Untuk bernavigasi, cukup memanfaatkan method pushNamed(). Hanya menambahkan nama rute yang sudah didaftarkan sebelumnya, aplikasi akan bernavigasi ke halaman tujuan.

Slide 14

Slide 14 text

Named Routes Limitasinya: ● Tidak bisa membuat parameter yang fleksibel. ● Tidak mendukung deep linking, terutama untuk platform web dan desktop.

Slide 15

Slide 15 text

Navigation Anonymous Routes Advanced Named Routes Named Routes

Slide 16

Slide 16 text

Advanced Named Routes Lebih fleksibel lagi, Anda bisa menggunakan properti onGenerateRoute yang ada di dalam widget MaterialApp atau CupertinoApp.

Slide 17

Slide 17 text

Advanced Named Routes Tetap menggunakan pushNamed() untuk bernavigasi ke halaman tertentu.

Slide 18

Slide 18 text

Pertanyaan Dari ketiga opsi tersebut, pendekatan mana yang sering teman-teman gunakan?

Slide 19

Slide 19 text

Navigation Anonymous Routes Advanced Named Routes Named Routes Only Mobile Apps Imperative Navigation

Slide 20

Slide 20 text

Apakah ada yang salah dengan Navigator.push() ?

Slide 21

Slide 21 text

Web dan Desktop ?

Slide 22

Slide 22 text

Stage of Flutter App Survey Sumber: Flutter on the web, slivers, and platform-specific issues

Slide 23

Slide 23 text

Web-like Experience Survey Sumber: Flutter on the web, slivers, and platform-specific issues

Slide 24

Slide 24 text

Web-like Experience URL Support /restaurant/detail/:restaurantId

Slide 25

Slide 25 text

Web-like Experience State Restoration

Slide 26

Slide 26 text

Web-like Experience URL Support - Nested Navigation

Slide 27

Slide 27 text

Navigation 2.0

Slide 28

Slide 28 text

Navigation 2.0 Konsep navigasi bergaya deklaratif yang memungkinkan untuk mengelola seluruh halaman aplikasi secara fleksibel.

Slide 29

Slide 29 text

Mengapa Navigator 2.0? ● Declarative Paradigm

Slide 30

Slide 30 text

Mengapa Navigator 2.0? ● Declarative Paradigm ● Navigation Stack

Slide 31

Slide 31 text

Mengapa Navigator 2.0? ● Declarative Paradigm ● Navigation Stack ● Web Support

Slide 32

Slide 32 text

Mengapa Navigator 2.0? ● Declarative Paradigm ● Navigation Stack ● Web Support ● Nested Navigation

Slide 33

Slide 33 text

Komponen Navigator 2.0 Flutter menyediakan API bernama Page API dan Router API. Router API Page API

Slide 34

Slide 34 text

Komponen Navigator 2.0 ● RouteInformationProvider: sebuah kelas yang menyediakan informasi halaman untuk widget Router.

Slide 35

Slide 35 text

Komponen Navigator 2.0 ● RouteInformationParser: sebuah kelas untuk memilah informasi halaman.

Slide 36

Slide 36 text

Komponen Navigator 2.0 ● RouterDelegate: sebuah kelas yang digunakan widget Router untuk membangun ulang navigation stack.

Slide 37

Slide 37 text

Komponen Navigator 2.0 ● BackButtonDispatcher: sebuah kelas untuk menangani perilaku System Back Button pada sistem operasi.

Slide 38

Slide 38 text

Letʼs Break Down The Code!

Slide 39

Slide 39 text

URL Plan Restaurant App Home Page Detail Page Review Page /restaurant /restaurant/detail/:id /restaurant/review?name=ilham&review=mantaps

Slide 40

Slide 40 text

Page Configuration Plan Restaurant App Home Page Detail Page Review Page HomePageConfiguration() DetailPageConfiguration(id) ReviewPageConfiguration(name, review)

Slide 41

Slide 41 text

Restaurant App Router API ● RouterDelegate Handle app state and notify the Page API. ● RouteInformationParser

Slide 42

Slide 42 text

Restaurant App Router API ● RouterDelegate ○ currentConfiguration Page configuration based on current state. ● RouteInformationParser

Slide 43

Slide 43 text

Restaurant App Router API ● RouterDelegate ○ setNewRoutePath Update app state based on page configuration. ● RouteInformationParser

Slide 44

Slide 44 text

Restaurant App Page API ● Pages The list of pages with which to populate the history. ● onPopPage

Slide 45

Slide 45 text

Restaurant App Page API ● Pages ● onPopPage Callback that will run when the pop() method is called.

Slide 46

Slide 46 text

Restaurant App Router API ● RouterDelegate ● RouteInformationParser ○ parseRouteInformation Parse URL and return page configuration.

Slide 47

Slide 47 text

Restaurant App Router API ● RouterDelegate ● RouteInformationParser ○ restoreRouteInformation Return URL to address bar based on page configuration.

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Feedback! Hadiah: ● 1 Token Langganan Academy 30 Hari)* *untuk pengisi feedback terpilih! dicoding.id/devcoachfeedback