flutter & dart - 사이드바? Drawer

Overview.

옆의 네비게이터를 나오게 할 수 있는 Drawer 를 알아보자

1. Drawer 이란?
2. DrawHeader

 

0. 문서

https://docs.flutter.dev/cookbook/design/drawer

Add a drawer to a screen

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

DrawerHeader class - material library - Dart API

 

1. Drawer 이란?

머티리얼 디자인을 사용하는 앱에는 탭과 서랍이라는 두 가지 기본 탐색 옵션이 있습니다. 탭을 지탱할 공간이 부족한 경우 서랍이 편리한 대안을 제공합니다.

Flutter에서는 Drawer위젯을 a와 함께 사용하여 ScaffoldMaterial Design 서랍이 있는 레이아웃을 만듭니다. 이 레시피는 다음 단계를 사용합니다.

 

서랍이라고 하네요.

첫째.

Scaffold 의 drawer 의 부분에 Drawer 위젯에 child 부분에 작성이 가능합니다.

[ 만약 drawer 가 아닌 endDrawer 라면 오른쪽에 배치됩니다. ]

Scaffold(
  appBar: AppBar(
    title: const Text('AppBar with hamburger button'),
  ),
  drawer: Drawer(
    child: // Populate the Drawer in the next step.
  ),
);

 

둘째. Listview

Drawer 위젯 안에는 대개 ListView 를 넣고 그안에 DrawHeader 가 들어가는 형식을 주로 사용하나 보네요.

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

 

2. DrawHeader

DrawHeader 는 뭐 말그대로 헤더 부분입니다. 데코레이션이 가능하겠네요!

 const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),

 

 

그렇게 전제적으로 확인해 봅시다.

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

 

onTap에서는 여러가지 실행할 수 있겠네요.