🔖 หมวดบทเรียน: การใช้งาน Widget เบื้องต้นสำหรับการสร้าง UI
📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการสร้างหน้าจอและจัดวางองค์ประกอบต่าง ๆ ในแอป Flutter
🎯 เป้าหมาย: เข้าใจการใช้ Widget พื้นฐาน 3 ตัว ได้แก่ Text, Container และ Image พร้อมตัวอย่างโค้ด
🧭 เกริ่นนำ
ใน Flutter ทุกสิ่งที่คุณเห็นบนหน้าจอคือ Widget ตั้งแต่ข้อความ ปุ่ม รูปภาพ ไปจนถึงหน้าจอทั้งหน้า ในบทนี้เราจะเริ่มจากการใช้งาน Widget พื้นฐาน 3 ตัวที่สำคัญที่สุด ได้แก่ Text
, Container
และ Image
ซึ่งใช้บ่อยมากในการพัฒนาแอป คุณจะได้เห็นตัวอย่างโค้ดและผลลัพธ์ของแต่ละ Widget
📝 Text Widget
ใช้แสดงข้อความธรรมดา เช่น:
Text("สวัสดีชาวโลก")
เพิ่มการตกแต่ง:
Text(
"Hello Flutter!",
style: TextStyle(
fontSize: 24,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
)
📦 Container Widget
ใช้ห่อ widget อื่น ๆ เพื่อกำหนดขนาด สี พื้นหลัง การจัดวาง:
Container(
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(10),
),
child: Text("ข้อความใน Container"),
)
🖼️ Image Widget
ใช้แสดงภาพจาก asset หรืออินเทอร์เน็ต
- โหลดภาพจาก asset:
Image.asset('assets/images/logo.png')
- โหลดภาพจาก network:
Image.network('https://example.com/image.jpg')
🎯 ตัวอย่างรวม
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text("Widget พื้นฐาน")),
body: Center(
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.lightBlue[50],
borderRadius: BorderRadius.circular(12),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("ยินดีต้อนรับ", style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
Image.network('https://flutter.dev/assets/homepage/carousel/slide_1-bg-opaque-8e3b6b8c2e245ebf3b54694a89d4f9ae319b27da9ca4f0db3a4f5b2ed5efb6a5.png', height: 100),
],
),
),
),
),
);
}
}
✅ สรุป
Text
ใช้แสดงข้อความพร้อมจัด styleContainer
ใช้สำหรับจัดวาง widget อื่น ๆ และตกแต่ง UIImage
ใช้แสดงรูปภาพจาก asset หรือ URL
ในบทถัดไปเราจะไปต่อกับ Layout Widget เช่น Row
, Column
, และ Stack
ซึ่งช่วยจัดวางหลาย widget ในแนวตั้ง แนวนอน และซ้อนกัน