Scaffold 위젯에 대하여

플러터에서는 모든 요소를 위젯이라는 단위로 관리하게 되는데요, 대부분의 위젯은 Column, Text 등 이름만으로도 역할을 추측하기 쉬운 편입니다.

 

그런데 정말 많이 사용되는 Scaffold 라는 위젯은 무슨 역할을 하는 걸까요?

예전에는 (건축 공사장의) 라는 설명이 없어, '삼겹살의 그 비계인가..?' 하고 생각했던 적도 있었습니다.

사전을 찾아보니 교수대, 처형대 등 살벌한 뜻을 갖고 있는데요, 정말 무서운 위젯이네요!

 

물론 그런 뜻은 아닐테고 스캐폴드는 비계, 즉 "뼈대" 를 의미하는 위젯입니다.
오늘은 스캐폴드 위젯이 무엇인지, 그리고 어떻게 사용할 수 있는지 알아보도록 하겠습니다.

Scaffold 위젯

좌 : 공식 예제의 스캐폴드 요소 배치 예시 / 우 : 스캐폴드로 배치할 수 있는 위젯의 역할 목록

스캐폴드 위젯은 뼈대라는 의미처럼 UI를 구성하는 *주요 요소를 간편하게 배치할 수 있게 해주는 위젯입니다.

⚙️ UI를 구성하는 주요 요소에는 상단의 appBar, 중앙의 Body, 하단의 Navigation bar, 측면의 drawer 등이 있습니다.

한번 스캐폴드 위젯의 도움을 받아 간단한 UI를 구성해 보겠습니다.

import 'package:flutter/material.dart';
  // ...
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      
      // app Bar 영역
      appBar: AppBar(title: const Text('스캐폴드 데모')),
      
      // 하단 네비게이션 바 영역
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(height: 50.0),
      ),
      
      // 측면 drawer 영역
      drawer: Drawer(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('Drawer 영역'),
              ElevatedButton(
                onPressed: _closeDrawer,
                child: const Text('Drawer 닫기'),
              ),
            ],
          ),
        ),
      ),
      drawerEnableOpenDragGesture: false,
    );
  }

스캐폴드 위젯 덕분에 빠르게 기본적인 UI 구성을 마친 모습입니다!

정리

• 스캐폴드 위젯은 UI의 뼈대를 잡아주는 역할을 하는 위젯이다.
• 스캐폴드로는 상단 어플리케이션 바, 하단 네비게이션, 측면 드로어 등의 요소를 간단히 배치할 수 있다.