🔖 หมวดบทเรียน: การกำหนดธีมและการปรับแต่งรูปลักษณ์ของแอป
📌 เหมาะสำหรับ: ผู้ที่ต้องการปรับสี ปุ่ม ตัวหนังสือ และบรรยากาศของแอปให้สอดคล้องกับแบรนด์หรือดีไซน์
🎯 เป้าหมาย: เรียนรู้การใช้
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 เพื่อใช้งานความสามารถเพิ่มเติมในโปรเจกต์