[flutter] 플러터 Column을 사용한 사이드바 구현하기

20 Dec 2023

flutter

플러터(Flutter)를 사용하여 모바일 앱을 개발할 때, 사이드바(Sidebar)는 네비게이션을 쉽게 이동하고 다양한 기능을 제공하는 데에 유용한 요소입니다. Column 위젯을 사용하여 사이드바를 구현할 수 있으며, 다음은 간단한 예제를 통해 알아보겠습니다.

Column 위젯으로 사이드바 구성

먼저, Scaffold 위젯 내에서 Drawer를 사용하여 사이드바를 구성합니다. 다음 코드는 Scaffold의 drawer 속성을 활용하여 Drawer를 생성하는 예제입니다.

Scaffold(
  appBar: AppBar(
    title: Text('사이드바 구현 예제'),
  ),
  drawer: Drawer(
    child: Column(
      children: <Widget>[
        UserAccountsDrawerHeader(
          accountName: Text('사용자 이름'),
          accountEmail: Text('사용자 이메일'),
          currentAccountPicture: CircleAvatar(
            backgroundImage: AssetImage('assets/user.png'),
          ),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('홈'),
          onTap: () {
            // 홈 화면으로 이동
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('설정'),
          onTap: () {
            // 설정 화면으로 이동
          },
        ),
        // 추가적인 사이드바 메뉴 아이템들
      ],
    ),
  ),
  body: // 나머지 앱 화면 구성
);

위 코드에서 Drawer의 child로 Column을 사용하여 다양한 위젯을 수직으로 배치할 수 있습니다. UserAccountsDrawerHeader, ListTile 등의 위젯을 사용하여 각각 사용자 정보와 메뉴를 표시할 수 있습니다.

마치며

플러터의 Column을 활용하여 사이드바를 구현하는 방법을 살펴봤습니다. 이를 응용하여 사용자 정의 메뉴나 레이아웃 등을 추가할 수 있습니다. 플러터의 다양한 위젯을 적재적소에 활용하여 효과적인 UI/UX를 제공하는 앱을 개발해보세요.

참고 자료

Flutter 공식 문서: https://flutter.dev/docs
Flutter 위젯 카탈로그: https://flutter.dev/docs/development/ui/widgets