[flutter] Row 위젯에서의 아코디언 메뉴 사용하기

07 Dec 2023

flutter

안녕하세요! 이번에는 Flutter의 Row 위젯에서 아코디언 메뉴를 사용하는 방법에 대해 알아보겠습니다.

아코디언 메뉴란?

아코디언 메뉴는 사용자가 특정 항목을 선택하면 해당 항목의 하위 요소가 나타나고, 다른 항목을 선택하면 기존에 열려있던 항목의 하위 요소가 숨겨지는 UI 패턴입니다. 이 패턴은 주로 네비게이션 메뉴나 목록에서 사용되며, 사용자 경험을 향상시키는 데 도움이 됩니다.

Row 위젯에서의 아코디언 메뉴 사용하기

Flutter의 Row 위젯은 수평적으로 자식 위젯을 배치하는 데 사용되는 위젯입니다. 만약 Row 위젯 내부에서 아코디언 메뉴를 구현하려면 어떻게 해야 할까요? 다음은 아코디언 메뉴를 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class AccordionMenu extends StatefulWidget {
  @override
  _AccordionMenuState createState() => _AccordionMenuState();
}

class _AccordionMenuState extends State<AccordionMenu> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        GestureDetector(
          onTap: () {
            setState(() {
              _isExpanded = !_isExpanded;
            });
          },
          child: Icon(
            _isExpanded ? Icons.keyboard_arrow_up : Icons.keyboard_arrow_down,
          ),
        ),
        SizedBox(width: 10),
        Text(
          'Menu Item',
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        if (_isExpanded) ...[
          SizedBox(width: 10),
          Text('Submenu 1'),
          SizedBox(width: 10),
          Text('Submenu 2'),
        ],
      ],
    );
  }
}

위 코드에서는 Row 위젯 내부에서 아코디언 메뉴를 구현하기 위해 GestureDetector 위젯을 사용합니다. GestureDetector 위젯은 자식 위젯에 사용자 입력을 감지하는 기능을 제공합니다. 위 예제에서는 아이콘을 탭했을 때 _isExpanded 변수의 값을 토글하도록 설정했습니다.

아코디언 메뉴가 확장되면 추가적인 자식 위젯인 Submenu 1과 Submenu 2가 Row에 추가됩니다. 확장되지 않을 때는 Submenu 위젯이 보이지 않습니다. 이렇게 Row 위젯을 사용하여 아코디언 메뉴를 만들 수 있습니다.

마무리

이번 글에서는 Flutter의 Row 위젯을 사용하여 아코디언 메뉴를 구현하는 방법에 대해 알아보았습니다. 아코디언 메뉴는 사용자가 특정 항목을 선택하면 하위 항목이 나타나는 UI 패턴으로, 네비게이션 메뉴나 목록에서 자주 사용됩니다.

더 많은 Flutter 관련 정보는 Flutter 공식 문서를 참고해주세요.