Flutter - Scaffold

Scaffold

• Scaffold는 머티리얼 디자인 앱의 기본 시각적 구조를 제공하는 Flutter의 위젯
• 앱 사용자 인터페이스의 시각적 요소를 구성하는 데 사용되는 컨테이너 위젯
• Scaffold 위젯은 AppBar, BottomNavigationBar, Drawer 및 FloatingActionButton과 같은 다른 위젯이 하위 항목으로 추가되어 앱 사용자 인터페이스의 기본 빌딩 블록으로 자주 사용.

Scaffold 위젯의 주요 역할은 앱의 기본 레이아웃 구조를 제공

• AppBar: Scaffold는 제목, 작업 및 기타 위젯을 화면 상단에 표시하는 데 사용할 수 있는 내장 AppBar 위젯을 제공한다.
• Drawer: Scaffold는 또한 화면 측면에서 슬라이드 아웃되는 탐색 메뉴를 표시하는 데 사용할 수 있는 내장 서랍 위젯을 제공한다.
• BottomNavigationBar: Scaffold에는 화면 하단에 내비게이션 바를 표시하는 데 사용할 수 있는 내장 BottomNavigationBar 위젯이 포함되어 있다.
• FloatingActionButton: Scaffold에는 앱에서 특정 작업을 트리거하는 플로팅 작업 버튼을 표시하는 데 사용할 수 있는 내장 FloatingActionButton 위젯이 포함되어 있다.

생성자 매개변수

앱 바

• appBar : 스캐폴드 상단에 표준 앱 바를 제공하는 위젯. 앱 바에는 일반적으로 제목, 선택적 작업 및 탐색 아이콘이 포함된다.
• primary : 스캐폴드에서 앱 바가 기본 위젯으로 간주되어야 하는지 여부를 나타내는 값. 'true'인 경우 상태 표시줄과 겹치지 않도록 앱 바에 상단 패딩이 제공된다.

body

• body : 스캐폴드의 메인 컨텐츠를 제공하는 위젯. 이것은 일반적으로 ListView, Column 또는 Row 위젯이지만 스캐폴드의 나머지 공간을 차지하는 모든 위젯일 수 있다.

플로팅 작업 버튼

• floatingActionButton : 스캐폴드 우측 하단에 플로팅 액션 버튼을 제공하는 위젯. 플로팅 작업 버튼은 일반적으로 새 항목 추가 같은 작업에 사용된다.
• floatingActionButtonLocation : 스캐폴드에서 부동 작업 버튼의 위치를 지정한다. 기본값은 FloatingActionButtonLocation.endFloat이며 스캐폴드의 오른쪽 하단 모서리에 버튼을 배치한다.

Drawer

• drawer : 스캐폴드의 왼쪽 가장자리에 내비게이션 서랍을 제공하는 위젯.
• endDrawer : 스캐폴드의 오른쪽 가장자리에 두 번째 탐색 서랍을 제공하는 위젯.

기타

• backgroundColor : 스캐폴드의 배경색.
• resizeToAvoidBottomInset : 키보드와 겹치지 않도록 키보드가 표시될 때 스캐폴드가 자체적으로 크기를 조정해야 하는지 여부를 나타내는 값.
• extendBody : 스캐폴드의 몸체가 앱 바 및 하단 내비게이션 바 아래로 확장되어야 하는지 여부를 나타내는 값.
• bottomNavigationBar : 스캐폴드 하단에 하단 내비게이션 바를 제공하는 위젯.

예시

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: SafeArea(
          child: Center(
            child: Text('Hello, World!'),
          ),
        ),
      ),
    );
  }
}

 

많은 내용이라 하나하나 속성들에 대해서 다음에 예시로 보여줄 예정이다.