Flutter เริ่มต้นโครงสร้างพื้นฐาน EP.2

มาต่อ (ใช้โปรเจ็คเดิม )
มาดูวิธีการเปิด form โดยใช้ routes
โดยไปสร้าง routes ไว้ที่หน้า main.dart ก่อน เพื่อเก็บค่าฟอร์มแต่ละไฟล์ที่จะกำหนดให้เปิดไปหน้าไหน  รูปแบบ

รูปแบบคือ
routes: {
‘/ชื่อหน้าที่จะเปิด1’ : (context) => ชื่อclass ของ form1 ,
‘/ชื่อหน้าที่จะเปิด2’ : (context) => ชื่อclass ของ form2 ,
‘/ชื่อหน้าที่จะเปิด3’ : (context) => ชื่อclass ของ form3 ,
}

เงื่อนไขคือห้ามตั้งชื่อซ้ำกัน  แต่ตั้งให้เปิดฟอร์มเดียวกันได้ (ไม่งงนะ)

ต่อเวลาจะเปิดฟอร์ม ก็เขียนเพิ่มเข้าไปใน event onPressed  ตัวอย่างคือ

onPressed:(){

Navigator.pushNamed(context, '/ชื่อหน้าที่จะเปิด1');

}

มีหลายแบบ หากเป็น Navigator.push จะเปิดแบบต่อเนื่องและมีปุ่มปิด ตามรูปนี้

สังเกตุจุมีปุ่ม กากบาท แสดงให้ปิดหน้านี้ได้
หรืออีกกรณี หากใช้เป็น Navigator.pushName จะมีปุ่ม back เพื่อย้อนกลับได้ เช่นรูปนี้

เป็นต้น  แต่อย่าลืม import ไฟล์ที่เก็บ class ไว้ เอามาใส่ฟอร์มที่จะให้กดแล้วเปิดฟอร์ม ด้วยนะครับ

(เหมือน delphi ก็ต้อง use unit เข้ามาเพื่อใช้ฟังชันหรือตัวแปรของฟอร์มอื่นๆ เช่นกัน)





หรือหากต้องการให้เปิดแบบ MaterialPageRoute()  ก็จะช่วยให้แสดงหน้าต่างแบบ ไดอะล๊อก สามารถปิดหน้านี้ได้  โดยเขียนเพิ่มเติมจาก
Navigator.push  แต่เขียน เพิ่ม เช่นรูปแบบตามนี้

onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
         builder: (context) => GoogleMapPage(),
         fullscreenDialog: true));
}),

ต่อมาต้องการเปิดหน้า แล้วส่งค่าไปด้วย  ยกตัวอย่างแบบส่งค่าแบบ ค่าคงที่ละกันนะ เช่น  ส่งค่า hn หรือ name
อย่างแรกเลยต้องไปสร้างตัวแปรที่ปลายทางก่อน เพื่อส่งค่าแล้วเอาค่าไปเก็บไว้ที่ตัวแปรที่ปลายทาง

เพิ่มตัวแปรได้ที่  ก่อน @override  ตัวอย่าง

ตามรูปสร้างตัวแปร
final String hn;
final String name;

แล้วต้องมาเพิ่ม เหตุการณ์รับค่าด้วย คือใส่
GoogleMapPage(this.hn, [this.name]);
เข้าไปด้วย โดย this.hn ตัวแรกต้องมีค่า  แต่ถ้าเป็น [this.name] มีเครื่องหมาย [] จะหมายถึง มีค่าก็ได้ หรือ ไม่มีก็ได้

เสร็จแล้วก็นำค่าตัวแปรนี้ไปใช้งาน  ตามรูปนี้

สังเกตุ รูปแบบจะเป็น  ${widget.hn}  ก็คือดึงค่าตัวแปร hn มาแสดง
และ  ${widget.name ?? ‘-‘} ดึงค่าตัวแปร name มาแสดง หากมี ?? ต่อท้ายจะเอาไว้เช็คว่ามีข้อมูลหรือไม่ ถ้าไม่มีให้แสดงเป็น ‘-‘ แทน นั้นเอง
ผลลัพธ์ที่ได้คือ

สังเกตุเวลาเปิดฟอร์ม นี้ จะมีค่าให้แสดง xxx xx และ – เนื่องจากตัวแปร name ไม่มีข้อมูล เลยแสดงเป็น – นั้นเอง

ต่อมาเรามาสร้างฟอร์มรับค่า แล้วเช็คว่าค่าที่กรอกเป็น ค่าว่าง หรือ มีข้อมูล  แล้วเช็คด้วยว่าเป็นรูปแบบ email หรือ ไม่

อยากแรกก็มาสร้างไฟล์ dart ก่อนตั้งชื่อว่า add_user.dart

แล้วเพิ่มคำสั่งตามรูปแบบโครงสร้าง ภาษา dart   (สามารถกลับไปดู EP.1 )
ก็ดูตามรูปนี้

แล้วมาสร้างตัวแปร เพื่อเก็บค่า ชื่อ , นามสกุล

TextEditingController ctrlEmail = TextEditingController();
TextEditingController ctrlFirstName = TextEditingController();

ต้องประกาศ เป็น TextEditingController เพื่อสามารถ ควบคุม ชื่อและนำค่าออกมาได้

จำเป็นต้องสร้าง _formKey เพื่อจับค่าการกรอกข้อมูลของ Form ว่ามีข้อมูลหรือไม่  โดยสร้างตัวแปร

final _formKey = GlobalKey<FormState>();

สำหรับรับค่าการคีย์ ของฟอร์ม โดยจะใส่ไว้ที่ Form ก่อน  widget ของ TextFormField ทั้งหมด
รูปแบบ

ต่อมามาสร้างปุ่ม สำหรับกดบันทึก และ ยกเลิก

แล้วมาเขียน เงื่อนไขเช็คตัวแปร _formKey.currentState.validate() ว่ามีข้อมูลหรือไม่ ที่ปุ่มกด  โดยเราจะใช้ Row() ครอบเอาไว้ เวลาแสดงปุ่มจะอยู่ในแถวเดียวกัน แต่เรากำหนดให้อยู่ ซ้าย กับ ขวา โดใช้ MainAxisAlignment.spaceBetween เอาไว้แยกได้ ตามรูปนี้

สังเกตุว่า ปุ่ม “บันทึก” เรากำหนด colors.green  เป็นสีเขียวเอาไว้  และปุ่ม  “ยกเลิก”  เราใช้ colors.red  สีแดง นั้นเอง

และดูคำสั่ง if(_formKey.currentState.validate()) {
// save
}else{
//cancel
}
เอาไวเช็คว่ามีข้อมูลหรือไม่  แล้วค่อยเขียน event ภายในอีกที
ต่อมาก็มากำหนด ชื่อตัวแปรที่จะควบคุม โดยใส่ รูปแบบ
controller: ตามด้วยตัวแปรที่ตั้งไว้   เช่น






สังเกตุที่ข้อความสีนำ้เงินทับข้อความ นะครับ จะเป็นการกำหนดตัวแปร หมายถึงตั้งชื่อ TextFormField นี้ว่าเก็บค่า email นั้นเอง

ต่อมาเราจะออกแบบให้ TextFormField ของ ctrlEmail นี้ต้องเช็คค่าก่อนว่าเป็น รูปแบบ Email จริงหรือไม่
โดยกำหนดตัวกำกับไว้ที่ด้านบน

จะใช้ bool กำหนดตัวแปรที่ชื่อ checkEmail(String email) โดยค่าภายในจะเป็น String แล้วกำหนด const  ค่าคงที่เป็น PATTERN_EMAIL =

"^([0-9a-zA-Z]([-.+\\w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-\\w]*[0-9a-zA-Z]\\.)+[a-zA-Z]{2,9})\$";

และสร้างตัวแปรกำกับอีกที
var pattern = new RegExp(PATTERN_EMAIL);

แล้วคืนค่ากลับ
return pattern.hasMatch(email);
ว่าเป็นค่าตัวแปรที่ Match กันตามค่าคงที่นี้หรือไม่ จะส่งค่าเป็น true หรือ false นั้นนะครับ

เดี่ยวมาต่อ ใน EP.3  เพราะจะเข้าไปสู่การเขียน API ด้วย NodeJS  เดี่ยวยาวเลย  รอติดตามครับ…..