[flutter] ExpansionPanel의 컨텐츠에 이미지 추가하기

07 Dec 2023

flutter

ExpansionPanel 위젯은 사용자가 펼칠 수 있는 패널을 만들기 위해 사용되는 플러터 위젯입니다. 이 위젯은 제목과 컨텐츠로 구성되어 있으며, 일반적으로 텍스트를 컨텐츠로 사용합니다. 하지만 때로는 이미지를 컨텐츠로 사용하는 것이 더 효과적일 수도 있습니다.

이 포스트에서는 ExpansionPanel의 컨텐츠에 이미지를 추가하는 방법을 알아보겠습니다.

필요한 패키지 가져오기

ExpansionPanel의 컨텐츠에 이미지를 추가하려면 먼저 flutter_svg 패키지를 설치해야 합니다. 이 패키지는 SVG 이미지 파일을 플러터 앱에서 사용할 수 있게 해줍니다. 아래 명령을 사용하여 패키지를 설치하세요.

flutter pub add flutter_svg

이미지 추가하기

flutter_svg 패키지를 가져옵니다.

import 'package:flutter_svg/flutter_svg.dart';

ExpansionPanel의 컨텐츠에 이미지를 추가하려면, Container 위젯을 사용하여 이미지를 감싸줍니다.

ExpansionPanelList(
  ...
  children: [
    ExpansionPanel(
      ...
      body: Container(
        child: SvgPicture.asset('이미지 경로'),
      ),
    ),
  ],
),

위 코드에서 '이미지 경로'에는 앱 내에서 이미지 파일의 경로를 지정해야 합니다. 예를 들어, assets/images/my_image.svg라는 경로의 이미지를 사용하려면 SvgPicture.asset('assets/images/my_image.svg')와 같이 지정하면 됩니다.

결과 확인하기

이제 ExpansionPanel의 컨텐츠에 이미지가 표시되는지 확인할 수 있습니다. 위에서 작성한 코드를 앱에 통합하여 실행해보세요.

위의 코드 예시에서는 SVG 이미지 파일을 사용했지만, flutter_svg 패키지를 사용하면 PNG, JPEG 등 다양한 이미지 형식을 지원합니다. 따라서 원하는 이미지 형식을 사용할 수 있습니다.

참고 자료

flutter_svg 패키지