[flutter] 플러터 Drawer에서 아이콘 스타일을 변경하는 방법은?

07 Dec 2023

flutter

플러터에서 Drawer(네비게이션 바)는 앱 내에서 사이드 메뉴를 표시하는 데 사용되는 중요한 구성 요소입니다. Drawer에는 일반적으로 아이콘 링크가 포함되어 있으며, 이 아이콘들의 스타일을 변경하는 방법에 대해 알아보겠습니다.

아이콘의 스타일을 변경하려면 Drawer에 대한 새로운 Widget을 만들어야 합니다. 사진과 같이 ListTile을 사용하여 아이콘을 추가할 수 있습니다.

Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      DrawerHeader(
        child: Text('메뉴'),
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
      ),
      ListTile(
        leading: Icon(Icons.home, color: Colors.red),
        title: Text('홈'),
        onTap: () {
          // 메뉴 항목 클릭 시 동작
        },
      ),
      ListTile(
        leading: Icon(Icons.settings, color: Colors.green),
        title: Text('설정'),
        onTap: () {
          // 메뉴 항목 클릭 시 동작
        },
      ),
    ],
  ),
)

위 코드에서 leading 속성을 사용하여 아이콘의 색상을 변경할 수 있습니다. 여기서는 Color 속성을 이용하여 원하는 색상을 설정하였습니다.

또는, Trailing 속성을 사용하여 아이콘을 오른쪽에 표시할 수도 있습니다. 이 경우 leading 대신 trailing을 사용하면 됩니다.

아이콘의 크기를 변경하려면 Icon 위젯의 size 속성을 설정하면 됩니다.

아이콘 스타일을 변경하는 방법에 대한 더 많은 정보는 플러터 공식 문서를 참조하십시오. https://flutter.dev/docs/catalog/samples/drawer