Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

การใช้งาน Package จาก pub.dev

บทที่ 15: การใช้งาน Package จาก pub.dev

🔖 หมวดบทเรียน: การเพิ่มและใช้งานแพ็กเกจภายนอกใน Flutter

📌 เหมาะสำหรับ: ผู้ที่ต้องการเสริมความสามารถให้แอป เช่น HTTP, Firebase, การจัดการสถานะ ฯลฯ

🎯 เป้าหมาย: เรียนรู้วิธีค้นหา ติดตั้ง และใช้งานแพ็กเกจจาก https://pub.dev

🧭 เกริ่นนำ

แพ็กเกจ (package) คือเครื่องมือหรือไลบรารีเสริมที่พัฒนาโดยชุมชนหรือทีมงาน Flutter เพื่อให้เราใช้ความสามารถต่าง ๆ ได้ง่ายขึ้น เช่น การดึงข้อมูลจาก API, การจัดการสถานะ, การใช้แผนที่ ฯลฯ ซึ่งสามารถค้นหาและติดตั้งได้จาก https://pub.dev

🔍 ขั้นตอนการติดตั้งแพ็กเกจ

  1. ไปที่ https://pub.dev แล้วค้นหาแพ็กเกจ เช่น http
  2. คัดลอก dependency จากหน้าของแพ็กเกจ เช่น:
dependencies:
  http: ^0.13.5

  1. เปิดไฟล์ pubspec.yaml แล้ววางในส่วน dependencies
  2. รันคำสั่ง:
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