สร้างและจัดการโฟลเดอร์และไฟล์
ทุกตัวอย่างในหนังสือเล่มนี้จะเริ่มการสร้างโปรเจกต์เหมือนกับบทนี้ ดังนั้นอาจจะเก็บโครงสร้างการทำงานของบทนี้ไว้เพื่อใช้เป็นต้นแบบของโปรเจกต์ที่สร้างใหม่
สร้างโฟดเดอร์
เริ่มต้นจากสร้าง Flutter โปรเจกต์ใหม่ในโปรแกรม Visual Studio Code มีลำดับขั้นตอนดังนี้
1. กดปุ่ม Ctrl + Shift + P ในโปรแกรม Visual Studio Code พิมพ์ข้อความ “Flutter” ลงในช่องสำหรับค้นหาแล้วเลือก “Flutter: New Application Project” ดังแสดงในรูปที่ 3-1
รูปที่ 3-1 เลือกคำสั่งสำหรับสร้างโปรเจกต์ใหม่ในโปรแกรม Visual Studio Code
2. เลือกโฟลเดอร์ที่ต้องการเก็บโปรเจกต์ใหม่ ในตัวอย่างเลือกโฟลเดอร์ Flutter_Coding แล้วทำการกดปุ่ม “Select a folder to create the project in”
รูปที่ 3-2 แสดงการเลือกโฟลเดอร์สำหรับเก็บโปรเจกต์ใหม่
3. กำหนดชื่อโปรเจกต์ใหม่ด้วยชื่อ ch3_starter ดังแสดงในรูปที่ 3-3 เมื่อกดปุ่ม Enter แล้วโปรแกรม Visual Studio Code จะทำการสร้างโปรเจกต์ใหม่ ดังแสดงในรูปที่ 3-4
รูปที่ 3-3 กำหนดชื่อโปรเจกต์ใหม่
รูปที่ 3-4 โครงสร้างโปรเจกต์ใหม่ที่ถูกสร้างด้วยโปรแกรม Visual Studio Code
4. สร้างโฟลเดอร์เพื่อใช้สำหรับเก็บไฟล์โครงสร้างของโปรเจกต์ด้วยการมีลำดับนี้
4.1 สร้างโฟลเดอร์ assest สำหรับเก็บภาพ ไฟล์ข้อมูล และฟอนต์ (Fonts) ที่ต้องการใช้งานภายในแอปพลิเคชั่นด้วยการสร้างกดเมาส์ขวาที่ตำแหน่งว่างในส่วนของ EXPLORER จะมีป็อบอัพเมนูขึ้นมาให้เลือก New Folder ดังแสดงในรูป 3-5 (a)
4.2 พิมพ์ข้อความชื่อโฟลเดอร์ “assest” ในช่องว่าง ดังแสดงในรูป 3-5 (b)
4.3 สร้างโฟลเดอร์ images ภายใต้โฟลเดอร์ assets เพื่อทำหน้าที่เก็บไฟล์รูปภาพที่ต้องการใช้งานภายในแอปพลิเคชั่น ด้วยการกดปุ่มเมาส์ขวาที่โฟลเดอร์ assets แล้วจะมีป๊อบอัพเมนูขึ้นมาเลือกที่ New Folder ดังแสดงในรูป 3-5 (c) แล้วใส่ชื่อโฟลเดอร์ images ในช่องว่างเพื่อสร้างโฟลเดอร์ images ดังแสดงในรูป 3-5 (d)
5. สร้างโฟลเดอร์ pages, models, utils, widgets และ services ภายใต้โฟลเดอร์ lib ดังแสดงในรูป 3-5 (e) เพื่อทำหน้าที่เก็บข้อมูลแยกเป็นส่วนๆ เพื่อเข้าถึงไฟล์ที่ใช้สำหรับพัฒนาแอปพลิเคชั่นได้ง่าย โดยแต่ละโฟลเดอร์ทำหน้าที่เก็บข้อมูลดังนี้
• lib/pages: โฟลเดอร์สร้างไว้สำหรับเก็บไฟล์สำหรับใช้ติดต่อผู้ใช้งาน (User Interface: UI) เช่น หน้าสำหรับล็อกอิน, หน้าให้ผู้ใช้ป้อนข้อมูลสำหรับการนำไปใช้งาน เป็นต้น
• lib/models: โฟลเดอร์สร้างไว้สำหรับเก็บไฟล์โค้ดโปรแกรมที่พัฒนาเพื่อใช้ที่ใช้ในการจัดการเกี่ยวกับข้อมูลในการพัฒนาโปรแกรมเช่น ส่วนโปรแกรมจัดการเกี่ยวกับการเพิ่ม ลบ แก้ไข ค้นหาข้อมูลที่ต้องติดต่อกับฐานข้อมูล เป็นต้น
• lib/utils: โฟลเดอร์สร้างไว้สำหรับเก็บไฟล์โค้ดโปรแกรมที่ช่วยในการจัดการเช่น คำนวณวันที่ หรือส่วนที่ใช้สำหรับแปรค่าต่างๆ เป็นต้น
• lib/widgets: โฟลเดอร์สร้างไว้สำหรับเก็บไฟล์สร้างโคร้างสร้างวิดเจ็ตใหม่ที่มีรูปที่กำหนดค่าต่างๆ ไว้แล้วและต้องการนำกลับมาใช้ใหม่ในหน้าติดต่อผู้ใช้งาน
• lib/services: โฟลเดอร์สร้างไว้สำหรับเก็บไฟล์โค้ดที่ต้องใช้งานสำหรับบริการข้อมูลที่ต้องนำมาจากภายนอกแอปพลิเคชั่น
b) กำหนดชื่อโฟลเดอร์ใหม่
a) เลือกเมนูสำหรับสร้างโฟลเดอร์ใหม่ c) เลือกเมนูสำหรับสร้างโฟลเดอร์ใหม่ย่อย
d) กำหนดชื่อโฟลเดอร์ย่อย e) โฟลเดอร์ที่จำเป็นต้องใช้สำหรับพัฒนา
รูปที่ 3-5 การสร้างโฟลเดอร์สำคัญที่ใช้สำหรับพัฒนาแอปพลิเคชั่น
โครงสร้างของวิดเจ็ด (Structuring Widgets)
ในการพัฒนาแอปพลิเคชั่นในหนังสือเล่มนี้จะไฟล์ home.dart เป็นไฟล์สำหรับสร้างหน้าติดต่อผู้ใช้งานหลัก ซึ่งแยกออกมาจากไฟล์ main.dart ที่เป็นไฟล์หลักที่เก็บฟังก์ชั่น main( ) ในการเริ่มทำงานของแอปพลิเคชั่น
กำหนดโครงสร้าง main.dart
ก่อนที่เริ่มเรียนรู้ว่าพัฒนาแอปพลิเคชั่น Flutter อย่างไร ต้องเรียนรู้พื้นฐานการเตรียนโครงสร้างของแอปพลิเคชั่น ด้วยเริ่มจากทำการลบโค้ดคำสั่งในไฟล์ main.dart ให้เหลือข้อความของคำสั่งด้งแสดงในรูปที่ 3-6
อธิบายคำสั่ง
บรรทัดที่ 1 กำหนดให้นำไลบรารี material.dart มาใช้สำหรับการออกแบบวิดเจ็ดภายในไฟล์นี้
บรรทัดที่ 3 สร้างฟังก์ชั่น main( ) ซึ่งเป็นฟังก์ชั่นหลักในการรันแอปพลิเคชั่นของ Flutter
บรรทัดที่ 4 กำหนดให้รันแอปพลิเคชั่นด้วยการเรียกใช้ฟังก์ชั่น MyApp
บรรทัดที่ 7 สร้างคลาส MyApp กำหนดให้มีการสืบทอด StatelessWidget ซึ่งเป็นการกำหนดให้คลาสนี้จะมีรูปแบบการทำงานที่ไม่มีการเปลี่ยนแปลงใดๆ ในขณะรันแอปพลิเคชั่น (อธิบายเพิ่มเติม …..)
บรรทัดที่ 8-9 สร้างเมธอด build ที่มีหนี่งอาร์กิเมนต์ คือ BuildContext ซึ่งเป็นออบเจ็คที่เก็บการอ้างอิงของ วิดเจ็ต โดยหนึ่งวิดเจ็ตจะมีแค่หนึ่ง BuildContext เท่านั้น ดังนั้น BuildContext จะเป็นตัวเชื่อมกับอีก BuildContext โดยอัตโนมัติเมื่อวิดเจ็ตนี้อยู่ในรูปของวิดเจ็ตลูก (Child Widget) ทำให้เกิดเป็นโครงของของของ Widget Tree ขึ้นมาในการสร้างความสัมพันธ์ระหว่างวิเจ็ด (อธิบายเพิ่มเติมใน……)
บรรทัดที่ 10 กำหนดให้คืนค่า (return) เป็น MaterialApp เสมอในไฟล์หลักเพื่อกำหนดโครงสร้างตามรูปแบบของไลบรารี material.dart ที่นำเข้ามา ภายในโครงสร้างของวิดเจ็ต MaterialApp จะมีองค์ประกอบหลักจะอธิบายต่อไป
บรรทัดที่ 11 กำหนค่าคุณสมบัติ (Property) title ของวิดเจ็ต MaterialApp เพื่อเป็นข้อความแสดงที่ส่วนบนของแอปพลิเคชั่น
บรรทัดที่ 12-15 กำหนดคุณสมบัติ theme เพื่อกำหนดรูปแบบการการแสดงของสีของแอปพลิเคชั่น
บรรทัดที่ 16 กำหนดส่วน Body ของแอปพลิเคชั่น ซึ่งจะมีการเปลี่ยนเป็นเรียนใช้งานคลาส Home ต่อไป
สร้างไฟล์ home.dart และวิดเจ็ต
ไฟล์ home.dart จะเป็นไฟล์ที่จะเป็นเพจหลักของแอปพลิเคชั่น โดยไฟล์นี้จะไม่ได้ถูกสร้างให้อัตโนมัติดังนี้มีลำดับการสร้างไฟล์ดังนี้
1. สร้าง Dart ไฟล์ในโฟลเดอร์ page ด้วยการกดเมาส์ขวาที่โฟลเดอร์ page แล้วเลือกป็อบอัพเมนู New File เมื่อเลือกแล้วให้พิมพ์ชื่อไฟล์ home.dart ลงในกำหนดชื่อไฟล์ แล้วกดที่คีย์บอร์ดคีย์ Enter เพื่อสร้างไฟล์
รูปที่ 3-7 แสดงตำแหน่งสร้างไฟล์ home.dart
2. เพิ่มการนำไลบรารี metrial.dart ภายในไฟล์ home.dart
import 'package:flutter/material.dart';
3. ให้พิมพ์ st จะมีส่วนช่วยเหลือขึ้นมาดังแสดงในรูปที่ 3-8 (a) ให้เลือก stateful widget เพื่อเพิ่มส่วนคำสั่งที่เกี่ยวข้อง stateful มาให้ดังแสดงในรูป 3-8 (b) แสดงส่วนประกอบของคลาส stateful widget
a) ส่วนช่วยเหลือให้ที่เพื่อให้เขียนโปรแกรมได้สะดวก b) คำสั่งที่เกี่ยวข้องกับ stateful ที่เลือก
รูปที่ 3-8 แสดงการเพิ่มส่วนคลาส stateful widget
4. เพิ่มข้อความ Home ระหว่างคำ class และ extends เพื่อสร้างคลาส Home ที่มีการสืบทอดคุณสมบัติคลาส StatefulWidget ดังแสดงในรูปที่ 3-9
รูปที่ 3-9 แสดงการเพิ่มข้อความ Home เพื่อสร้างคลาส Home
คลาส Home สืบคุณสมบัติคลาส StatefulWidget เนื่องจากคลาส Home ต้องมีการตอบสนองอย่างต่อเนื่องเมื่อมีการเปลี่ยนข้อมูลภายในหน้าติดต่อผู้ใช้ของไฟล์ home.dart จึงกำหนดการสืบทอดคุณสมบัติ StatefulWidget
5. เปลี่ยนวิดเจ็ด Containner เป็นวิดเจ็ด Scaffold ที่เปลี่ยนวิดเจ็ดเป็น Scaffold เนื่องจากเป็นวิดเจ็ดที่จัดการเกี่ยวกับพื้นฐานการใช้งาน Material Design ในการออกแบบหน้าติดต่อผู้ใช้งาน ที่อนุญาตให้เพิ่มขยายในการออกแบบ AppBar, BottonAppBar, FloatingActionButton, Drawer, SnackBar, ButtonSheet และอื่นๆ อีก เมื่อเปลี่ยนวิดเจ็ดเป็น Scaffold แล้วให้เพิ่มส่วนวิดเจ็ด appBar และ body ตามรูปที่ 3-10 โดยจะอธิบายแผนผังต้นไม้ (Tree Structures) ของวิดเจ็ดในหัวข้อถัดไป
รูปที่ 3-10 เพิ่มส่วนขยายในการแสดงหน้าติดต่อผู้ใช้ภายใต้วิดเจ็ด Scaffold
อธิบายเพิ่มเติม
Flutter ทุกอย่างเป็นวิดเจ็ด (Widgets) ดังนั้นวิดเจ็ดจึงเป็นส่วนต่างๆ ที่ประกอบกันเป็นส่วนแสดงผลที่หน้าติดต่อผู้ใช้งาน (UI) เช่น ข้อความ (Text) ปุ่ม (Bottom) เป็นต้น
6. ในไฟล์ main.dart ให้เรียกใช้คลาส Home ดังแสดงในรูปที่ 3-11 เมื่อเพิ่มแล้วยังเกิดข้อผิดพลาดอยู่ให้เอาเคอร์เซอร์ไปว่างที่ “Home” แล้วจะมีหลอดไฟ ( ) แสดงขึ้นมาให้เอาเมาส์ไปคลิกที่หลอดไฟจะมีป๊อบอัพเมนูขึ้นมาให้เลือก “Import library ‘pages/home.dart” เพื่อเพิ่มไลบรารีของไฟล์นี้ดังรูปที่ 3-11
รูปที่ 3-11 นำไฟล์ home.dart มาใช้งานในไฟล์ main.dart
7. รันแอปพลิเคชั่น และแสดงส่วนประกอบในหน้าแอปพลิเคชั่นในรูปที่ 3-12
รูปที่ 3-11 แสดงหน้าแอปพลิเคชั่น และส่วนประกอบในการกำหนดหน้าแอปพลิเคชั่น
โฆษณา
- ดาวน์โหลดแอปพลิเคชัน
- © 2025 Blockdit
