[1] Scaffold 가 뭐야?

앱의 시작.
플러터앱의 프로젝트 구조를 잡고 스플레쉬 이미지를 만들어보려고 하자마자 궁금한 클래스가 생겨 이렇게 정리해봅니다. :)

Scaffold란?

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 의 시각적 레이아웃 구조를 시행하는 녀석입니다. 간단히 이야기해서 앱 화면을 구성하는 뼈대라고 생각하시면 됩니다. 
Material Design은 구글에서 자주 사용하는 디자인 컨셉들.. 아이콘이라던지, 플로팅 바같은 디자인들을 말하는데 궁금하신 분들은 링크 참고해보세요!

 

왼쪽의 이미지 예시는 Appbar, FloatingActionButton(+)과 Body로 구성된 스캐폴드입니다.

Scaffold를 생성할 때, 생성자 parameter에 Widget들을 넘겨줌으로 기능을 추가할 수 있습니다. 

아래 예시 코드를 보시면, Scaffold에 appBar, body, floatingActionButton을 넘기고 있죠.
상세 속성(ex. backgroundColor)은 title과 같이 설정하실 수 있습니다.

-  body 는 하나의 Widget만 가질 수 있습니다. 

-  FAB(Floating Action Button)은 항상 표시되는 원형 아이콘 버튼이며, 일반적으로 화면 오른쪽 하단에 위치합니다. 
floatingActionButtonLocation 을 설정함으로 위치를 커스텀하게 조절하실 수 있습니다.

 

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),
    ),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  );
}

 

Material App 위젯은 앱으로서 기능을 할 수 있도록 도와주는 뼈대, Scaffold는 구성된 앱에서 디자인적인 뼈대라고 이해하시면 될 것 같습니다.