Scaffold: คืออะไร โครงสร้างและวิดเจ็ตใน Flutter

Scaffold ใน Flutter คืออะไร

Scaffold เป็นวิดเจ็ตเค้าโครงจากไลบรารี Material Design ที่สร้างโครงสร้างภาพพื้นฐานของหน้าจอ มันใช้รูปแบบแอปพลิเคชัน Material มาตรฐาน: แถบด้านบน, เนื้อหาหน้าจอ, เมนูด้านข้างและปุ่มลอย ไม่เหมือนกับ Container ที่กำหนดขนาดและสไตล์เท่านั้น Scaffold จัดการทั้งหน้าจอเป็นระบบรวม

ทุกแอปพลิเคชัน Flutter ที่สร้างด้วย Material Design เริ่มต้นด้วย MaterialApp ซึ่งภายในแต่ละหน้าจอจะถูกห่อหุ้มใน Scaffold Scaffold เป็นตัวที่รับประกันการแสดงผล AppBar ที่ถูกต้องบนทุกอุปกรณ์ โดยคำนึงถึง SafeArea สำหรับ iPhone X ขึ้นไป นอกจากนี้ยังรับผิดชอบลำดับ z: Drawer แสดงเหนือ body และ SnackBar แสดงเหนืออินเทอร์เฟซทั้งหมด แต่ใต้หน้าต่างโต้ตอบ

ตาม เอกสารอ้างอิง API Flutter (2026) Scaffold เป็นข้อกำหนดบังคับสำหรับการทำงานที่ถูกต้องของวิดเจ็ตเช่น SnackBar, BottomSheet และ PersistentBottomSheet หากไม่มี Scaffold คอมโพเนนต์เหล่านี้จะโยนข้อยกเว้นเนื่องจากต้องพึ่งพา InheritedWidget Scaffold.of เพื่อเข้าถึงบริบทของ Scaffold ดังนั้นการวางเนื้อหาใดๆ โดยตรงใน Container แทน Scaffold เป็นข้อผิดพลาดทั่วไปของผู้พัฒนามือใหม่ ซึ่งนำไปสู่การสูญเสียฟังก์ชันการทำงานของ Material

Scaffold ในลำดับชั้นของวิดเจ็ต

ในแอปพลิเคชัน Flutter ทั่วไป Scaffold อยู่ภายใน MaterialApp โดยปกติจะอยู่ภายใต้ WidgetsApp หรือ CupertinoApp ในการพัฒนาข้ามแพลตฟอร์ม MaterialApp สร้าง Navigator และธีม ในขณะที่ Scaffold กำหนดโครงสร้างของหน้าจอปัจจุบัน แต่ละหน้าจอสามารถมี Scaffold ของตัวเองกับ AppBar, Drawer และ BottomNavigationBar ที่ไม่ซ้ำกัน ซึ่งช่วยให้ปรับแต่งอินเทอร์เฟซได้อย่างยืดหยุ่นสำหรับหน้าเฉพาะ

สำหรับการปรับแต่งเชิงลึก Scaffold สามารถรวมกับ NestedScrollView — ซึ่งช่วยให้ใช้เอฟเฟกต์การเลื่อนที่ซับซ้อน เช่น AppBar ที่ยุบได้พร้อมเอฟเฟกต์พารัลแลกซ์ อย่างไรก็ตาม ในกรณีส่วนใหญ่ Scaffold มาตรฐานกับคุณสมบัติของมันก็เพียงพอสำหรับการสร้างหน้าจอที่พร้อมใช้งานจริง

โครงสร้างของ Scaffold: ส่วนสำคัญของเฟรมเวิร์ก

Scaffold ประกอบด้วยโซนบังคับและไม่บังคับหลายโซน แต่ละโซนรับผิดชอบส่วนเฉพาะของอินเทอร์เฟซ มาดูแต่ละส่วนทีละส่วนเพื่อเข้าใจว่าพวกมันมีปฏิสัมพันธ์กันอย่างไร

AppBar — แถบด้านบน

AppBar คือแถบด้านบนของหน้าจอที่แสดงชื่อ ปุ่มนำทางและการกระทำ มันได้รับความสูงที่ถูกต้อง 56dp โดยอัตโนมัติและคำนึงถึง SafeArea สำหรับอุปกรณ์ที่มีรอยบาก TabBar สามารถฝังใน AppBar เพื่อสลับแท็บโดยใช้คุณสมบัติ bottom

Drawer — เมนูด้านข้าง

Drawer คือแผงที่เลื่อนออกมาจากด้านซ้ายและให้การนำทางผ่านส่วนต่างๆ ของแอปพลิเคชัน Scaffold จะเพิ่มไอคอนแฮมเบอร์เกอร์ใน AppBar โดยอัตโนมัติหากตั้งค่าคุณสมบัติ drawer Drawer สามารถประกอบด้วย DrawerHeader, ListView พร้อมรายการเมนูและข้อมูลผู้ใช้

BottomNavigationBar — การนำทางด้านล่าง

BottomNavigationBar คือแผงที่ด้านล่างของหน้าจอสำหรับสลับระหว่างส่วนหลัก ประกอบด้วยไอคอน 2 ถึง 5 ไอคอนพร้อมป้ายกำกับและรองรับ Material 3 พร้อมการแสดงสถานะที่ใช้งานผ่าน NavigationBar Scaffold วางไว้ที่ด้านล่างของหน้าจอ เลื่อน body ขึ้นโดยอัตโนมัติเพื่อไม่ให้เนื้อหาถูกบดบัง

FloatingActionButton — ปุ่มการกระทำแบบลอย

FloatingActionButton คือปุ่มกลมที่วางไว้ที่มุมล่างขวาของหน้าจอ ใช้สำหรับการกระทำหลักบนหน้าจอ เช่น การเพิ่มรายการใหม่หรือส่งข้อความ Scaffold รองรับ FAB หลายตัวพร้อมแอนิเมชันแบบขยายผ่านคุณสมบัติ extended

Body — เนื้อหาหลัก

Body คือพื้นที่กลางของหน้าจอที่วางเนื้อหาหลัก วิดเจ็ตใดๆ สามารถทำหน้าที่เป็น body: Column, ListView, GridView, Stack หรือการประกอบแบบกำหนดเอง Scaffold คำนวณความสูงของ body โดยอัตโนมัติโดยคำนึงถึง AppBar, BottomNavigationBar และ SafeArea ซึ่งช่วยลดความจำเป็นในการปรับขนาดด้วยตนเอง

คุณสมบัติหลักของ Scaffold

Scaffold มีคุณสมบัติมากกว่า 30 รายการสำหรับปรับแต่งลักษณะและการทำงานของหน้าจอ รวมถึงทั้งคุณสมบัติบังคับ (body) และไม่บังคับที่ควบคุมระยะขอบ พื้นหลังและสถานะแป้นพิมพ์ การเข้าใจแต่ละคุณสมบัติช่วยกำหนดค่าอินเทอร์เฟซได้อย่างแม่นยำตามข้อกำหนดการออกแบบ

คุณสมบัติ resizeToAvoidBottomInset สำคัญโดยเฉพาะเมื่อทำงานกับฟอร์ม: เมื่อตั้งค่าเป็น true (ค่าเริ่มต้น) Scaffold จะหด body โดยอัตโนมัติเมื่อแป้นพิมพ์ปรากฏ เพื่อให้ช่องป้อนข้อมูลมองเห็นได้ ซึ่งช่วยลดความจำเป็นในการเขียนตัวฟังแป้นพิมพ์แบบกำหนดเอง สำหรับสถานการณ์แบบกำหนดเองกับ SingleChildScrollView สามารถปิดใช้งานคุณสมบัตินี้ได้

ตัวอย่างการใช้ Scaffold ในแอปพลิเคชัน

มาดูตัวอย่างการใช้งานจริงของ Scaffold พร้อมชุดคอมโพเนนต์ Material ที่สมบูรณ์ โค้ดสร้างหน้าจอด้วย AppBar, Drawer, BottomNavigationBar, FloatingActionButton และ SnackBar — โครงสร้างแอปพลิเคชันมือถือทั่วไปใน Flutter

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('แอปของฉัน'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('เมนู')),
            ListTile(title: const Text('การตั้งค่า'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('ดำเนินการเสร็จสิ้น')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

ตัวอย่างใช้ NavigationBar จาก Material 3 แทน BottomNavigationBar ที่เลิกใช้แล้ว Scaffold เชื่อมโยงทุกส่วนโดยอัตโนมัติ: เมื่อเปิด Drawer SnackBar จะซ่อน; เมื่อสลับแท็บ body จะอัปเดต; และ FloatingActionButton ยังคงอยู่ที่เดิม ScaffoldMessenger รับประกันการแสดง SnackBar แม้จะมี Scaffold หลายตัวในลำดับชั้น

Scaffold และ Material 3: คุณสมบัติการกำหนดค่า

Material 3 (M3) คือวิวัฒนาการของ Material Design ที่ Google นำเสนอในปี 2023 Scaffold ใน M3 ได้รับการเปลี่ยนแปลงหลายอย่าง: วิดเจ็ต NavigationBar ใหม่แทน BottomNavigationBar, การรองรับสีแบบไดนามิกผ่าน ColorScheme.fromSeed และคำแนะนำที่อัปเดตสำหรับระยะขอบและความสูงของคอมโพเนนต์ การเปลี่ยนไปใช้ M3 ไม่ต้องการการเปลี่ยน Scaffold — เพียงแค่อัปเดตธีมของแอปพลิเคชัน

เพื่อเปิดใช้งาน Material 3 ในโปรเจกต์ จำเป็นต้องตั้งค่า useMaterial3: true ใน ThemeData Scaffold จะปรับสไตล์ภาพโดยอัตโนมัติ: ระยะขอบใหญ่ขึ้น (24dp แทน 16dp), สีถูกคำนวณใหม่จากสีเริ่มต้น และ FloatingActionButton ได้ขนาดใหญ่ขึ้นพร้อมมุมโค้ง ในขณะเดียวกัน คุณสมบัติ Scaffold ที่มีอยู่ทั้งหมดยังคงทำงานได้

ตาม ข้อกำหนด Material Design 3 (2026) แนะนำให้ใช้ NavigationBar กับสามถึงห้ารายการแทน BottomNavigationBar Scaffold รองรับทั้งสองตัวเลือก แต่ NavigationBar ให้การรองรับที่ดีกว่าสำหรับการปรับเปลี่ยนและ Material You บนอุปกรณ์ Pixel

การกำหนดค่า Scaffold สำหรับ Material 3

สำหรับการทำงานที่ถูกต้องของ Scaffold กับ M3 เพียงแค่อัปเดตธีมและแทนที่ BottomNavigationBar ด้วย NavigationBar สีจะถูกคำนวณโดยอัตโนมัติผ่าน ColorScheme.fromSeed และ Scaffold จะปรับระยะขอบตามมาตรฐานใหม่ หากจำเป็น สามารถแทนที่ backgroundColor ได้โดยตรง