플러터 시작하기 01 : Scaffold

Scaffold는 플러터에서 사용되는 가장 기본적인 디자인 레이아웃입니다. 앱의 뼈대라고도 할 수 있죠. 이번 포스트에서는 Scaffold에서 주로 사용되는 속성(property) 몇 가지를 소개해 드리려고 합니다. Appbar, Body, BottomNavigationBar, 그리고 FloatingActionButton입니다.

---

---

Body 속성

import 'package:flutter/material.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Hello World!'),
        ),
      ),
    );
  }
}

먼저 플러터 프로젝트를 하나 생성하고 화면을 출력하기 위한 최소한의 요소만 추가해 보겠습니다. Scaffold가 가진 여러 속성 중 body는 필수 값입니다. 본문에 들어갈 다양한 위젯들을 처리하는 부분이죠. 화면에서 가장 많은 영역을 차지하는 필드이기도 합니다. 우선은 간단하게 텍스트를 출력해 보도록 하겠습니다. 중앙 정렬을 위해 Center 위젯의 자식으로 Text 위젯을 추가해 주겠습니다.

중앙에 Hello World! 문구가 잘 출력되네요. 하지만 너무 휑하죠. 나머지 속성도 하나씩 추가해 보며 앱을 꾸며 보도록 하겠습니다.

Appbar 속성

Scaffold(
    // App bar
    appBar: AppBar(
        title: const Text('Scaffold Example'),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
    ),

    // Body
    body: const Center(
        child: Text('Hello World!'),
    ),
)

Appbar는 앱의 상단 바를 꾸며주는 속성입니다. 보통 제목이나 뒤로 가기 등의 버튼들이 위치하는 부분이죠. Appbar 속성에는 AppBar 위젯을 입력으로 주어야 합니다. 위 코드처럼 제목 텍스트와 색을 지정해 봅시다. Title 속성에는 제목을 입력해 주면 되는데요, 꼭 텍스트가 아니라 아이콘 등으로 꾸밀 수도 있습니다. BackgroundColor는 배경 색을, foregroundColor는 앱바에 추가되는 요소들의 색상, 즉 텍스트나 아이콘 등의 색상을 지정합니다.

BottomNavigationBar 속성

Scaffold(
    body: ...

    // Navigation bar
    bottomNavigationBar: BottomNavigationBar(
        items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'home'),
            BottomNavigationBarItem(icon: Icon(Icons.account_circle), label: 'account'),
            BottomNavigationBarItem(icon: Icon(Icons.menu), label: 'menu'),
        ],
    ),
)

BottomNavigatioBar는 앱의 하단을 꾸며주는 속성입니다. 상황에 따라서 BottomNavigationBar 위젯 또는 BottomAppBar 위젯을 사용하는데요, 보통 탭 메뉴를 추가할 때는 BottomNavigationBar을, 푸터처럼 자유롭게 꾸밀 때는 BottomAppBar을 사용합니다. 위 예제 코드에서는 탭 메뉴를 추가해 보도록 하겠습니다.

FloatingActionButton 속성

Scaffold(
    body: ...

    // Action button
    floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: const Icon(Icons.add),
    ),
)

FloatingActionButton은 화면에 버튼을 배치하는 속성입니다. 추가적인 메뉴 등을 수행하는 버튼으로 많이 사용하죠. 위치, 애니메이션 등 다양한 속성도 설정이 가능합니다. 이번 포스트는 scaffold에 대한 내용이기 때문에 세부적인 내용들은 다른 포스트에서 다루고 이번에는 간단하게 버튼만 추가해 보도록 하겠습니다. FloatingActionButton 위젯을 입력으로 주어 간단하게 버튼을 생성할 수 있습니다. 자식 값으로 아이콘을 하나 추가해서 버튼을 꾸며보도록 하겠습니다.

우리가 사용하는 대부분의 앱들은 scaffold와 유사한 레이아웃을 가지고 있습니다. 저도 지금까지 개발을 하면서 scaffold를 사용하지 않은 적이 없는 것 같네요. 이번 포스트에서는 scaffold에서 주로 사용되는 네 가지 속성들을 소개해 드렸습니다. 이 네 가지 외에도 더 많은 속성들이 있는데요, 다른 포스트에서 심화 내용을 다뤄보도록 하겠습니다.

---