close

การจัดรูปแบบ UI ด้วย ThemeData และกำหนด Styles เอง Flutter

ใน Flutter คุณสามารถจัดรูปแบบรูปลักษณ์ของแอปพลิเคชันของคุณโดยใช้ ThemeData และปรับแต่งไฟล์ styles. ThemeData เป็นคลาสที่มีคุณสมบัติในการกำหนดสีเด่น styles ฟอนต์ padding ฯลฯ สำหรับทั้งแอ็พพลิเคชัน Custom Style ช่วยให้คุณสามารถปรับแต่ง styles สำหรับไฟล์ Widget. นี่คือคำแนะนำโดยละเอียดเกี่ยวกับวิธีใช้ ThemeData และกำหนดเอง Styles ใน Flutter:

ThemeData

ใน Flutter เป็น ThemeData คลาสที่มีแอตทริบิวต์เพื่อกำหนดสีหลัก ตระกูลฟอนต์ padding และตัวเลือกสไตล์อื่นๆ มากมายสำหรับทั้งแอปพลิเคชัน เมื่อใช้ ThemeData คุณสามารถเปลี่ยนลักษณะโดยรวมของแอปได้อย่างรวดเร็วโดยไม่ต้องแก้ไขทีละ Widget รายการ

คุณสมบัติทั่วไปของ ThemeData:

  • primaryColor: สีหลักสำหรับองค์ประกอบหลักของแอป เช่น แถบแอป ปุ่ม ฯลฯ
  • accentColor: สีเน้นสำหรับองค์ประกอบรองหรือไฮไลท์ใน UI เช่น FloatingActionButton
  • backgroundColor: สีพื้นหลังสำหรับทั้งแอป
  • textTheme: กำหนดข้อความหลัก styles สำหรับองค์ประกอบข้อความต่างๆ ในแอป เช่น หัวเรื่อง ข้อความเนื้อหา ฯลฯ
  • textTheme.headline1: ลักษณะข้อความสำหรับหัวเรื่องระดับ 1
  • textTheme.headline2: ลักษณะข้อความสำหรับหัวเรื่องระดับ 2
  • textTheme.bodyText1: ลักษณะข้อความสำหรับข้อความเนื้อหาหลัก 
MaterialApp(  
  theme: ThemeData(  
    primaryColor: Colors.blue, // Dominant colors for title bars, buttons, etc.  
    accentColor: Colors.green, // Primary color for secondary elements eg FloatingActionButton  
    fontFamily: 'Roboto', // The main font for the whole application  
    textTheme: TextTheme( // Dominant text styles for in-app texts  
      headline1: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),  
      headline2: TextStyle(fontSize: 30, fontWeight: FontWeight.w500),  
      bodyText1: TextStyle(fontSize: 16),  
   ),  
 ),  
  home: MyHomePage(),  
)

 

สไตล์ที่กำหนดเอง

กำหนดเอง Styles ช่วยให้คุณปรับแต่งสไตล์สำหรับแต่ละรายการ Widget เฉพาะ ด้วยการใช้ style แอตทริบิวต์ของวิดเจ็ต เช่น Text, Container, RaisedButton เป็นต้น คุณสามารถเปลี่ยนฟอนต์ สี ขนาดข้อความ padding และแอตทริบิวต์อื่นๆ ได้หลากหลาย

คุณสมบัติทั่วไปของ TextStyle(ใช้สำหรับ Text Widget):

  • fontSize: ขนาดตัวอักษร
  • fontWeight: น้ำหนักตัวอักษร
  • color: สีข้อความ
  • fontStyle: รูปแบบตัวอักษร เช่น ตัวหนา ตัวเอียง
  • letterSpacing: ระยะห่างระหว่างอักขระ
  • wordSpacing: ระยะห่างระหว่างคำ
  • decoration: การตกแต่งข้อความ เช่น ขีดเส้นใต้ ขีดทับ

ตัวอย่างการใช้ Custom Styles:

Text(  
  'Chào bạn',  
  style: TextStyle(fontSize: 24, color: Colors.red, fontWeight: FontWeight.bold),  
)  
  
Container(  
  width: 100,  
  height: 100,  
  color: Colors.blue,  
  padding: EdgeInsets.all(8),  
  child: Text('Container', style: TextStyle(fontSize: 18, color: Colors.white)),  
)

 

การใช้ Themes และ Styles กับ MediaQuery

คุณสามารถรวม Themes และ Styles กับ MediaQuery เพื่อปรับ UI ตามขนาดหน้าจอหรือความละเอียดของอุปกรณ์

ตัวอย่าง:

MediaQuery(  
  data: MediaQuery.of(context).copyWith(textScaleFactor: 1.5),  
  child: Text('The text will be scaled 1.5 times larger than the default size'),  
)

 

บทสรุป:

Flutter มีเครื่องมือที่มีประสิทธิภาพในการจัดรูปแบบ UI ของแอปพลิเคชันของคุณ เมื่อใช้ ThemeData และปรับแต่ง Styles คุณสามารถปรับองค์ประกอบ UI เช่น สี แบบอักษร ขนาดข้อความ ฯลฯ ได้อย่างง่ายดาย เพื่อสร้างอินเทอร์เฟซที่สวยงามและดึงดูดใจสำหรับแอปของคุณ