Flutter (Simple login form-together with show and hide password button).

ในบทความนี้จะแนะนำการสร้าง Login page แบบบ้านๆด้วย Flutter นะคับ ไปดูเลย

อันนี้คือหน้าตาของ workshop นี้นะคับ จะใช้ TextFormField และ RaisedButtonโดยทำ Function ให้เรียกและใส่ argument ที่ต้องการเข้ามาได้เลย

หน้าตาของ App จะเป็นแบบนี้นะคับ

หน้าตาของ Widget tree จะแสดงแบบนี้นะคับ เป็น Widgets ที่มาซ้อนกัน

SingleChildScrollView() ใช้แทน ListView() เพื่อป้องกัน size overflow คู่กับการใช้ Column() นะคับ

อันดับแรกให้สร้าง Method ที่ return Widget เป็น TextFormField ขึ้นมาก่อนนะคับ โดยในที่นี้จะเลือกเก็บค่าที่ได้จาก input ด้วยวิธี TextEditingController นะคับ (จริงๆแล้วถ้าใช้ TextFormField ยังสามารถใช้ Property “onChanged” หรือ Form() widget มาครอบสิ่งที่เราต้องการเก็บก็ได้นะครับ จะกล่าวในโอกาสต่อไป

จากรูปได้กำหนด Property ต่างๆเข้ามาแล้ว รวมถึง suffixIcon สำหรับโชว์ password แล้วด้วย

อันดับต่อไปคือสร้าง Method สำหรับแสดง Button ขึ้นมา ซึ่งในที่นี้จะใช้ Row() กับ Expanded() ร่วมด้วยเพื่อให้มีการจัดขนาดของ Button อัตโนมัติตามขนาดหน้าจอเลยนะคับ

เมื่อมีการกดปุ่ม จะเรียก method onSubmit() ต่อนะคับ

labelText จาก decoration: InputDecoration() จะไป float ด้านบนเมื่อมีข้อมูล

ในการใช้งานปกติ จะ labelText จะไปโผล่ด้านบนเมื่อมีข้อมูล และ hintText จะหายไปเมื่อมีข้อมูลเช่นกัน

สามารถคลิกที่ suffixIcon เพื่อแสดงค่า password ให้เห็นได้

สำหรับแนวนอน ก็ยังแสดงได้อย่างถูกต้องนะครับ

Code ทั้งหมดของ page นี้จะแสดงดังรูปนะครับ ถ้า copy แล้วก้อจัด format ได้เลยนะคับ แล้วก้อเรียกใช้จาก class MyApp ใน main.dart ได้เลยนะคับ

import 'package:flutter/material.dart';
class FormValidate_DIY extends StatefulWidget {
@override
_FormValidate_DIYState createState() => _FormValidate_DIYState();
}
class _FormValidate_DIYState extends State<FormValidate_DIY> {
// Explicit
bool passwordVisible = true;
TextEditingController _usernameController = TextEditingController();
TextEditingController _passwordController = TextEditingController();
// Method
Widget inputField(TextEditingController contoller,String labelText,String hintText, bool showSuffixIcon, bool enableObscureText) {
return TextFormField(
keyboardType: TextInputType.text,
controller: contoller,
obscureText: enableObscureText==true? passwordVisible: false, //This will obscure text dynamically
decoration: InputDecoration(
labelText: labelText,
hintText: hintText,
// Here is key idea
suffixIcon: showSuffixIcon==true? IconButton(
icon: Icon(
// Based on passwordVisible state choose the icon
passwordVisible ? Icons.visibility_off : Icons.visibility,
color: Theme.of(context).primaryColor,
),
onPressed: () {
// Update the state i.e. toogle the state of passwordVisible variable
setState(() {
passwordVisible = !passwordVisible;
});
},
): null,
),
);
}
//===========================================================
Widget loginButton() {
return Row(
children: [
Expanded(
child: RaisedButton(
color: Colors.blue,
child: Text(
'Login'.toUpperCase(),
style: TextStyle(fontSize: 16, color: Colors.white),
),
onPressed: () {
onSubmit();
}),
),
],
);
}
//===========================================================
onSubmit(){
print(_usernameController.text);
print(_passwordController.text);
}
Widget showLogo(){
return Image.asset('images/codium.png');
}
Widget showForgot(){
return InkWell(
onTap: (){print('Go to forgot password page');},
child: Text('Forgot your password?', style: TextStyle(color: Colors.red,),));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(30.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
showLogo(),
inputField(_usernameController, 'Username', 'Enter your username', false, false),
SizedBox(height: 12.0,),
inputField(_passwordController, 'Password', 'Enter your password', true, true),
SizedBox(height: 50.0,),
loginButton(),
SizedBox(height: 10.0,),
showForgot(),
],
),
),
),
),
);
}
}

รวมหน้านี้เขียน code 100 บรรทัด สำหรับ UI

แล้วพบกันใหม่ เมื่อมีเวลาครับ… Grassroot engineer.