[Flutter][19] Navigation

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Thursday, 25 Apr 2019

Hello world,

Pembahasan kali ini adalah mengenai navigation. Yaitu bagaimana kita melakukan navigasi untuk berpindah dari suatu halaman ke halaman lain. Contohnya adalah pada menu dimana setiap menu seperti home, profile, setting dan lain-lain memiliki action untuk pergi ke halaman masing-masing tersebut. Atau pada contoh lain ada list artikel yang jika dipilih salah satu dari list tersebut akan beralih ke halaman lain yang berisi detail dari artikel tersebut. Penggunaan navigation ada beberapa cara, tapi yang saya jelaskan di sini hanya yang biasa saya pakai (saya lebih suka pakai cara ini karena lebih simpel). Penulisannya sebagai berikut:

Navigator.of(context).push(
    new MaterialPageRoute(
builder: (BuildContext context) => new Detail()
    )
);

Selanjutnya kita coba penerapannya pada action onpressed pada sebuah tombol.

main.dart

import 'package:flutter/material.dart';
import './halamankedua.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: Center(
child: RaisedButton(
child: Text("Ke Halaman Kedua"),
onPressed: (){
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new Halamankedua()
)
);
},
),
),
),
);
}
}


halamankedua.dart

import 'package:flutter/material.dart';
import './main.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamankedua(),
));
}

class Halamankedua extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Kedua"),
),
body: new Container(
child: Center(
child: RaisedButton(
child: Text("Ke Halaman Utama"),
onPressed: (){
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new Myapp()
)
);
},
),
),
),
);
}
}

Dari contoh di atas ketika tombol pada halaman utama diklik maka akan dialihkan ke Halamankedua() dengan navigation push. Begitu juga sebaliknya. Pastikan kalian sudah meng-import class yang akan dinavigasikan (warna hijau). 

Selain itu kita juga dapat mengirimkan parameter menggunakan navigation untuk ditampilkan/dipakai di halamankedua. contoh:

main.dart

import 'package:flutter/material.dart';
import './halamankedua.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Myapp(),
));
}

class Myapp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Utama"),
),
body: new Container(
child: Center(
child: RaisedButton(
child: Text("Ke Halaman Kedua"),
onPressed: (){
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new Halamankedua(
keterangan : 'Hello halaman kedua, kode anda 10'
)
)
);
},
),
),
),
);
}
}

Kita tinggal menambahkan parameter dan value yang ingin dikirim (warna hijau). Lalu pada halaman kedua sebagai berikut.

halamankedua.dart

import 'package:flutter/material.dart';
import './main.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamankedua(),
));
}

class Halamankedua extends StatelessWidget {
String keterangan;
Halamankedua({this.keterangan});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Kedua"),
),
body: new Container(
child: Column(
children: <Widget>[
Text(keterangan),
RaisedButton(
child: Text("Ke Halaman Utama"),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new Myapp()));
},
),
],
),
),
);
}
}

Pada halaman kedua kita harus membuat variable sesuai parameter yang dibuat pada halaman utama tadi (warna hijau). Selanjutnya kita dapat menggunakan variable tersebut (warna kuning) pada halamankedua.

Sedikit berbeda jika pada halamankedua kita menggunakan StatefullWidget. Contohnya sebagai berikut.

import 'package:flutter/material.dart';
import './main.dart';

void main() {
runApp(new MaterialApp(
title: "My Apps",
home: new Halamankedua(),
));
}

class Halamankedua extends StatefulWidget {
String keterangan;
Halamankedua({this.keterangan});
@override
_HalamankeduaState createState() => _HalamankeduaState();
}

class _HalamankeduaState extends State<Halamankedua> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: new Text("Halaman Kedua"),
),
body: new Container(
child: Column(
children: <Widget>[
Text(widget.keterangan),
RaisedButton(
child: Text("Ke Halaman Utama"),
onPressed: () {
Navigator.of(context).push(new MaterialPageRoute(
builder: (BuildContext context) => new Myapp()));
},
),
],
),
),
);
}
}

Begitulah kira-kira.

Selamat mencoba :)