Material และ Cupertino widget คืออะไร?

Question

Accepted Answer

Flutter มีระบบดีไซน์หลักสองระบบในรูปแบบชุด widget: **Material** (Material Design ของ Google สไตล์ Android) และ **Cupertino** (สไตล์ iOS) ทั้งสองช่วยให้คุณสร้าง UI ที่เข้ากับภาษาดีไซน์ของแต่ละแพลตฟอร์ม หรือรูปลักษณ์ที่สอดคล้องและกำหนดเองได้

## Material widget (Material Design)

```dart
// Material widgets follow Google's Material Design (Android look, but usable anywhere)
MaterialApp(                       // the app root for Material apps
  home: Scaffold(                  // Material page structure
    appBar: AppBar(title: Text('Material')),
    body: Center(
      child: ElevatedButton(       // Material button
        onPressed: () {},
        child: Text('Material Button'),
      ),
    ),
    floatingActionButton: FloatingActionButton(onPressed: () {}),
  ),
)
// Material widgets: Scaffold, AppBar, ElevatedButton, Card, FloatingActionButton, etc.
```

## Cupertino widget (สไตล์ iOS)

```dart
// Cupertino widgets follow Apple's iOS design language
CupertinoApp(
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(middle: Text('iOS')),
    child: Center(
      child: CupertinoButton(      // iOS-style button
        onPressed: () {},
        child: Text('iOS Button'),
      ),
    ),
  ),
)
// Cupertino widgets: CupertinoButton, CupertinoNavigationBar, CupertinoPicker, etc.
```

## การเลือกใช้และ UI ที่ปรับตามแพลตฟอร์ม

```text
→ MATERIAL → most common default; works on all platforms; Google's design system
→ CUPERTINO → for an authentic iOS look
→ Many apps just use Material everywhere (consistent, simpler) — Flutter draws its own
  UI, so Material works fine on iOS too
→ PLATFORM-ADAPTIVE → use Material on Android, Cupertino on iOS (native feel per platform)
  — more effort; choose based on whether platform-native look matters
```

## ทำไมจึงสำคัญ

การเข้าใจ Material และ Cupertino widget มีคุณค่าเพราะเป็นระบบดีไซน์หลักสองระบบของ Flutter ที่ให้ widget ที่ใช้สร้าง UI ของแอป จึงเป็นความรู้พื้นฐานที่มีประโยชน์ **Material widget** (ที่ใช้งาน Material Design ของ Google ซึ่งเป็นภาษาดีไซน์สไตล์ Android) เป็นค่าเริ่มต้นที่พบบ่อยที่สุดและรวมถึง widget สำคัญที่ใช้ในแอป Flutter ส่วนใหญ่ (Scaffold สำหรับโครงสร้างหน้า AppBar ปุ่ม Card FloatingActionButton) — การเข้าใจพวกมันเป็นสิ่งจำเป็นเนื่องจากแอป Flutter ส่วนใหญ่ใช้ Material **Cupertino widget** (ที่ใช้งานภาษาดีไซน์ iOS ของ Apple) ช่วยให้คุณสร้างอินเทอร์เฟซที่ดูเหมือน iOS อย่างแท้จริง

การเข้าใจทั้งสองและ **วิธีการเลือก** มีคุณค่าในทางปฏิบัติ: แอปจำนวนมากเพียง **ใช้ Material ทุกที่** (สอดคล้องกันและเรียบง่ายกว่า และเนื่องจาก Flutter วาด UI ของตัวเอง Material จึงทำงานได้ดีแม้บน iOS) ในขณะที่แอปที่ต้องการ **รูปลักษณ์เนทีฟตามแพลตฟอร์ม** สามารถใช้ **แนวทางที่ปรับตามแพลตฟอร์ม (platform-adaptive)** ได้ (Material บน Android, Cupertino บน iOS ให้แต่ละแพลตฟอร์มมีความรู้สึกเนทีฟ โดยแลกกับความพยายามที่มากขึ้น)

การเข้าใจการเลือกนี้ — Material ที่สอดคล้องกันทุกที่ (เรียบง่ายกว่า) เทียบกับ platform-adaptive (ความรู้สึกเนทีฟตามแพลตฟอร์ม) — สะท้อนถึงการตัดสินใจด้านดีไซน์จริงในการพัฒนา Flutter

การรู้ชุด widget ที่มีอยู่และระบบดีไซน์ของพวกมันเป็นพื้นฐานในการสร้าง UI ที่ดูเหมาะสม ไม่ว่าจะเข้ากับธรรมเนียมของแพลตฟอร์มหรือนำเสนอดีไซน์ที่กำหนดเองอย่างสอดคล้องกัน

เนื่องจากการสร้าง UI ของ Flutter ต้องใช้ชุด widget เหล่านี้ (Material เป็นค่าเริ่มต้นทั่วไป Cupertino สำหรับการจัดสไตล์ iOS) และการเข้าใจพวกมันและการเลือกระหว่างดีไซน์ที่สอดคล้องกันกับ platform-adaptive มีประโยชน์ต่อการสร้างแอปที่ดูเหมาะสม การเข้าใจ Material และ Cupertino widget จึงเป็นความรู้ Flutter พื้นฐานที่มีคุณค่า — จำเป็นต่อการสร้าง UI (โดยเฉพาะ Material widget ที่ใช้กันทั่วไป) และมีประโยชน์ต่อการตัดสินใจที่ดีเกี่ยวกับรูปลักษณ์ของแอปและธรรมเนียมของแพลตฟอร์ม ซึ่งเป็นแง่มุมเชิงปฏิบัติของการพัฒนา UI ของ Flutter ในแต่ละวัน