[flutter] 플러터 Drawer를 사용하여 사용자 프로필 정보를 표시하는 방법은?

07 Dec 2023

flutter

플러터에서 Drawer는 애플리케이션의 네비게이션 메뉴와 사용자 정보를 표시하는 데 사용됩니다. 이를 통해 사용자 프로필 정보를 표시하는 방법에 대해 알아보겠습니다.

1. 사용자 프로필 위젯 만들기

먼저, 사용자 프로필을 표시할 위젯을 만들어야 합니다. 이 위젯에는 사용자의 이름, 사진 등의 정보가 포함될 수 있습니다. 예를 들어, 다음과 같은 사용자 프로필 위젯을 만들 수 있습니다:

class UserProfileWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: Column(
        children: [
          CircleAvatar(
            backgroundImage: NetworkImage('<사용자 프로필 이미지 URL>'),
            radius: 50.0,
          ),
          SizedBox(height: 16.0),
          Text(
            '<사용자 이름>',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 8.0),
          Text(
            '<사용자 이메일>',
            style: TextStyle(
              fontSize: 14.0,
              color: Colors.grey,
            ),
          ),
        ],
      ),
    );
  }
}

2. Drawer 생성하기

이제 Drawer를 생성하고 위에서 만든 사용자 프로필 위젯을 Drawer에 추가해 보겠습니다. Drawer를 생성하기 위해 다음 코드를 사용할 수 있습니다:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              DrawerHeader(
                child: UserProfileWidget(),
              ),
              ListTile(
                title: Text('메뉴1'),
                onTap: () {
                  // 메뉴1을 선택했을 때 수행할 작업
                },
              ),
              ListTile(
                title: Text('메뉴2'),
                onTap: () {
                  // 메뉴2를 선택했을 때 수행할 작업
                },
              ),
              // 추가적인 메뉴 아이템들...
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서 DrawerHeader 위젯을 사용하여 사용자 프로필 위젯을 Drawer의 헤더로 추가합니다. 그리고 다른 메뉴 아이템들을 ListTile 위젯으로 추가합니다.

3. Drawer 사용하기

마지막으로, 위에서 생성한 Drawer를 앱에 적용해야 합니다. 이를 위해 MaterialApp 위젯의 home 속성에 Scaffold를 사용하고, Scaffold의 drawer 속성에 위에서 생성한 Drawer를 할당합니다.

void main() {
  runApp(MyApp());
}

이제 앱을 실행하면 앱의 상단 AppBar 영역에서 왼쪽으로 스와이프하면 Drawer가 나타나고, 사용자 프로필 정보와 다른 메뉴 아이템들이 표시됩니다.

이와 같은 방법으로 플러터 Drawer를 사용하여 사용자 프로필 정보를 표시할 수 있습니다. 필요에 따라서 사용자 프로필 위젯의 디자인을 변경하거나, Drawer의 다른 요소들을 추가할 수도 있습니다.