Bagaimana caranya berpindah halaman di flutter? Untuk menjawab pertanyaan inilah artikel ini Rani tulis.
Kita jelaskan dan langsung coba di project ya. Untuk sampel kali ini Rani membuat sebuah folder/project baru bernama flutter_navigation.
Untuk initial code nya di main.dart sudah ada void main dan class HomePage() yang sudah diatur menjadi halaman awal. Ketika di-debug tampilan di emulator akan masih kosong.
HomePage() sebagai tampilan awal kita ubah code nya agar menampilkan sebuah halaman yang memuat IconButton. Sebagai penanda dan pembeda halaman HomePage diberi icon taxi berwarna biru.
Dan IconButton ini memerlukan property onPressed, sementara kita isi null dulu.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("TAXI"),
),
body: new Center(
child: new IconButton(
onPressed: null,
icon: new Icon(
Icons.local_taxi,
color: Colors.blue,
),
iconSize: 75.0,
)),
);
}
}
Untuk contoh navigasi perpindahan halaman kita perlu satu halaman lagi yang serupa. Rani akan buat dengan nama PageOne() yang memiliki gambar icon dan warna yang berbeda.
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("SHUTTLE BUS"),
),
body: new Center(
child: new IconButton(
onPressed: null,
icon: new Icon(
Icons.airport_shuttle,
color: Colors.green,
),
iconSize: 75.0,
)),
);
}
}
Kemudian di void main() kita buat dulu routes nya.
void main() {
runApp(new MaterialApp(
title: "Navigation Sample",
home: new HomePage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage(),
'/PageOne': (BuildContext context) => new PageOne(),
},
));
}
Setelah routes terbentuk, baru kita bisa mengganti properti onPressed dengan navigasi ke halaman yang dimaksud dengan cara berikut:
(navigasi dari HomePage() ke PageOne().
onPressed: () {
Navigator.pushNamed(context, '/PageOne');
},
Kode selengkapnya main.dart:
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "Navigation Sample",
home: new HomePage(),
routes: <String, WidgetBuilder>{
'/HomePage': (BuildContext context) => new HomePage(),
'/PageOne': (BuildContext context) => new PageOne(),
},
));
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("TAXI"),
),
body: new Center(
child: new IconButton(
onPressed: () {
Navigator.pushNamed(context, '/PageOne');
},
icon: new Icon(
Icons.local_taxi,
color: Colors.blue,
),
iconSize: 75.0,
)),
);
}
}
class PageOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("SHUTTLE BUS"),
),
body: new Center(
child: new IconButton(
onPressed: () {
Navigator.pushNamed(context, '/HomePage');
},
icon: new Icon(
Icons.airport_shuttle,
color: Colors.green,
),
iconSize: 75.0,
)),
);
}
}
Nah, jika kita coba run debug lalu klik di icon taxi.
0 Comments