Dev to webs {Coding…}

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

บทที่ 14: การใช้ Theme และปรับแต่ง UI

🔖 หมวดบทเรียน: การกำหนดธีมและการปรับแต่งรูปลักษณ์ของแอป

📌 เหมาะสำหรับ: ผู้ที่ต้องการปรับสี ปุ่ม ตัวหนังสือ และบรรยากาศของแอปให้สอดคล้องกับแบรนด์หรือดีไซน์

🎯 เป้าหมาย: เรียนรู้การใช้ ThemeData เพื่อปรับแต่ง UI ทั้งแอป เช่น สีหลัก ฟอนต์ และปุ่ม

🧭 เกริ่นนำ

ธีม (Theme) คือวิธีการกำหนดรูปลักษณ์ของแอปในระดับแอปพลิเคชัน เช่น สีปุ่ม สีพื้นหลัง ฟอนต์ การใช้ธีมจะช่วยให้แอปของคุณดูสม่ำเสมอและสวยงามยิ่งขึ้น Flutter มี ThemeData สำหรับปรับแต่งสิ่งเหล่านี้อย่างสะดวก

🎨 การกำหนด Theme ด้วย ThemeData

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.green,
    textTheme: TextTheme(
      bodyMedium: TextStyle(fontSize: 16, color: Colors.black87),
    ),
  ),
  home: MyHomePage(),
)

  • primarySwatch: กำหนดสีหลักของแอป เช่น AppBar, ปุ่ม
  • textTheme: ปรับแต่งข้อความทั่วแอป

💡 ใช้ Theme ใน Widget ต่าง ๆ

Text("ยินดีต้อนรับ", style: Theme.of(context).textTheme.bodyMedium)

ElevatedButton(
  onPressed: () {},
  child: Text("กดฉัน")
)

โดยไม่ต้องกำหนด style ซ้ำ ๆ

🌗 Dark Theme

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // เปิด dark mode ตามระบบเครื่อง
  home: MyApp(),
)

🧪 ตัวอย่างรวม

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
        textTheme: TextTheme(
          bodyMedium: TextStyle(fontSize: 18, color: Colors.deepPurple[900]),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(backgroundColor: Colors.deepPurple),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ธีมและการตกแต่ง")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("สวัสดี Flutter!", style: Theme.of(context).textTheme.bodyMedium),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {},
              child: Text("ปุ่มสวย ๆ"),
            )
          ],
        ),
      ),
    );
  }
}

✅ สรุป

  • ใช้ ThemeData เพื่อปรับแต่ง UI ทั้งแอปแบบรวมศูนย์
  • ปรับแต่งข้อความ, ปุ่ม, สีหลัก ผ่าน theme ได้สะดวก
  • รองรับ Dark Mode ได้ด้วย darkTheme และ themeMode

ในบทถัดไป เราจะเรียนรู้การเพิ่ม package ภายนอกจาก pub.dev เพื่อใช้งานความสามารถเพิ่มเติมในโปรเจกต์