<Flutter> Scaffold란?

(본 포스트는 필자가 공부를 목적으로 진행한 것입니다. 혹시 틀리거나 알려주고 싶으신게 있다면 댓글을 남겨주세요!)

 

아마 앞으로 제가 자주 사용하는 widget에 대해서 포스팅을 할 계획에 있어요.

나중에 따로 포스팅하겠지만 flutter 는 widget이라는 개념을 많이 사용한다고 들었어요.

쉽게 생각해서 widget == 어떠한 기능 및 멤버를 가진 class 라고 생각하면 될 거 같아요!

 

그럼 이제 Scaffold라는 개념에 대해서 공식문서를 중심으로 살펴보도록 할게요!

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

Scaffold class - material library - Dart API

모든 내용은 위 주소에 있는 공식문서에 있답니다!

---

들어가시기에 앞서 Scaffold 란 무엇일까요?

사전에서 정의하는 Scaffold는 발판. 이라는 뜻이예요!

이미지를 찾아보면

출처 : 네이버

이런 저런 이미지가 나오는데 위 이미지가 발판이라는 걸 표현하기 가장 적합한 거 같아서 가져왔어요!

그럼 이제 Flutter 공식문서에서 말하는 Scaffold에 대해서 살펴보도록 하죠!

 

---

 

맨 처음 들어가시면

떡하니 Scaffold class라고 되어있네요!

자세히는 모르겠지만 Scaffold는 class 이고 그 안에 여러가지 속성이나 메서드 같은 것들이 있다고 유추할 수 있을 거 같습니다!

 

Implements the basic Material Design visual layout structure.

This class provides APIs for showing drawers and bottom sheets.

To display a persistent bottom sheet, obtain the ScaffoldState for the current BuildContext via Scaffold.of and use the ScaffoldState.showBottomSheet function.

라고 하네요???

 

기본 Material Design 으로 시각적인 레이아웃 구조를 구현한다.이 클래스는 드로어라는 것과 하단에 있는 시트를 표시하는 API들을 제공한다지속적인?? 하단 시트를 표시하기 위해서는 Scaffold.of를 통해 현재 BuildContext에 대한 ScaffoldState를 얻어야 하고 ScaffoldState.showBottomSheet 함수를 사용하라고 하네요

 

즉, Scaffold는 우리가 보는 레이아웃의 기본적인 구조를 구현해주고 드로어랑 하단에 시트들을 다룰 수 있도록 API를 제공해 준다는 말 같아요!이해하기 쉽게 공식문서에서 샘플 자료를 올려줬어요

보시는 것처럼 위쪽에 Sample code가 있고 화면 안에 Text가 있고 하단에는 floating button이 있네요!

botton sheets는 저렇게 아래에 무언가를 띄울 수 있도록 도와주는 걸 말하는 거 같아요!

 

다른 예시를 코드랑 같이 볼까요?

import 'package:flutter/material.dart';

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

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

  static const String _title = 'Flutter Code Sample';

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

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

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  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.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(height: 50.0),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}

좀 어지럽네요... 그죠?

Scaffold 부분만 살펴 볼까요?

Scaffold(
      appBar: AppBar(
        title: const Text('Sample Code'),
      ),
      body: Center(
        child: Text('You have pressed the button $_count times.'),
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Container(height: 50.0),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _count++;
        }),
        tooltip: 'Increment Counter',
        child: const Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

Scaffold 아래에 있는 모든 요소들은 Scaffold가 가진 속성으로 각각 고유한 특성을 가지고 있다고 판단됩니다!

appBar : 상단에 있는 Sample Code로 확인이 가능하네요!

body, bottomNavigationBar, floatingActionButton, tooltip, floatingActionButtonLocation 이 있어요! 각 속성은 너무나 직관적이어서 따로 설명하지 않아도 매치가 되네요! 그죠?

 

onPressed: () => setState(() {
          _count++;  }), 이쪽 부분도 직관적이어서 설명은 따로 하지 않을게요!

 

 

 

흠... 잠시만요... 열심히 읽고 이해해보려고 노력하고 있어요.

먼저 Scaffold layout의 기본적인 사항으로 scaffold는 이용가능한 공간을 다 채울거라고 하네요. 이게 무슨 뜻이면 우리가 Scaffold를 쓰면 우리가 사용하는 widow나 device 화면의 전체를 차지한다는 뜻이예요! 근데 사용자가 device의 키보드를 나타나게 하면 Scaffold보다 상위에 있는 위젯에 MediaQuery에 있는 MediaQueryData.viewInsets 라는 녀석이 변화를 시키고 Scaffold도 다시 지어진다고 하네요! 그래서 기본적으로 Scaffold의 body는 키보드를 위한 공간을 만들기 위해서 재조정된답니다! 만약에 scaffold가 resize 되는걸 막고 싶다면 resizeToAvoidBottomInset를 false로 설정하면 된다고 하네요.

그리고 재조정하든 말든 scaffold가 scroll 가능한 container에 있다면 스크롤될거랍니다.

 

두번째 문단 같은 경우 무슨 말인지 이해가 안가네요... ㅠㅠ 아이폰 X에 보이지 않는 부분인 notch를 다루는 내용 같은데...

음... 일단 패스하도록 할게요...

 

Troubleshooting? 문제해결/ 시스템에서 발생하는 복잡한 문제들을 종합적으로 진단해 처리한다라고 하네요.

 

자 Scaffold는 MaterialApp에 대해서 가장 높은 수준의 container라고 하네요! 그래서 우리가 Material app에서 각 route에 Scaffold를 추가하면 Material의 기본적인 레이아웃 구조를 볼 수 있을 거라고 하네요! 여기서 왜 scaffold라고 명명했는지 알 수 있을 거 같아요! app의 시각적인 기본적인 구조를 지원해주기 때문에! Scaffold라고 한 거 아닐까요? 그래서 딱히 Scaffold를 감쌀 필요가 없다고해요.

그래서 tabbed된 UI, 터치된 UI를 말하는거겠죠..? 암튼 이 UI에서는 bottomNavigationBar가 TabBar이고 body가 TabBarView인데 여기서 각 bar view를 다른 이름으로된 AppBar로 만들고 싶은 유혹을 받을수도 있답니다. 그런데 그거 보다는 TabController에 listner를 추가해서 AppBar를 업데이트하는게 더 나을거라네요?

이게 무슨 말이지...? 예시를 살펴볼까요?

이 controller를 추가하는 이유는 AppBar에 있는 제목이 탭 될때마다 reset(변경되는거) 되게 하기 위해서라고 하네요?

 

아래는 nest scaffold를 사용하는 경우도 있지만 사용하지 않는게 최고라고 하네요!

아무튼 Scaffold를 다른 녀석으로 감싸는 건 하지 않는게 좋을거 같네요!

*참고로 Scaffold에 어떤 기능을 추가할때 Scaffold 자체를 감싸는게 아니라 Scaffold 안에 있는 body를 감싸서 사용하는 거 같요!

 

 body: SingleChildScrollView()

요런식으로요!

 

그리고 나머지 내용은 Scaffold라는 클래스 안에 있는 다양한 속성 및 생성자에 관한 내용이예요!

관심 있으시다면 읽어 보시는 걸 추천할게요!

 

오늘은 Scaffold라는 flutter에서 제공하는 Material app basic layout structure에 대해서 알아봤어요!

다양한 기능들을 제공하고 앱의 가장 기본적인 틀을 두고 개발하시고 싶은 분들이 사용하면 좋을거 같아요!

 

p.s.저는 Scaffold를 많이 사용하고 있어요!

나중에 앱 개발이 어느 정도의 수준을 넘어서면 관련 포스팅도 하고 싶네요!