Halo teman-teman disini saya akan menjelaskan kepada kalian untuk menavigasi antar halaman pada Flutter.
Navigation
pada saat membangun sebuah aplikasi kita akan membuat banyak sekali screen dan kita akan berpindah dari satu screen ke screen lainnya. Pada Flutter kita akan menggunakan sebuah class bernama Navigator.
Perlu kita ketahui bahwa konsep navigasi pada Flutter mirip sekali dengan pemrograman Android, yakni bahwa ketika berpindah screen/activity akan menjadi tumpukan (stack). Jadi ketika berpindah dari satu screen ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop).
Pertama-tama kita akan membuat 2 file dart baru yang bernama firstpage.dart & secondpage.dart
Berikut code pada firstpage.dart
import 'package:exercise_data_lokal/modul/secondpage.dart';
import 'package:flutter/material.dart';
class FirstPage extends StatelessWidget {
const FirstPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
),
body: Center(
child: ElevatedButton(
child: const Text('Pindah Screen'),
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return const SecondPage();
}));
},
),
),
);
}
}
Berikut adalah untuk code secondpage.dart :
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
const SecondPage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Second Screen'),
),
body: Center(
child: OutlinedButton(
child: const Text('Kembali'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
Navigator.push
Pada kode di atas Navigator.push memiliki dua parameter. Pertama ialah context dan yang kedua Route. Parameter context ini merupakan variabel BuildContext yang ada pada method build. Parameter route berguna untuk menentukan tujuan ke mana kita akan berpindah screen. Route tersebut kita isikan dengan MaterialPageRoute yang di dalamnya terdapat builder yang nantinya akan diisi dengan tujuan screen-nya. Maka untuk melakukan perpindahan screen kita akan membuat event onPressed pada tombol ElevatedButton yang ada pada screen pertama.
Navigator.pop
Kegunaan Navigator.pop adalah untuk kembali ke halaman sebelum nya.
Untuk kembali dari screen kedua kita dapat menambahkan event onPressed pada OutlinedButton yang ada pada screen kedua dan kita masukkan Navigator.pop pada event, seperti berikut: