Pada saat membangun sebuah aplikasi akan membuat banyak screen yang berpindah dari satu screen ke screen lainnya. Pada Flutter akan menggunakan sebuah class bernama Navigator. 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).
Buat 2 file dart yang bernama firstpage.dart & secondpage.dart
1. Buat File : 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();
}));
},
),
),
);
}
}
2. Buat file : 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);
},
),
),
);
}
}
Penjelasan :
Navigator.push :
Navigator.push memiliki dua parameter. yaitu context dan Route. Parameter context merupakan variabel BuildContext yang ada pada method build. Parameter route berguna untuk menentukan tujuan ke mana akan berpindah screen. Route diisikan dengan MaterialPageRoute yang di dalam terdapat builder yang nanti akan diisi dengan tujuan screen. Maka untuk melakukan perpindahan screen akan membuat event onPressed pada tombol ElevatedButton yang ada pada screen pertama.
Navigator.pop :
Kegunaan Navigator.pop adalah untuk kembali ke halaman sebelum nya.
Baca juga artikel :
