[flutter] 플러터 Drawer에서 스크롤 가능한 메뉴를 구현하는 방법은?

07 Dec 2023

flutter

애플리케이션에서 메뉴를 제공하기 위해 Drawer를 사용하는 경우가 많습니다. 그러나 만약 Drawer에 많은 항목이 포함되어 있다면 화면에 모두 표시되지 못할 수 있습니다. 이런 경우 스크롤 가능한 메뉴를 구현하여 사용자가 모든 항목을 볼 수 있도록 해야합니다.

이 문서에서는 Flutter에서 Drawer의 메뉴를 스크롤 가능하게 만드는 방법을 안내하겠습니다.

1. SingleChildScrollView 사용하기

스크롤 가능한 메뉴를 만들기 위해 SingleChildScrollView 위젯을 사용할 수 있습니다. SingleChildScrollView는 단일 자식 위젯을 포함하며 해당 자식 위젯의 크기가 화면을 벗어날 경우 스크롤 기능을 제공합니다.

다음은 Drawer의 메뉴를 SingleChildScrollView로 감싸는 예시 코드입니다:

Drawer(
  child: SingleChildScrollView(
    child: Column(
      children: [
        // 메뉴 항목들을 여기에 추가
      ],
    ),
  ),
),

2. ListView 사용하기

위의 방법은 간단하지만, SingleChildScrollView는 자식 위젯이 크기가 화면을 벗어날 때 스크롤을 할 수 있도록 하기 때문에 메뉴 항목이 많아지면 성능에 영향을 줄 수 있습니다. 이를 해결하기 위해 ListView 위젯을 사용할 수 있습니다. ListView는 스크롤 가능한 리스트를 구현하는 데 효과적입니다.

다음은 Drawer의 메뉴를 ListView로 구현하는 예시 코드입니다:

Drawer(
  child: ListView(
    children: [
      // 메뉴 항목들을 여기에 추가
    ],
  ),
),

3. ListView.builder 사용하기

만약 메뉴 항목이 동적으로 변경되는 경우 ListView.builder를 사용할 수 있습니다. ListView.builder는 리스트 아이템을 생성하기 위해 필요한 위젯을 제공합니다. 이는 성능을 향상시키는 데 도움이 됩니다.

다음은 Drawer의 메뉴를 ListView.builder로 구현하는 예시 코드입니다:

Drawer(
  child: ListView.builder(
    itemCount: items.length,
    itemBuilder: (BuildContext context, int index) {
      return ListTile(
        title: Text(items[index]),
        // 항목을 클릭했을 때 필요한 동작을 추가하세요
      );
    },
  ),
),

이제 당신은 Flutter에서 Drawer에서 스크롤 가능한 메뉴를 구현하는 방법을 알게 되었습니다. 이를 통해 사용자가 모든 항목을 보기 쉽게 할 수 있습니다.

1. SingleChildScrollView 사용하기

2. ListView 사용하기

3. ListView.builder 사용하기

참고 자료