🔖 หมวดเสริม: การเชื่อมต่อระบบ backend จริงกับแอป Flutter
📌 เหมาะสำหรับ: ผู้ที่ต้องการเชื่อมต่อแอป Flutter กับฐานข้อมูล MySQL ผ่าน API
🎯 เป้าหมาย: เข้าใจการเชื่อม Flutter กับ PHP/MySQL ด้วย HTTP request และ JSON
🧭 เกริ่นนำ
Flutter ไม่สามารถเชื่อมต่อกับฐานข้อมูล MySQL โดยตรง แต่สามารถใช้ PHP หรือ Node.js เขียน REST API เพื่อให้ Flutter ดึงข้อมูลผ่าน HTTP ได้ ซึ่งเป็นแนวทางมาตรฐานในการพัฒนาแอปที่มี backend จริง
🌐 โครงสร้างระบบ
Flutter App <--> REST API (PHP/Node.js) <--> MySQL Database
🛠️ 1. สร้าง REST API ด้วย PHP (ตัวอย่าง)
ไฟล์: get_users.php
<?php
$conn = new mysqli("localhost", "root", "", "flutter_demo");
$result = $conn->query("SELECT id, name, email FROM users");
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
?>
📱 2. เรียก API จาก Flutter
เพิ่ม dependency ใน pubspec.yaml
dependencies:
http: ^0.13.5
โค้ด Flutter:
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: UserList());
}
}
class UserList extends StatefulWidget {
@override
_UserListState createState() => _UserListState();
}
class _UserListState extends State<UserList> {
List users = [];
Future<void> fetchUsers() async {
final response = await http.get(Uri.parse('http://yourdomain.com/get_users.php'));
if (response.statusCode == 200) {
setState(() => users = json.decode(response.body));
}
}
@override
void initState() {
super.initState();
fetchUsers();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Users from MySQL')),
body: ListView.builder(
itemCount: users.length,
itemBuilder: (ctx, i) => ListTile(
title: Text(users[i]['name']),
subtitle: Text(users[i]['email']),
),
),
);
}
}
✅ สรุป
- Flutter สื่อสารกับ MySQL ผ่าน REST API เท่านั้น
- API ฝั่ง PHP รับผิดชอบ query และส่ง JSON กลับ
- Flutter ใช้
http
package รับข้อมูลมาแสดงผล
หากต้องการต่อยอด: เพิ่ม insert/update, auth, JWT, pagination ฯลฯ ได้เลยครับ!