student_dio_getx

student_dio_getx

Flutter API รับและโพสต์โดยใช้ dio กับ getx

ตัวอย่างการจัดการสถานะ getx flutter

โครงการ Flutter นี้แสดงให้เห็นถึงวิธีการใช้แพ็คเกจ GetX สำหรับการจัดการสถานะดำเนินการโทร API และแสดงข้อมูลในแอปพลิเคชัน Flutter

ภาพรวม

• โครงการใช้แพ็คเกจ GETX สำหรับการจัดการสถานะซึ่งช่วยให้เราสามารถจัดการและอัปเดตสถานะของแอปพลิเคชันได้อย่างมีประสิทธิภาพ
• เราทำการโทร API เพื่อดึงรายชื่อนักเรียนและแสดงใน ListView
• โครงการยังมีแบบฟอร์มเพื่อเพิ่มนักเรียนใหม่ลงในรายการ
• นอกจากนี้ตัวโหลดแบบวงกลมจะปรากฏขึ้นในขณะที่ข้อมูลกำลังถูกดึงมาจาก API

คุณสมบัติ

1. GETX สำหรับการจัดการสถานะ: เราใช้ GETX เพื่อจัดการสถานะของแอปพลิเคชัน ซึ่งรวมถึงคอนโทรลเลอร์สำหรับการจัดการนักเรียนข้อมูลฟิลด์ข้อความและการจัดการการโทร API

2. การรวม API: โครงการรวมถึงตัวอย่างของการโทร API โดยใช้แพ็คเกจ DIO เพื่อดึงรายชื่อนักเรียน การตอบสนอง API จะปรากฏขึ้นใน ListView

3. การเพิ่มนักเรียน: ผู้ใช้สามารถเพิ่มนักเรียนใหม่ลงในรายการโดยใช้แบบฟอร์ม แบบฟอร์มตรวจสอบอินพุตและส่งข้อมูลไปยังเซิร์ฟเวอร์

4. ตัวโหลดแบบวงกลม: ในขณะที่ดึงข้อมูลจาก API ตัวโหลดวงกลมจะปรากฏขึ้นเพื่อระบุว่ากำลังโหลดข้อมูล

5. ไม่พบข้อมูลข้อความ: หากการตอบสนอง API ว่างเปล่าข้อความ "ไม่พบข้อมูล" จะปรากฏขึ้น

โครงสร้างโครงการ

• lib/controllers/ : มีตัวควบคุม Getx ที่ใช้สำหรับการจัดการสถานะ
• lib/views/ : มีมุมมอง UI รวมถึงหน้าจอหลักและแบบฟอร์มนักเรียน
• lib/main.dart : จุดเริ่มต้นของแอพพลิเคชั่น Flutter

ภาพหน้าจอ

1. ดูนักเรียนทุกคน

   

2. เพิ่มนักเรียน

   

3. แสดง Snackbar เกี่ยวกับความสำเร็จ

   

4. หลังจากเพิ่มนักเรียนใหม่