บทที่ 13: Icon และ Asset ภาพในแอป

🔖 หมวดบทเรียน: การใช้ไอคอนและรูปภาพในแอป Flutter

📌 เหมาะสำหรับ: ผู้เริ่มต้นที่ต้องการเพิ่มไอคอนและรูปภาพให้กับหน้าจอ

🎯 เป้าหมาย: เรียนรู้การใช้งาน Icon, Image.asset, และวิธีเพิ่มไฟล์ภาพในโปรเจกต์ Flutter

🧭 เกริ่นนำ

UI ที่ดีควรมีทั้งข้อความและภาพประกอบ ไม่ว่าจะเป็นไอคอนหรือภาพจากกล้อง/อินเทอร์เน็ต ใน Flutter คุณสามารถใช้ widget Icon เพื่อแสดงไอคอน และ Image.asset หรือ Image.network เพื่อแสดงรูปภาพ ในบทนี้เราจะเรียนรู้การเพิ่มและเรียกใช้ asset ให้แอปดูน่าสนใจมากขึ้น

🔘 การใช้ Icon

Icon(Icons.favorite, color: Colors.red, size: 32)

ใช้ Icons.ชื่อไอคอน จากไลบรารีที่ Flutter มีมาให้
สามารถกำหนด color และ size ได้

🖼️ การใช้ Image.asset (ภาพจากในโปรเจกต์)

เตรียมภาพไว้ในโฟลเดอร์ เช่น assets/images/logo.png
แก้ไฟล์ pubspec.yaml ให้เปิดใช้ asset

flutter:
  assets:
    - assets/images/logo.png

เรียกใช้งานในโค้ด:

Image.asset('assets/images/logo.png', height: 100)

🌐 การใช้ Image.network (ภาพจาก URL)

Image.network('https://example.com/pic.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("ไอคอนและรูปภาพ")),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Icon(Icons.star, color: Colors.orange, size: 40),
              SizedBox(height: 10),
              Image.asset('assets/images/logo.png', height: 80),
              SizedBox(height: 10),
              Image.network('https://flutter.dev/images/flutter-logo-sharing.png', height: 80),
            ],
          ),
        ),
      ),
    );
  }
}

✅ สรุป

Icon ใช้ไอคอนที่มีในระบบ เช่น favorite, home, star
Image.asset ใช้ภาพจากโปรเจกต์ ต้องลงทะเบียนใน pubspec.yaml
Image.network ใช้ภาพจาก URL ได้ทันทีโดยไม่ต้องเตรียมไว้ล่วงหน้า

ในบทถัดไป เราจะเรียนรู้การจัดการธีมของแอปด้วยการใช้ ThemeData และปรับแต่งสี ฟอนต์ และสไตล์ของแอป