[flutter] ExpansionPanel에서 컨텐츠 글꼴 및 스타일 지정 방법

07 Dec 2023

flutter

ExpansionPanel은 Flutter에서 제공하는 위젯으로, 사용자가 펼쳐서 내용을 볼 수 있는 패널을 제공합니다. ExpansionPanel Widget을 사용할 때, 컨텐츠의 글꼴 및 스타일을 지정하고자 할 때는 다음과 같은 방법을 사용할 수 있습니다.

1. 테마 설정

전반적인 컨텐츠 글꼴 및 스타일을 설정하기 위해서는 다음과 같이 테마 설정을 할 수 있습니다.

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(
        fontSize: 16.0,
        fontFamily: 'NotoSans',
        fontWeight: FontWeight.normal,
        // 원하는 다른 스타일 속성 추가
      ),
    ),
  ),
  home: MyHomePage(),
);

위의 코드에서 bodyText2는 기본 텍스트 스타일을 지정하는 것이며, 해당 스타일을 수정하여 원하는 글꼴, 크기, 굵기 등을 설정할 수 있습니다.

2. ExpansionPanel의 컨텐츠 스타일 지정하기

만약 ExpansionPanel의 특정 컨텐츠에 대해서만 스타일을 지정하고자 한다면, ExpansionPanelList의 children에 해당하는 ListTile Widget에서 스타일을 변경할 수 있습니다.

ExpansionPanelList(
  expansionCallback: (int index, bool isExpanded) {
    // 패널 펼침/접힘 상태 변경
  },
  children: [
    ExpansionPanel(
      headerBuilder: (BuildContext context, bool isExpanded) {
        return ListTile(
          title: Text(
            '패널 헤더',
            style: TextStyle(
              fontWeight: FontWeight.bold,
              // 다른 원하는 스타일 속성 추가
            ),
          ),
        );
      },
      body: ListTile(
        title: Text(
          '패널 내용',
          style: TextStyle(
            // 다른 원하는 스타일 속성 추가
          ),
        ),
      ),
      isExpanded: true, // 패널 초기 상태
    ),
  ],
)

위의 예제에서는 ExpansionPanel을 구성하는 header와 body에 대해서 스타일을 지정하는 방법을 보여줍니다. 각각의 Text Widget에서 TextStyle을 사용하여 원하는 글꼴, 크기, 굵기 등을 설정할 수 있습니다.

결론

Flutter의 ExpansionPanel 위젯에서 컨텐츠의 글꼴 및 스타일을 지정하는 방법에 대해 알아보았습니다. 전체적인 테마 설정으로 모든 컨텐츠에 스타일을 적용하거나, 개별적인 ExpansionPanel의 컨텐츠에 대해서 스타일을 지정할 수 있습니다. 원하는 스타일을 설정하여 앱의 디자인을 개선해보세요!

1. 테마 설정

2. ExpansionPanel의 컨텐츠 스타일 지정하기

결론

참고 자료