flutter study "Scaffold"

프랭크 IT·2023년 10월 13일
0

flutter

목록 보기
3/28
post-custom-banner

Flutter에서 Scaffold는 기본적인 앱 레이아웃을 제공하는 위젯입니다. Scaffold는 앱의 주요 구성 요소를 제공하며, 앱 바(AppBar), 하단 내비게이션 바, 본문, 탭바, 그리고 플로팅 액션 버튼(Floating Action Button)과 같은 다양한 요소들을 포함하고 배치할 수 있습니다.

Scaffold의 주요 기능 및 특징은 다음과 같습니다:

  1. AppBar: 앱의 상단에 위치하는 바로, 제목, 액션 버튼, 메뉴 등의 요소를 포함할 수 있습니다.
  2. Body: 앱의 주요 콘텐츠 영역으로, 여기에 위젯들을 배치합니다.
  3. FloatingActionButton: 오른쪽 하단에 위치하는 원형의 버튼으로, 주로 주요 액션을 위해 사용됩니다.
  4. BottomNavigationBar: 화면 하단에 위치하는 탭바로, 여러 화면 간의 이동을 위한 탭을 포함합니다.
  5. Drawer: 왼쪽 또는 오른쪽에서 나오는 슬라이드 메뉴를 구현하는 데 사용됩니다.
  6. SnackBar: 잠깐 보이는 알림 메시지를 화면 하단에 표시합니다.

Scaffold의 기본적인 사용 예시는 다음과 같습니다:

Scaffold(
  appBar: AppBar(
    title: Text('Flutter Scaffold 예제'),
  ),
  body: Center(
    child: Text('Scaffold 본문 영역'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // 플로팅 액션 버튼 클릭 시 수행될 액션
    },
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: '홈',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.search),
        label: '검색',
      ),
    ],
  ),
)

이 예제에서는 AppBar, Body, FloatingActionButton, 그리고 BottomNavigationBar를 포함하는 기본적인 Scaffold 레이아웃을 생성합니다. 이러한 구성 요소들을 조합하여 다양한 앱 레이아웃을 만들 수 있습니다.

profile
AWS, Vue, Java, flutter, Mongodb, Python, Git , EKS, Docker, 독서, 영어, 에어로빅, 자전거, 농구, 바둑, 풋살, 복싱, Guitar, 글쓰기, 랭체인
post-custom-banner

0개의 댓글