[flutter] ExpansionPanel에서 패널 헤더 길이 조절 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 사용할 수 있는 위젯 중 하나로, 패널을 확장하거나 축소하는 기능을 제공합니다. 하지만 기본적으로 패널 헤더의 길이는 고정되어 있어 원하는 길이로 조절하기가 어려울 수 있습니다. 이번 글에서는 ExpansionPanel의 패널 헤더 길이를 조절하는 방법에 대해 알아보겠습니다.

1. Custom ExpansionPanel을 사용하기

ExpansionPanel은 패널 헤더의 길이를 조절할 수 있는 기능을 제공하지 않습니다. 따라서 우리는 ExpansionPanel을 상속한 새로운 위젯을 만들어야 합니다. 아래는 예시 코드입니다.

import 'package:flutter/material.dart';

class CustomExpansionPanel extends ExpansionPanel {
  final double headerHeight;

  CustomExpansionPanel({
    required Widget headerBuilder,
    required Widget body,
    this.headerHeight = 48.0,
  }) : super(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return Container(
              height: headerHeight,
              child: headerBuilder,
            );
          },
          body: body,
        );
}

위 코드에서는 CustomExpansionPanel이라는 새로운 위젯을 정의하고, headerHeight라는 추가적인 파라미터를 통해 헤더의 높이를 지정할 수 있도록 했습니다.

2. CustomExpansionPanel 사용 예시

아래는 CustomExpansionPanel을 사용하는 예시입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          CustomExpansionPanel(
            headerBuilder: Text('패널 1'),
            body: Container(
              child: Text('내용 1'),
            ),
          ),
          CustomExpansionPanel(
            headerBuilder: Text('패널 2'),
            body: Container(
              child: Text('내용 2'),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드에서 CustomExpansionPanel을 사용하여 패널 헤더의 높이를 조절할 수 있습니다. headerHeight 파라미터를 조절하여 패널 헤더의 높이를 원하는대로 변경할 수 있습니다.

결론

위의 방법을 통해 ExpansionPanel의 패널 헤더 길이를 조절할 수 있습니다. CustomExpansionPanel을 사용하여 필요한 높이를 지정하면 패널 헤더를 자유롭게 조절할 수 있습니다.