สอน flutter โดย DIY Recipe Project | EP.2 Dependencies, Dynamic Form, Validation Form

จาก EP.1 เราได้รู้จัก Scaffold, Stateful, Stateless, Routing ไปกันแล้ว EP.2 จะมาทำความรุ้จักกับคำว่า Dependencies แล้วเราจะมาทำ Dynamic Form พร้อมกับการ Validation Form กันนะครับ

ใครที่ยังไม่เคยอ่านบทความFlutter นี้ กลับไปอ่าน EP.1 ตามลิงค์ข้างล่างนะครับ

สอน flutter โดย DIY Recipe Project EP.1 | MolySulfur

สวัสดีครับ วันนี้เจ้าของบล๊อค อยากจะฝึกเขียน Flutterจึงคิดหาโปรเจคเล็กๆทำเป็นการฝึก เป็นการสอน ไปด้วยเลย โดย แอพที่จะทำมีชื่อว่า DIYRecipe Project ครับผม ตามชื่อนะครับ ก็คือ สูตรอาหารแบบคิดเอาเอง ^.^ใครที่ยังไม่ได้ลง Flutter สามารถดูวิธีลงตามนี้ได้เลยครับ InstallInstall Flutter and get started. …

MolySulfurApirom Yaboon

บทความนี่จะพาไปทำการ upload รูปภาพ และ ทำ dynamic form นะครับ ตัวอย่างตามรูปด้านล่าง

โดยส่วนแรกเราจะมาทำ การอัพโหลดรูปภาพ รู้กันก่อน ในการอัพโหลดรูปภาพนั้นเราจะใช้ตัวช่วยในการ เลือกว่าเราจะอัพโหลดรูป จาก Gallery หรือ Camera นะครับ

จะใช้ตัวช่วยต้องลง dependency ก่อน

dependency ถ้าแปลจาก google translate มันก็จะแปลว่า การพิ่งพา ในโปรแกรมก็เหมือนกับการ เอา module หรือ function จากที่อื่นมาใช้ พิ่งพาหรือนำมาใช้ในโปรแกรมของเรา โดยในสายงานบางที่ก็จะเรียกมันว่า library บ้าง หรือ module บ้าง แล้วแต่จะเรียกกันนะครับในบทความนี้ เจ้าของบทความขอเรียกมันว่า library ละกันครับ

Library ที่จะใช้ในการ เลือกการอัพโหลดรูป มีชื่อว่า image_picker

image_picker | Flutter Package

image_picker - Flutter plugin for selecting images from the Android and iOS image library, and taking new pictures with the camera.

Dart packages

วิธีลงก็ง่ายแสนง่าย เปิด pubspec.yaml ขึ้นมาแล้วเพิ่มโค๊ดเข้าไปในส่วนนี้ครับ

dependencies:
  flutter:
    sdk: flutter
  image_picker: 0.6.7

กด Pub get เป็นการโหลด library เข้ามาในโปรเจคของเราครับ จากนั้นทำตามโค๊ดด้านล่างเลยครับ

เมื่อทำตามโค๊ดแล้ว เมื่อกดปุ่ม Upload จะได้ผลลัพธ์ประมาณนี้ครับ

ต่อไปจะพามาทำ Validation Form กัน

จากโค๊ดจะมาอธิบายใน GlobalKey , TextEditingControlle และ InputDecoration สักหน่อยว่ามันคืออะไรนะครับ

GlobalKey

เป็นคลาส ที่กำหนด key ให้กับ Form เพื่อที่จะสามารถใช้ state ต่างๆ ใน Form ได้ ในตัวอย่างนี้ก็คือ _formKey.currentState.validate() คือการ validate ค่าทั้งหมดที่อยู่ใน Form

TextEditingController

เป็น Controller  ให้กับ TextFormField

InputDecoration

ก็จะคล้ายกับการใส่ style ใส่ ค่า default ให้กับ TextForm ของเรา

ซึ่ง Decoration แปลว่า การตกแต่ง

ผลลัพธ์ที่ได้เมื่อกด Submit

ในส่วนต่อไปเมื่อเรารู้จักการทำ Validate Form แล้ว เจ้าของบทความก็เลยอยากที่จะทำที่มันยากขึ้นมาอีกหน่อย คือการ เพิ่ม/ลบ TextFormField ได้

ทำ Dynamic Form

ขั้นต่อไปเราจะทำส่วนที่เป็น Dynamic Form แต่ก่อนที่จะทำ ผมอยากมาชวนพาทำ view/widget ของ Form ตัวนี้ก่อนครับ เริ่มจาก ./widget/recipe_text_field.dart

จากโค๊ดแล้วหน้าตา widget จะออกมาประมาณนี้ครับ

เริ่ม Dynamic Form ได้แล้วครับ

เพิ่ม veriable เข้าไปใน _RecipeFormPage

จากนั้น ปรับในส่วนของ widget หน้า _RecipeFormPage ตามนี้เลยครับ

จากโค๊ด เจ้าของบทความได้ประกาศ RecipeFormField ในรูปแบบ list เมื่อ ทำการกด add เข้าไป จะ ให้ เพิ่ม RecipeFormField เข้าไปยัง list แล้วใช้คำสั่ง setState ให้ view/widget แสดงตามข้อมูลใหม่อีกครั้งครับ

ส่วนใน RecipeTextField เมื่อ ลูบจาก list แล้ว จะให้ set ฟังก์ชัน onRemove ที่เป็น callback function เพื่อที่จะ callback กลับมาว่า ให้ลบ Field index ไหนออกไป เพียงเท่านี้ ก็ทำให้มันสามารถ เพิ่ม/ลบ field กันได้แล้วครับ

เมื่อทำการใส่ข้อมูลจะได้ผลลัพธ์มาประมาณนี้ครับผม

บทนี้ ก็จะเป็นการเรียนรู้เรื่องทำ Form นะครับ แอพส่วนใหญ่ก็จะมีการทำ Form Input ให้กรอกข้อมูลนั้นนี่ บทความนี้เลยพาทำแต่ กลัวมันจะง่ายเกินไปเลยก็หาโจทย์ที่มันยากขึ้นมาสักหน่อยคือการทำ Dynamic มันซะเลย ส่วน EP ต่อไปจะพาทำ SqlLite นะครับ เราจะพาทำการต่อกับ database กันครับ

Add & Remove TextFormFields dynamically in Flutter

Hey, do your flutter form requires to add and remove TextFormFields dynamically? How many text editing controllers will you initialize at starting? How will you dispose these controllers properly…

Dev GeniusHitesh Verma

personal-by-molysulfur/diy-recipe-flutter

DIY Recipe Project. Contribute to personal-by-molysulfur/diy-recipe-flutter development by creating an account on GitHub.

GitHubpersonal-by-molysulfur

Add & Remove TextFormFields dynamically in Flutter

Hey, do your flutter form requires to add and remove TextFormFields dynamically? How many text editing controllers will you initialize at starting? How will you dispose these controllers properly…

Dev GeniusHitesh Verma