[flutter] ExpansionPanel의 여러 줄 텍스트 처리 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 제공하는 위젯 중 하나로, 사용자가 펼칠 수 있는 패널을 생성할 수 있습니다. 하지만, ExpansionPanel의 헤더(Header) 영역에 여러 줄의 텍스트를 처리하는 것은 약간의 추가 작업이 필요합니다.

이 문제를 해결하기 위해 여러 가지 방법을 소개하겠습니다.

1. RichText 위젯 사용

ExpansionPanel의 헤더에서 여러 줄의 텍스트를 처리하기 위해 RichText 위젯을 사용할 수 있습니다. RichText 위젯은 다양한 스타일을 적용할 수 있는 텍스트 위젯입니다. 다음은 사용 예시입니다.

ExpansionPanelList(
  // ...
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return RichText(
          text: TextSpan(
            children: [
              TextSpan(text: '첫 번째 줄\n', style: TextStyle(fontSize: 16)),
              TextSpan(text: '두 번째 줄', style: TextStyle(fontSize: 12)),
            ],
          ),
        );
      },
      // ...
    ),
  ],
),

위의 예시에서는 RichText 내부에 TextSpan을 사용하여 각 줄마다 다른 스타일을 적용하고 있습니다. 첫 번째 줄은 글자 크기가 16, 두 번째 줄은 글자 크기가 12로 표시되도록 설정되어 있습니다.

2. HTML 태그 사용

Flutter에서는 기본적으로 HTML 태그를 지원하지 않지만, html 패키지를 사용하여 HTML 태그를 처리할 수 있습니다. 다음은 해당 패키지를 사용한 예시입니다.

먼저, pubspec.yaml 파일에 다음을 추가하여 html 패키지를 설치합니다.

dependencies:
  flutter_html: ^1.2.0

다음은 ExpansionPanel의 헤더에서 HTML 태그를 사용하는 예시입니다.

import 'package:flutter_html/flutter_html.dart';

ExpansionPanelList(
  // ...
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return Html(
          data: "<div>첫 번째 줄</div><div>두 번째 줄</div>",
        );
      },
      // ...
    ),
  ],
),

위의 예시에서는 <div> 태그를 사용하여 여러 줄의 텍스트를 처리하고 있습니다.

3. 자체 위젯 작성

만약 텍스트 처리에 특정한 스타일이나 레이아웃이 필요하다면, 자체 위젯을 작성하여 ExpansionPanel의 헤더에 사용할 수 있습니다. 자체 위젯을 사용하면 세밀한 컨트롤이 가능하며, 필요한 스타일과 레이아웃을 자유롭게 구성할 수 있습니다.

class MultiLineExpansionPanelHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '첫 번째 줄',
          style: TextStyle(fontSize: 16),
        ),
        Text(
          '두 번째 줄',
          style: TextStyle(fontSize: 12),
        ),
      ],
    );
  }
}

ExpansionPanelList(
  // ...
  children: [
    ExpansionPanel(
      headerBuilder: (context, isExpanded) {
        return MultiLineExpansionPanelHeader();
      },
      // ...
    ),
  ],
),

위의 예시에서는 MultiLineExpansionPanelHeader라는 자체 위젯을 작성하여 사용하고 있습니다. 이 위젯 내부에서는 Column을 사용하여 여러 줄의 텍스트를 처리하고 있습니다.

결론

ExpansionPanel의 헤더에서 여러 줄의 텍스트를 처리하는 방법에 대해 알아보았습니다. RichText, HTML 태그, 자체 위젯을 사용하여 각각 다른 방식으로 처리할 수 있습니다. 프로젝트의 요구사항에 맞게 적절한 방법을 선택하여 텍스트를 처리해 보세요.