[Flutter] Scaffold란?

컴포즈에서 앱 바, 바텀 앱 바, fab가 포함된 화면을 만들 때 Scaffold를 사용한다. 이걸 쓰면 표준화된 레이아웃을 큰 공수 없이 만들 수 있게 되어 개발 프로세스가 간소화된다는 장점이 있다.

플러터에도 사용법은 다르지만 이와 동일한 Scaffold 위젯이 있다. 이름도 동일해서 컴포즈에서 사용한 적이 있다면 플러터에서 사용하는 것도 그렇게 어렵지 않아 보인다.

아래는 Scaffold를 설명하는 플러터 공식문서다.

 

https://api.flutter.dev/flutter/material/Scaffold-class.html

Scaffold class - material library - Dart API

이 클래스는 drawer, 바텀 시트를 표시하기 위한 API를 제공한다. 영구(persistent) 바텀 시트를 표시하려면 Scaffold.of를 통해 현재 BuildContext의 ScaffoldState를 가져와서 ScaffoldState.showBottomSheet()를 사용한다
아래 예시는 body, FAB가 있는 Scaffold를 보여준다. body는 Scaffold 안에서 Text를 중앙 배치하기 위해 Center에 배치된 Text다. FAB는 카운터 증가에 연결된다...(중략)

import 'package:flutter/material.dart';

/// Flutter code sample for [Scaffold].

void main() => runApp(const ScaffoldExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ScaffoldExample(),
    );
  }
}

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

  @override
  State<ScaffoldExample> createState() => _ScaffoldExampleState();
}

class _ScaffoldExampleState extends State<ScaffoldExample> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(child: Text('You have pressed the button $_count times.')),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() => _count++),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
    );
  }
}

 

 

< Scaffold 레이아웃, 키보드, 노치 디스플레이 >

Scaffold가 확장되어 사용 가능한 공간을 채운다. 이는 일반적으로 window 또는 디바이스 화면 전체를 차지한다는 의미다. 디바이스 키보드가 표시되면 Scaffold의 조상인 MediaQuery 위젯의 MediaQueryData.viewInsets가 바뀌고 Scaffold가 재빌드된다. 기본적으로 Scaffold의 body는 키보드 공간을 확보하기 위해 크기가 조정된다. 크기 조정을 방지하려면 resizeToAvoidBottomInsert을 false로 설정하라. 두 경우 모두 초점이 맞춰진 위젯이 스크롤 가능한 Container 안에 있으면 스크롤되어 표시된다
MediaQueryData.padding 값은 아이폰 X의 노치와 같이 완전히 안 보일 수 있는 영역을 정의한다. 앱 바 또는 하단 네비게이션 바는 일반적으로 body에 이 패딩값을 넣지 않지만 Scaffold의 body는 패딩을 피하도록 한다. SafeArea 위젯을 Scaffold body 안에서 써서 노치 영역을 피할 수 있다

< 드래그, 스크롤 모두 가능한 바텀 시트가 있는 FAB >

Scaffold.bottomSheet가 드래그, 스크롤 모두 가능하고 Scaffold.floatingActionButton이 설정돼 있으며 바텀 시트가 Scaffold 높이의 70% 이상을 덮도록 드래그하면 2가지가 동시에 발생한다

- Scaffold가 scrim을 표시하기 시작한다
- Scaffold.floatingActionButton은 Curves.easeIn을 써서 애니메이션을 통해 축소되며 바텀 시트가 전체 Scaffold를 덮으면 사라진다

그리고 바텀 시트를 아래로 드래그해서 Scaffold의 70% 미만을 덮으면 scrim이 사라지고 Scaffold.floatingActionButton이 다시 정상 크기로 애니메이션된다...(중략)

사용할 수 있는 프로퍼티들을 보면 본문에 나온 요소들 이외에도 정말 많은 프로퍼티들이 존재한다. 이것들을 적절하게 사용해서 원하는 UI를 만들 수 있다.

공식문서에서 간단한 예시도 제공하기 때문에 어떻게 구성하고 기능 추가는 어떻게 하는지도 볼 수 있다.

아래는 Scaffold를 활용해 만든 예시 화면이다.

 

https://medium.com/@hamidrezadeveloper/mastering-flutters-scaffold-widget-a-comprehensive-guide-to-properties-and-examples-264462db4e10