Tutorial Flutter — Navigator Page
Tutorial Flutter untuk berpindah halaman menggunakan fungsi Navigator dengan studi kasus halaman login
Halo semua Jeremia disini dan pada kesempatan kali ini kita akan belajar mengenai navigator page atau berpindah halaman. Nah pada tutorial ini kita akan memanfaatkan constructor dalam kelas pada widget Flutter.
Sebelumnya temen-temen pasti udah tau pengertian costructor yaitu sebuah method khusus yang dijalankan secara otomatis saat object telah dibuat.
Biasanya constructor digunakan untuk inisialisasi atau mempersiapkan data untuk objek. Contoh hal yang bisa dilakukan constructor, adalah mengirim sebuah atau beberapa nilai variable ke halaman lain menggunaka parameter.
Sekarang buka dulu project yang telah kalian buat dari post sebelumnya yaitu styling component dan kita beri validasi pada artikel validasi.
Pertama, kita akan membuat kelas baru sebagai Constructor. Beri nama newPage.dart.
Setelah itu kita akan membuat Stateful class dengan mengetikkan “stl”, lalu masukkan namanya Classnya menjadi Newpages.
Karena pasti ada yang merah, tekan “ctrl + .” pada tulisan yang error(error yang mana saja) untuk menyelesaikannya lalu pilih material.dart.
Hasil akhirnya seperti ini:
import 'package:flutter/material.dart';class Newpages extends StatefulWidget {
@override
_NewpagesState createState() => _NewpagesState();
}class _NewpagesState extends State<Newpages> {
@override
Widget build(BuildContext context) {
return Container(
);
}
}
Sekarang kita buat Constructornya. Constructor bisa kita buat ada atau tanpa parameter. Tapi untuk apa Constuctor tanpa parameter? *nyanyi dulu untuk apaaa~*.
Constructor tanpa parameter Itu tidak berguna sama sekali. Maka kita akan menggunakan parameter.
Pertama kita buat variable konstan (final) untuk dijadikan sebagai penampung nilai Constuctor. Kemarin kita membuat TextField email dan password. Maka kita akan membuat varable email dan password. Tulisnya tepat di bawah “class Newpages extends StatefulWidget”
class Newpages extends StatefulWidget {
final String email,pass;
.......Memang merah, biarkan saja. Aturan dari membuat Constructor adalah harus memiliki method yang namanya sama dengan classnya. Nama Kelas kita ”Newpages” maka kita akan buat nama methodnya yaitu “Newpages”. Cara menulisnya yaitu dibawah variable final yang kita buat.
class Newpages extends StatefulWidget {
final String email,pass;Newpages(this.email, this.pass);...........
Kenapa bentuk methodnya Newpagesnya “asing” ? ini adalah cara cepat untuk mendeklarasikan menthod yang fungsinya hanya meng-menyimpan /meng-inisialisasi datanya.
Kemudiam kita juga mengisi nama variable pada “_NewpagesState()”. Seperti ini:
_NewpagesState createState() => _NewpagesState(this.email, this.pass);Merah kan? santuy saya jelasin nih.
_NewpagesState adalah sub-class dari kelas Newpages, dan sub-class ini digunakan untuk menampung widget. Lalu createState() ini yang membuat sub class “_NewpagesState” dapat berubah — ubah atau dinamis padastateful widget. Karena hanya di stateful widget kita bisa menemukan baris ini.
Kenapa kita menaruh variable tadi didalam nya? Itu supaya sub-classnya dapat menerima nilai yang sudah di didapat dari Consturctor di kelas Newpages.
Disini sebetulnya sama saja yang ada di atas atau yang tadi kita lakukan, Hanya saja nama dari method dalam sub-class ini harus berbeda. Berbeda bagaimana? Karena kita membuat constructor method dalam “_NewpagesState” maka nama methodnya juga “_NewpagesState”.
class _NewpagesState extends State<Newpages>{
final String email,pass;
_NewpagesState(this.email,this.pass);...............
Nah sekarang kita hanya perlu membuat perintah apa yang akan di lakukan kelas/halaman ini. Disini kita hanya akan membuat halaman untuk menerima nilai yang sudah diterima constructor. Jadi kali ini kita hanya akan menggunakan Center dan text kemudianColumn.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Home page")),
body: Container(
decoration: BoxDecoration(color: Colors.yellow),
child: Center(
child: Container(
margin: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
CircleAvatar(
radius: 30,
backgroundImage: ExactAssetImage("assets/giphy.webp"),
),
RichText(text: TextSpan(
style: TextStyle(fontSize: (MediaQuery.of(context).size.width/ 10)- 11),
children: <TextSpan>[
TextSpan(text:"Hello "),
TextSpan(text: "${this.email}",style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text:"\n Your password"),
TextSpan(text:" ${this.pass}",style: TextStyle(fontWeight: FontWeight.bold))
]
),),
],
))),
),
);
}Disini ada widget baru yang bernama RichText. RichText dapat berfungsi untuk membuat style Text berbeda walau di line yang sama. Dan juga ada CircleAvatar, dimana widget ini sama seperti widget Image. Hanya saja, apapun gambar yang dimasukkan, widget ini kana membetuk bordernya menjadi lingkaran. Contoh di atas saya menggunakan gambar berformat .Webp, itu sama saja seperti gambar ber format .gif . Untuk Contoh gambar nya bisa dibuka di sini. https://media.giphy.com/media/Cmr1OMJ2FN0B2/giphy.gif
Sekarang kembali ke kelas main.dart. Disini kita hanya akan memberikan fungsi pada sebuah button “Login”. Sebelum itu, Widget TextField tidak langsung dapat mengirimkan text yang kita masukkan kedalamnya secara langsung. Maka dari itu, kita butuh TextEditingController.
TextEditingController adalah pengontrol editing text untuk memeriksa apakah ada perubahan dalam TextField. Jika ada perubahan, TextEditingController akan ikut merubah nilainya didalamnya, lalu menyimpannya.
Tambahkan 2 baris textEditingContorller (untuk email dan password) di tengah Kelas LoginPage dan _LoginPageState.
...............
_MyAppState createState() => _MyAppState();
}final emailText = TextEditingController();
final passText = TextEditingController();
final _formKey = GlobalKey<FormState>();class _LoginPageState extends State<LoginPage> {
............
Lalu pada TextFormField, kita tambahkan property controller dan isi dengan “variable” TextEditingController sesuai dengan fungsinya.
Pada TextFormField email kita masukkan emailText. Dan pada TextFormField password kita masukkan passText.
child: TextFormField(
decoration: InputDecoration(
hintText: "Email",
prefixIcon: Icon(Icons.message),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
controller: emailText,
)child: TextFormField(
decoration: InputDecoration(
hintText: "Password",
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
controller: passText,
)
Dan yang terakhir, masukkan syntax ini di dalam FlatButton “Sing In”(pada button “forgot password ” kita biarkan saja dulu tidak melakukan apa — apa):
........
onPressed: () {
if (_formKey.currentState.validate()) {
Navigator.push(
context, MaterialPageRoute(
builder: (context) =>
Newpages(emailText.text,passText.text)
)
);
}
return false;
},
...........Nah disini kita belum selesai, kita perlu mengimport class Newpages. Newpages mu merah kan? Klik CTRL + . (titik) dan pilih import libray newPage.dart.
Nah sekarang kita telah berhasil, saatnya melakukan ujicoba.
Jika kita menekan Sign in, maka apa yang di masukkan tadi akan dikirim ke halaman berikutnya.
EXERCISE
Sekarang kita udah berhasil nih ngebuat halaman login dan berpindah ke halaman home. Tapi masih ada yang janggal loh. Coba kamu perhatikan gambar home diatas. Masa ada tombol back sih? Secara logika kita dalam membuat aplikasi, ketika berhasil login maka tidak akan bisa back. Namun kenapa disini ada tombol back ya?
Nah tugasmu adalah bagaimana caranya membuat halaman berpindah dan tidak muncul tombol back (tidak bisa di back).
Bingung ya? Hehehe, tenang saya kasih cluenya.
Cluenya adalah gunakan fungsi pushReplacement pada navigator. Cara pakenya gimana? Googling ya, banyak kok di stackoverflow 😆!
Sekian tutorial kali ini. Sampai jumpa di tutorial berikutnya.
