Dev to webs {Coding…}

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

บทที่ 5: การใช้งาน Widget พื้นฐาน (Text, Container, Image)

🔖 หมวดบทเรียน: การใช้งาน 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 ใช้แสดงข้อความพร้อมจัด style
  • Container ใช้สำหรับจัดวาง widget อื่น ๆ และตกแต่ง UI
  • Image ใช้แสดงรูปภาพจาก asset หรือ URL

ในบทถัดไปเราจะไปต่อกับ Layout Widget เช่น Row, Column, และ Stack ซึ่งช่วยจัดวางหลาย widget ในแนวตั้ง แนวนอน และซ้อนกัน