[Flutter] Scaffold Widget

Scaffold란?

Flutter에서 Scaffold는 Material Design에서 사용되는 앱의 뼈대(Layout)을 제공하는 위젯입니다.

역할

Scaffold는 앱의 기본적인 레이아웃 구조를 정의하고, appbar, toolbar, drawer, tapbar 등과 같은 Material Design 구성요소를 구현합니다.

Scaffold는 일반적으로 MaterialApp위젯 내애서 사용되며, 앱의 뼈대를 제공하고, 많은 Material Design 구성요소를 간단하게 구현할 수 있기 때문에, Flutter앱을 개발할 때 매우 유용한 위젯 중 하나입니다.

Scaffold 위젯은 body속성을 통해 앱의 기본 컨텐츠를 정의하며, appBar속성을 통해 상단의 앱 바를 정의할 수 있습니다.

또한, drawer속성을 사용하여 측면 드로어를 추가하거나 bottomNavigationBar속성을 사용하여 하단의 탭바를 추가할 수도 있습니다.

parameter

Scaffold의 parameter는 다양하지만, 우리는 가장 범용적으로 사용하는 기능에 대해 다룰 것입니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


class Scaffold extends StatefulWidget {
  const Scaffold({
    super.key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.persistentFooterAlignment = AlignmentDirectional.centerEnd,
    this.drawer,
    this.onDrawerChanged,
    this.endDrawer,
    this.onEndDrawerChanged,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomInset,
    this.primary = true,
    this.drawerDragStartBehavior = DragStartBehavior.start,
    this.extendBody = false,
    this.extendBodyBehindAppBar = false,
    this.drawerScrimColor,
    this.drawerEdgeDragWidth,
    this.drawerEnableOpenDragGesture = true,
    this.endDrawerEnableOpenDragGesture = true,
    this.restorationId,
  })

Appbar

Application 최상단에 위치하고 있는 bar를 말합니다. 아래와 같이 Scaffold생성자에 AppBar를 전달하면 생성할 수 있습니다.

자세한 내용은 Appbar Class를 확인하세요

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'), //타이틀 제목
        centerTitle: true, //타이틀 가운데 정렬 (true/false)
      ),
    );
  }
}

backgroundColor / foregroundColor

상단바의 배경색(backgroundColor) / 타이틀색(foregroundColor)를 지정할 때

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
        backgroundColor: Colors.green, //상단바 배경색
        foregroundColor: Colors.black, //상단바 타이틀색
      ),
    );
  }
}

elevation / shadowColor

상단바에 그림자효과를 줄 때

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
        elevation: 10, //상단바 Shadow 깊이
        shadowColor: Colors.red, //상단바 Shadow 색
      ),
    );
  }
}

leading / actions

상단바에 앞(leading)/뒤(actions)에 아이콘과 같은 위젯들을 추가하고 버튼 아이콘으로 onPressed도 실행할 수 있음

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
        leading: const Icon(Icons.ac_unit), //상단바 타이틀 앞에 위젯추가
        actions: [
          //상단바 타이틀 뒤에 위젯추가
          IconButton(
            icon: const Icon(Icons.photo_album),
            tooltip: 'Hi!',
            onPressed: () => {},
          ),
          IconButton(
            icon: const Icon(Icons.pie_chart),
            tooltip: 'Wow',
            onPressed: () => {},
          )
        ],
        automaticallyImplyLeading: true, //뒤로가기 버튼 true(존재O)/false(존재X)
        centerTitle: true, //타이틀 가운데 정렬
      ),
    );
  }
}

Body

Appbar의 중간영역이며, body는 하나의 Widget만 가질 수 있으며 메인 화면에 보여질 내용을 주로 작성합니다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
      ),
      body: Center(
        child: Column(
          children: const [
            Text('1'),
            Text('2'),
            Text('3'),
            Text('4'),
            Text('5'),
            Text('6'),
          ],
        ),
      ),
    );
  }
}

앱 하단에 다른 뷰를 볼 수 있도록 메뉴바를 표시해주는 위젯입니다. 보통 페이지 별 바로가기 작업을 제공하기위해 만들어집니다.

자세한 내용은 BottonNavigationBar Class를 확인하세요

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.text_snippet),
            label: '나의 판매글',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '홈',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.people),
            label: '마이페이지',
          ),
        ],
        selectedItemColor: Colors.lightGreen,
      ),
    );
  }
}

Floating Action Button

화면에 Fixed되는 원형 아이콘 버튼이며 일반적으로 화면 맨 하단 오른쪽에 위치하게 됩니다. Android 개발자들은 줄여서 FAB라고 부른다고 합니다. Icon뿐만아니라 Text로도 위젯을 사용할 수 있습니다.

자세한 내용은 FloationActionButton Class를 확인하세요

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HomeScreen'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        label: const Text('Approve'),
        icon: const Icon(Icons.thumb_up),
        backgroundColor: Colors.pink,
        onPressed: () => {print('hello')},
      ),
    );
  }
}