Dicoding Developer Coaching #44: Flutter | Navigasi Antar Halaman pada Flutter

Proses navigasi dan perutean merupakan salah satu konsep utama dalam mengembangkan aplikasi, di mana aplikasi memiliki beberapa halaman yang mengandung informasi yang berbeda-beda. Namun, bagaimana kita dapat berpindah dari satu halaman ke halaman lainnya?

Flutter menyediakan proses navigasi dan perutean menggunakan Navigator, layaknya Intent pada Android dan UINavigationController pada iOS. Untuk lebih lengkapnya akan dibahas pada Developer Coaching dengan poin pembahasan seperti berikut:

- Pengenalan Navigator
- Macam-macam Navigator
- Studi kasus penggunaan Navigator

Informasi event: https://www.dicoding.com/events/4393

Transcript

1. Navigasi antar Halaman pada Flutter Dicoding Developer Coaching #44 Achmad Ilham Curriculum Developer Dicoding
2. Navigasi Bagaimana pengguna aplikasi berinteraksi antar halaman satu dengan halaman lainnya.
3. Navigasi pada Flutter
4. Navigator class Navigator.push( context, MaterialPageRoute( builder: (context) { return const FirstPage(); }, ), ); Navigasi ke halaman FirstPage()
5. Navigator class Navigator.push( context, MaterialPageRoute( builder: (context) { return const SecondPage( data: "Dicoding", ); }, ), ); Navigasi ke halaman SecondPage() dengan membawa data
6. Navigator class var data = await Navigator.push( context, MaterialPageRoute( builder: (context) { return const ThirdPage(); }, ), ); Navigasi ke halaman ThirdPage() dengan mengembalikan data if (data != null && data is String) { ScaffoldMessenger.of(context).showSnackBar( SnackBar( content: Text("Data is $data"), ), ); }
7. Konsep Navigasi pada Flutter
8. Navigator class • push • pushNamed • pushAndRemoveUntil • pushNamedAndRemoveUntil • pushReplacement • pushReplacementNamed • pop • popAndPushNamed • ... https://api.flutter.dev/flutter/widgets/Navigator-class.html#static-methods
9. Navigasi menggunakan routes return MaterialApp( ..., initialRoute: '/', routes: { '/': (context) => const HomePage(), '/firstPage': (context) => const FirstPage(), '/secondPage': (context) => SecondPage( data: ModalRoute.of(context)!.settings.arguments as String, ), '/thirdPage': (context) => const ThirdPage(), }, ); Navigator.pushNamed(context, ‘/secondScreen’);
10. Navigasi menggunakan routes • Navigasi ke halaman FirstPage() Navigator.pushNamed(context, "/firstPage"); • Navigasi ke halaman SecondPage() dengan membawa data Navigator.pushNamed(context, "/secondPage", arguments: "Dicoding"); • Navigasi ke halaman ThirdPage() dengan mengembalikan data var data = await Navigator.pushNamed(context, "/thirdPage");
11. Navigasi menggunakan routes (onGenerateRoute) class RouteGenerator { static Route<dynamic> generateRoute( RouteSettings settings, ) { final args = settings.name; switch (args) { case "/": return MaterialPageRoute( builder: (context) => HomePage(), ); default: return MaterialPageRoute( builder: (context) => ErrorPage(), ); } } } return MaterialApp( ..., initialRoute: '/', onGenerateRoute: RouteGenerator.generateRoute, );
12. Navigasi dengan animasi
13. Navigasi dengan animasi return PageRouteBuilder( pageBuilder: (context, animation, secondAnimation) { return FirstPage(); }, transitionsBuilder: (context, animation, secondAnimation, child) { // add animation transition return child; }, );
14. Dicoding Dicoding Dicoding Dicoding Indonesia Contact us : Contact me : ilham@dicoding.com