Anuchit Chalothorn

ใช้ Material U ใน Flutter

---

13 Mar 2025, 11:09

Material U เป็นแนวคิดการออกแบบใหม่จาก Google ที่เปิดตัวพร้อมกับ Android 12 ซึ่งมุ่งเน้นการปรับแต่ง UI ตามสีสันและธีมของผู้ใช้โดยอัตโนมัติ Flutter ได้รองรับ Material You (Material 3) ผ่าน Material Design 3 เพื่อให้แอปของคุณสามารถใช้ประโยชน์จากฟีเจอร์การปรับแต่งแบบไดนามิกได้

เปิดใช้งาน Material 3 ใน Flutter

Flutter รองรับ Material 3 (Material You) ผ่าน ThemeData ใน Flutter 3.7 เป็นต้นไป หากต้องการเปิดใช้งาน ให้ตั้งค่าตัวเลือก useMaterial3: true ใน ThemeData

import 'package:flutter/material.dart';
        import 'package:dynamic_color/dynamic_color.dart';
        
        void main() {
          runApp(const MyApp());
        }
        
        class MyApp extends StatelessWidget {
          const MyApp({super.key});
        
          @override
          Widget build(BuildContext context) {
            return DynamicColorBuilder(
              builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
                return MaterialApp(
                  title: 'Material U Demo',
                  theme: ThemeData(
                    useMaterial3: true,
                    colorScheme: lightDynamic ?? ColorScheme.fromSeed(seedColor: Colors.blue),
                  ),
                  darkTheme: ThemeData(
                    useMaterial3: true,
                    colorScheme: darkDynamic ?? ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark),
                  ),
                  home: const HomeScreen(),
                );
              },
            );
          }
        }
        
        class HomeScreen extends StatelessWidget {
          const HomeScreen({super.key});
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              appBar: AppBar(title: const Text('Material U in Flutter')),
              body: Center(
                child: ElevatedButton(
                  onPressed: () {},
                  child: const Text('กดที่นี่'),
                ),
              ),
            );
          }
        }
        

ฟีเจอร์หลักของ Material U ใน Flutter

Dynamic Color ด้วย dynamic_color package

หากรันแอปบน Android 12 ขึ้นไป Flutter สามารถดึงสีจากวอลเปเปอร์ของผู้ใช้และนำมาปรับแต่ง UI อัตโนมัติ โดยใช้แพ็กเกจ dynamic_color ซึ่งช่วยให้สามารถดึง ColorScheme ที่กำหนดโดยระบบได้ง่ายขึ้น

Adaptive Components

Material 3 นำเสนอคอมโพเนนต์ที่ปรับตัวเข้ากับขนาดหน้าจอและธีม เช่น BottomAppBar, NavigationDrawer, SegmentedButton ซึ่งช่วยให้แอปดูทันสมัยขึ้น

Typography และ Shape ใหม่

Material 3 มีการปรับปรุงตัวอักษร (Typography) และรูปทรง (Shape) เพื่อให้ UI ดูเป็นมิตรขึ้น ตัวอย่างเช่น ปุ่มใน Material 3 จะมีมุมโค้งที่สวยงามมากขึ้น

Material U หรือ Material 3 ช่วยให้แอป Flutter ของคุณรองรับการปรับแต่ง UI ตามธีมของผู้ใช้ และทำให้แอปดูทันสมัยขึ้น หากคุณต้องการให้แอปของคุณสอดคล้องกับแนวทางของ Android 12+ แนะนำให้เปิดใช้งาน Material 3 โดยใช้ useMaterial3: true ใน ThemeData และใช้คอมโพเนนต์ที่รองรับการปรับแต่งแบบไดนามิก รวมถึงใช้แพ็กเกจ dynamic_color เพื่อให้แอปรองรับ Dynamic Color อย่างเต็มที่