🔖 หมวดบทเรียน: การเพิ่มและใช้งานแพ็กเกจภายนอกใน Flutter
📌 เหมาะสำหรับ: ผู้ที่ต้องการเสริมความสามารถให้แอป เช่น HTTP, Firebase, การจัดการสถานะ ฯลฯ
🎯 เป้าหมาย: เรียนรู้วิธีค้นหา ติดตั้ง และใช้งานแพ็กเกจจาก https://pub.dev
🧭 เกริ่นนำ
แพ็กเกจ (package) คือเครื่องมือหรือไลบรารีเสริมที่พัฒนาโดยชุมชนหรือทีมงาน Flutter เพื่อให้เราใช้ความสามารถต่าง ๆ ได้ง่ายขึ้น เช่น การดึงข้อมูลจาก API, การจัดการสถานะ, การใช้แผนที่ ฯลฯ ซึ่งสามารถค้นหาและติดตั้งได้จาก https://pub.dev
🔍 ขั้นตอนการติดตั้งแพ็กเกจ
- ไปที่ https://pub.dev แล้วค้นหาแพ็กเกจ เช่น
http
- คัดลอก dependency จากหน้าของแพ็กเกจ เช่น:
dependencies:
http: ^0.13.5
- เปิดไฟล์
pubspec.yaml
แล้ววางในส่วน dependencies - รันคำสั่ง:
flutter pub get
📦 ตัวอย่าง: ใช้ package http
ดึงข้อมูลจาก API
import 'package:http/http.dart' as http;
import 'dart:convert';
void fetchData() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
print(data['title']);
}
}
🧪 ตัวอย่างใช้งานจริงในแอป
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: HomePage());
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String title = "โหลดข้อมูล...";
@override
void initState() {
super.initState();
fetchTitle();
}
void fetchTitle() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
setState(() {
title = data['title'];
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("ข้อมูลจาก API")),
body: Center(child: Text(title)),
);
}
}
✅ สรุป
- แพ็กเกจจาก pub.dev ช่วยให้เราทำสิ่งต่าง ๆ ได้ง่ายขึ้น เช่น HTTP, Firebase, Maps
- ติดตั้งแพ็กเกจโดยแก้ไข
pubspec.yaml
และรันflutter pub get
- ควรอ่านเอกสารของแต่ละแพ็กเกจเพื่อเข้าใจวิธีใช้งานอย่างถูกต้อง
ในบทถัดไป เราจะเรียนรู้การใช้งาน HTTP request อย่างละเอียด และการจัดการ JSON ที่ได้จาก API