flutter 기본 학습 - Scaffold

이번 주말에는 플러터 공부에 집중하고 있는데, 코드 따라쓰기만 하기보다 이제 개념을 하나씩 잡아가면 좋을 것 같다는 생각이 들었다.

 

초보자도 프로처럼 만드는 플러터 앱 개발(링크) 2주차에서 업로드 화면을 보고 있는데, 새로운 화면을 쌓아올리는 내비게이션 방식은 동일하지만 Scaffold가 아닌 위 여백이 100.0 픽셀인 Container를 쌓아 올리므로 기존 화면의 전부가 아닌 일부만 가려진다는 설명이 나왔다.

 

Scaffold가 아직 뭔지 몰라서 api 문서를 살펴보니 기본적인 머티리얼 디자인 구조를 만들어 준다고 한다.

 

Scaffold class - material library - Dart API

 

사전을 찾아보니 철제 구조물인 '비계'라는 뜻이 있다.

 

철제로 구조물 뼈대를 만드는 작업을 scaffolding이라고 한다

 

위젯 내에 appBar, body, bottomNavigationBar 파라미터를 넣어 3등분 할 수 있고, FloatingActionButton, Drawer 등도 추가할 수 있는 듯 하다.

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 사용시 Navigator.of(context).push() 메서드를 사용하면 뒤로가기 버튼을 알아서 구현해준다고 한다!