Pembuatan Form Login beserta Validation pada Flutter

Selamat Pagi. Semoga kita selalu dilindungi dari segala mara bahaya, Aaminn 🙏😊
Setelah kemarin kita mempelajari tentang pembuatan IntroSlider, kali ini kita mempelajari pembuatan Form Login validation pada Flutter.

Karena ini terdapat validation pada inputan maka kita menggunakan StatefulWidget. dan kita menggunakan Global Key . apa itu Global key ? Global key adalah Key yang digunakan untuk menyimpan state dari suatu Widget agar tidak hilang saat melakukan aktivitas lain atau berpindah ke Widget lain.

Berikut struktur dari dari Global key yang di berikan kepada Form:

final formKey = GlobalKey<FormState>();

Setelah itu, kita menuliskan widget apa saja yang diperlukan untuk membuat tampilan login :

- Widget Title : Widget ini berfungsi untuk memberi judul pada Form Login . Pada pembuatan form login kali ini kita beri judul "First Flutter" dengan fontSize 24 dan type font AverinBold.

Widget labelTitle() {
return Text(
"First Flutter",
style: TextStyle(fontFamily: "AvenirBold", fontSize: 24,),
);
}

- Widget Email : Widget ini nantinya berfungsi untuk memasukkan email sebagai media untuk masuk ke halaman utama aplikasi. Dimana dalam inputan ini kita memberi validation inputan harus menggandung "@" , keyboard inputan berupa Keyboard email, jika sudah selesai maka dapat diteruskan ke inputan selanjutnya, serta di simpan di variabel _email.

Widget _entryFieldEmail(BuildContext context, String title) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
TextFormField(
keyboardType: TextInputType.emailAddress,
textInputAction: TextInputAction.next,
validator: (val) =>
!val.contains('@') ? 'Not a valid Email.' : null,
onSaved: (val) => _email = val,
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Colors.white,
filled: true),
)
],
),
);
}

- Widget Password : Widget selanjutnya adalah inputan password, sebagaimana standart dari setiap login pasti menggunakan password sebagai salah satu security untuk bisa masuk ke dalam aplikasi. pada kali validation dari inputan yang dimasukkan adalah panjang password minimal 6 digit , inpuan yang dimasukkan security dan tidak dapat dilihat.

Widget _entryFieldPassword(BuildContext context, String title) {
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
title,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
),
SizedBox(
height: 10,
),
TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.done,
validator: (val) => val.length < 6 ? 'Password too Short.' : null,
onSaved: (val) => _password = val,
obscureText: true,
decoration: InputDecoration(
border: InputBorder.none,
fillColor: Colors.white,
filled: true),
)
],
),
);
}

- Widget Submit login : Widget ini berfungsi sebagai action untuk berpindah dari dari state ke state yang lain. pada kali ini kita menggunakan InkWell , berikut struktu sederhana dari InkWell

InkWell(
onTap: () {
//action when widget onTap
},
child: Container(
//content UI
),
);

Untuk content UI nya kita menggunakan Container agar mudah untuk didesain, seperti pada kali ini kita memanfaatkan BoxDecoration untuk memberikan borderRadius, boxShadow dan gradien serta menambakan child untuk memberikan Text "Login".

child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(vertical: 15),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.grey.shade200,
offset: Offset(2, 4),
blurRadius: 5,
spreadRadius: 2)
],
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.greenAccent, Colors.green])),
child: Text(
'Login',
style: TextStyle(fontSize: 20, color: Colors.white),
),
),

Sedangkan untuk actionya kita buat void sendiri , seperti berikut :

void _login() {
final form = formKey.currentState;
if (form.validate()) {
form.save();
}
var requestLogin = {"email": _email, "password": _password};
var api = ApiService.login(requestLogin);
api.then((response) {
final Map parsed = json.decode(response);
userlogin login = userlogin();
login.Username = parsed['data']['Username'];
login.email = parsed['data']['email'];
apiSession.save('login', login);

Navigator.of(context)
.push(MaterialPageRoute(builder: (context) => HomePage()));

print("success");
}, onError: (error) {
print(error.toString());
});
}

- Widget Forget Password : Widget ini membantu user ketikan lupa dengan password miliknya , natinya widget ini berguna untuk mengarahkan user ke tampilan Lupa password.

Widget _forgetPassword() {
return Container(
padding: EdgeInsets.symmetric(vertical: 10),
alignment: Alignment.centerRight,
child: InkWell(
onTap: () {
print(" go to forget password page);
},
child: Text(
"Forgot Password ?",
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
),
),
);
}

- Widget Register : Widget ini adalah Widget yang mengarahkan user ke halaman halaman Register.

Widget labelRegister() {
return InkWell(
onTap: () {
print(" go to Register page");
},
child: Text(
"Dont have Account, Please Register.",
style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
),
);
}

Berikut Tampilan yang dihasilkan dari code diatas :