겨울잠

앱을 만들다 보면 화면에 여러 위젯을 정렬해서 배치하는 일이 정말 많습니다.
Flutter에서는 이 작업을 Column과 Row라는 레이아웃 위젯으로 간단하게 처리할 수 있습니다.
이 글에서는 Column과 Row의 기본 사용법부터, 자주 사용하는 속성까지 단계별로 소개합니다.

##Column과 Row란? 

Column은 위젯을 세로 방향으로 쌓아 올리는 레이아웃,
Row는 가로 방향으로 나란히 배치하는 레이아웃입니다.
이 둘만 이해해도 화면 구성이 훨씬 쉬워집니다.

##Column이란?

Column은 자식 위젯들을 세로 방향으로 쌓아올리는 레이아웃입니다.
아래 예제처럼 여러 개의 텍스트를 위에서 아래로 순서대로 배치할 수 있습니다.

###Column 예시

return Scaffold(
    appBar: AppBar(
    	title: Text('Title'),
    ),
    body: Column(
        children: [
            Text('첫 번째'),
            Text('두 번째'),
            Text('세 번째'),
        ],
    ),
)

세로로 Text가 한블럭씩 순서대로 나열

Column 을 chilren 칸만큼 나눠씀

chilren 영역 안에 Text

##Row란?

Row는 자식 위젯들을 가로 방향으로 나란히 배치하는 레이아웃입니다.
Column과 비슷한 방식으로 사용하며, 주로 버튼이나 아이콘을 한 줄에 배치할 때 활용됩니다.

###Row 예시

body에 바로 row가 안됨으로
column안에 row를 만들겠습니다

body: Column(
    children: [
      Row(
        children: [
          Text('첫 번째'),
          Text('두 번째'),
          Text('세 번째'),
        ],
      ),
      Text('두 번째'),
      Text('세 번째'),
    ],
),

가로로 Text가 좌측부터 우측으로 순서대로 나열

Row

 을 chilren 칸만큼 나눠씀

chilren 영역 안에 Text

##MainAxisAlignment와 CrossAxisAlignment

Column과 Row에는 자식 위젯의 정렬 방식을 지정하는 속성이 있습니다.

• mainAxisAlignment: 주 축 방향(세로 또는 가로) 정렬
• crossAxisAlignment: 교차 축 방향 정렬

###Row의 MainAxisAlignment 사용예

아래 예제는 Row의 MainAxisAlignment를 spaceAround로 설정해 자식 위젯을 균등하게 배치하는 방법입니다.

body: Column(
    children: [
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Text('첫 번째'),
          Text('두 번째'),
          Text('세 번째'),
        ],
      ),
      Text('두 번째'),
      Text('세 번째'),
	],
),

이전 row와 비교하면 mainAxisAlignment: MainAxisAlignment.spaceAround을 추가함으로써 공간이 균등하게 배분됬음을 확인할 수 있다.

  MainAxisAlmainAxisAlignment: MainAxisAlignm

##자주 하는 실수와 참고사항

• column과 row는 반드시 children 속성을 사용해야하고 리스트 형태로 작성해야 합니다.
• Row에 위젯이 너무 많으면 화면을 넘길 수 있으니 Expanded나 Flexible을 함께 사용하는 것이 좋습니다.

이 처럼 Column과 Row를 사용하면 Flutter 앱 화면의 기본 레이아웃을 간단하게 구성할 수 있습니다.

웹퍼블리셔로 일하면서 웹 기반 UI에는 익숙했지만, 앱 개발은 좀 처음하였습니다.
지인들과 사이드 프로젝트 이야기를 하다가, "이제 앱도 하나쯤 만들어봐야 하지 않을까?" 싶어 도전하게 된 게 바로 Flutter였습니다.

Flutter는 구글에서 만든 UI 프레임워크로, 안드로이드와 iOS를 하나의 코드로 동시에 개발할 수 있다는 점이 가장 큰 매력이 있습니다. 그중에서도 앱의 기본 골격이 되는 게 바로 Scaffold 위젯입니다,

Flutter 개발에 이 Scaffold를 중심으로 간단한 앱 뼈대를 만들어보는 실전형 튜토리얼을 정리해봤어요.

#Scaffold란?

간단히 말해서, Scaffold는 앱의 틀을 잡아주는 Flutter widget입니다.
AppBar, body, bottomNavigationBar, floatingActionButton, drawer 등 앱을 구성하는 주요 UI 요소들을 한자리에 담을 수 있는 위젯 입니다.

##플러터 앱 구조 기본 예제

Scaffold(
  appBar: AppBar(
    title: Text('title'),
  ),
  body: Center(
    child: Text('contents'),
  ),
);

위 코드처럼 Scaffold 안에 앱바(AppBar)와 바디(body)만 넣어도 화면의 기본 구조가 만들어 집니다.

사실... 앱 레이아웃 구조가 다 거기서 거기임...

뭐 여튼 UI가 코드로 직관적으로 구성되어 쉽게 접근 가능합니다.

### appBar에 색상 입혀보기 (방법1)

import 'package:flutter/material.dart';

색상 코드를 작성하기 전 meterial을 가져다 쓰겠습니다.

flutter 초기 진입시 가장 많이 쓰는 기본 테마이도 하며 입문하기에 적당합니다.

import 안하면 아래 코드 못 씁니다.

Scaffold(
  appBar: AppBar(
    title: Text('title'),
    backgroundColor: Colors.grey[200],
  ),
  body: Center(
    child: Text('contents'),
  ),
);

backgroundColor: Color.grey[200]

Color.grey[200] 은 #eeeeee 컬러 값을 가지고 있습니다.

grey[100], red[50], blue[300] 이렇게 여러 값이 있으나 해당 코드만으로 색상을 확인하긴 어렵죠

###아래 코드표 가이드 라인 입니다.###

### appBar에 색상 입혀보기 (방법2)

원하는 색상으로 교체해서 쓰시면 되고 만약 원하는 색상 값이 없다.

머티리얼 위젯 더미 파일을 쓰지 않고 직접 색상 코드값을 사용하여 정의할수도 있습니다.

return Scaffold(
      appBar: AppBar(
        title: Text('Title'),
        backgroundColor: Color(0xFFA8E6CF),  // 0xff(사용할 색상값)
      ),
  )

backgroundColor: Color(0xFFA8E6CF) 지정 Color코드를 쓰기위해서는  0xFF를 앞에 필수적으로 입력후 A8E6CF(원하시는 코드 색상)를 추가로 입력해서 다음 처럼 만들어 주셔야합니다.

###결과 화면

이렇게 커스텀 색상을 추가하실 수 있습니다.

간단한 예제도 만들어봤으니

모바일 앱에 주로 나오는 구성요소의 예제를 만들어봅시다.

##flutter widget 속성으로 레이아웃 완성하기

return Scaffold(
  appBar: AppBar(
    title: Text('Scaffold 실습'),
    automaticallyImplyLeading: ture, // 기본값
  ),
  body: Center(child: Text('메인 영역')),
  backgroundColor: Colors.grey[200],

  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
      BottomNavigationBarItem(icon: Icon(Icons.settings), label: '설정'),
    ],
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        Container(
          height: 80, // 높이 줄임 (기본 200)
          color: Colors.blue,
          alignment: Alignment.centerLeft,
          padding: EdgeInsets.symmetric(horizontal: 16),
          child: Text(
            '메뉴',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
        ),
        const ListTile(
          contentPadding: EdgeInsets.symmetric(horizontal: 16),
          title: Text('항목 1'),
        ),
        const ListTile(

          contentPadding: EdgeInsets.symmetric(horizontal: 16),
          title: Text('항목 2'),
        ),
        const ListTile(

          contentPadding: EdgeInsets.symmetric(horizontal: 16),
          title: Text('항목 3'),
        ),
      ],
    ),
  ),

AppBar, body, Drawer, Fab, bottomNavigationBar 사용

웹 퍼블리셔인 내 입장에서 봤을댄 이게 구조가 header, section, aside, nav, footer 같아 보여더군여

결과 화면은 이렇고

왼쪽에 첫화면

오른쪽은 scaffold 실습 옆 햄버거 버튼을 누르면 나오는 메뉴

설명

처음 flutter을 접할때 좀 이해 안되던데 이렇게 해놓으니 이해가 좀 되서 이렇게 작성했습니다.

Flutter를 접하기 시작했다면, Scaffold는 반드시 이해하고 넘어가야 할 핵심 위젯입니다.

앞으로 플러터 위젯들을 하나씩 정리하면서 flutter tutorial 느낌으로 블로그에 남겨볼 예정입니다.

Scaffold 튜토리얼을 써봤는데, 도움이 되셨으면 좋겠네요.

더 많은 위젯 속성을 알고 싶다면 아래 글을에서 확인하실 수 있습니다.

2025.06.18 - [Dev/flutter] - Flutter Scaffold 사용법 총정리 | 주요 속성 & 레이아웃 예제 코드

Flutter에서 레이아웃을 구성할 때 가장 기본이 되는 위젯이 바로 Scaffold입니다.  
이 글에서는 Scaffold의 주요 속성과 함께 전체 구조, 예제 코드, 실제 화면 결과까지 자세히 설명합니다.  
초보자부터 중급자까지 참고하기 좋은 가이드입니다.

import 'package:flutter/material.dart';

flutter 하면서 처음 접하게 되는 머티리얼 디자인으로 만들기

Scaffold 속성 기능

#Scaffold

Scaffold 하위만해도 많네.. 일단은 기본 예제 

기본 예제

Scaffold(
  appBar: AppBar( // 상단 고정 영역
    title: Text('Title'), // 타이틀 내용
    primary: true, // 기본 AppBar 높이 사용
  ),

  body: Center(  //main content 나올 영역
    child: Text('contents'),
  ),

  backgroundColor: Colors.grey[200], // scaffold 영역의 배경색
  floatingActionButton: FloatingActionButton( // 우측 하단에 고정 버튼
    onPressed: () {}, // 클릭했을때 실행
    child: Icon(Icons.add), //아이콘
  ),
  // floatingActionButton 위치 정하기
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  /* centerDocked,centerFloat,centerTop,endContained,endDocked,endFloat,
  endTop,miniCenterDocked,miniCenterFloat,miniCenterTop,miniEndDocked,
  miniEndFloat,miniEndTop,miniStartDocked,miniStartFloat,miniStartTop,
  startDocked,startFloat,startTop */

  // floatingActionButton 애니메이션 효과. 커졌다 작아졌다(scaling)
  floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,

  // 하단 탭 메뉴 (BottomNavigationBar)
  bottomNavigationBar: BottomNavigationBar(
    items: const [ // 하위요소 
      BottomNavigationBarItem( // 왼쪽
        icon: Icon(Icons.home),
        label: '홈',
      ),
      BottomNavigationBarItem( // 오른쪽
        icon: Icon(Icons.settings),
        label: '설정',
      ),
    ],
  ),

  // 하단 고정 영역
  bottomSheet: Container(
    color: Colors.blue[100],
    height: 50,
    child: Center(child: Text('하단 고정 시트')),
  ),

  // 왼쪽에서 나오는 메뉴 Drawer (햄버거 메뉴 등)
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('메뉴'), // 드로어 상단 헤더
        ),
        ListTile(title: Text('항목 1')), // 메뉴 항목 1
      ],
    ),
  ),

  // 오른쪽에서 나오는 드로어 (endDrawer)
  endDrawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(
          child: Text('오른쪽 메뉴'),
        ),
        ListTile(title: Text('항목 A')), // 메뉴 항목 A
      ],
    ),
  ),

  // 드로어가 열릴 때 배경 스크림 색상 (기본은 검은색 반투명)
  drawerScrimColor: Colors.black.withOpacity(0.5),

  // 키보드가 올라올 때 body가 자동으로 위로 올라가며 레이아웃을 재배치할지 여부
  resizeToAvoidBottomInset: true, // true면 키보드 때문에 UI가 밀림

  // body가 bottomNavigationBar 아래까지 확장될지 여부
  extendBody: true,

  // body가 AppBar 뒤쪽까지 확장될지 여부 (AppBar 투명 처리와 함께 사용 가능)
  extendBodyBehindAppBar: false,

  // 하단에 고정된 버튼들 (예: 저장, 취소)
  persistentFooterButtons: [
    ElevatedButton(
      onPressed: () {},
      child: Text('저장'),
    ),
    TextButton(
      onPressed: () {},
      child: Text('취소'),
    ),
  ],

  // 드로어를 드래그로 열 수 있는 영역의 너비 (기본값은 화면 왼쪽 가장자리)
  drawerEdgeDragWidth: 100, // 100픽셀 안쪽에서만 드래그로 drawer 열림

  // 좌측 drawer 드래그로 열기 가능 여부
  drawerEnableOpenDragGesture: true,

  // 우측 drawer 드래그로 열기 가능 여부
  endDrawerEnableOpenDragGesture: true,

  // 상태 복원을 위한 고유 ID (앱 재시작 후 상태 유지 등에 사용)
  restorationId: 'main_scaffold',
);

실행된 화면

웹 퍼블리셔, 웹 프론트엔드 쪽 일만하다.. 

주변 지인들과 이야기를 나눠보았다, 웹 퍼블리셔의 전망..  금액적으로도 기술적으로도 전망이 없어지고 있는 추세고

나이는 먹어가고 먹고살아야 하는데 이데로 있을것 같다면 안됄꺼 라는 생각이 들어. 접해보기로 하였다.

#

next, react, vue 말고 flutter를 선택한 이유

사실 새 언어 배우기가 시간도 많이걸리고 어려워서 하고 싶진 않았다.

반응형 웹으로 모바일도 대체해서 쓰고 싶긴했는데...

• flutter 몇년전에 비하면 상대적으로 많이 보완됨
• 간단하게 widget을 쉽게 ui를 만들어냄 ( 어플들 디자인들이 다 비슷하긴함. 화면이 한정적이라 그런지 )
• next나 react에 비해 스마트폰 기능에 좀 더 쉽게 되어있는듯 하다. 
  • 알람, api 로그인, 캐시, 위젯 등등..