[Flutter] 플러터에서 마크다운 적용하기!

채팅 관련 서비스를 개발하던 중, GPT api를 불러오는데 생각해보니 GPT는 마크다운으로 답변할 때가 많다. 그래서 응답을 받은 텍스트를 마크다운 그대로 적용시키기 위해 플러터에서 필요했다.

채팅 마크다운

코드블록과 인라인 코드 블록도 이렇게 적용시킬 수 있다.

플러터에서 마크다운을 적용 시키는 패키지는 다음과 같이 flutter_markdown 패키지를 사용한다.

https://pub.dev/packages/flutter_markdown

flutter_markdown | Flutter package

 

기본 예제 말고 현재 서비스 개발중에 있는 코드를 가져와서 설명하겠다.

Container(
  padding: EdgeInsets.symmetric(
      horizontal: 15, vertical: 7.5),
  decoration: BoxDecoration(
    color: isUser ? Colors.green : Colors.green[50],
    borderRadius: BorderRadius.circular(40),
  ),
  child: MarkdownBody(
    data: message.text,
    styleSheet: MarkdownStyleSheet(
      p: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontSize: 16,
        height: 1.5,
      ),
      h1: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
      h2: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontSize: 20,
        fontWeight: FontWeight.bold,
      ),
      h3: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
      em: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontStyle: FontStyle.italic,
      ),
      strong: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
        fontWeight: FontWeight.bold,
      ),
      code: TextStyle(
        color: const Color.fromARGB(255, 0, 0, 0),
        backgroundColor: const Color.fromARGB(255, 251, 255, 246),

      ),
      codeblockDecoration: BoxDecoration(
        color:  const Color.fromARGB(255, 251, 255, 246),
        borderRadius:
            BorderRadius.circular(8),
        border: Border.all(
            color: Colors.grey[300]!),
      ),
      blockquote: TextStyle(
        color: Colors.grey[600],
        fontStyle: FontStyle.italic,
      ),
      listBullet: TextStyle(
        color:
            isUser ? Colors.white : Colors.black87,
      ),
    ),
  ),
)

상태에 따라 텍스트를 불러오기 때문에 코드가 조잡해보일 수 있다. 간단하게 프로퍼티를 설명하면 이렇게 하면된다.

Container(
  child: MarkdownBody(
    data: message.text, // 적용할 텍스트
    styleSheet: MarkdownStyleSheet(
      p: TextStyle(), 
      h1: TextStyle(),
      h2: TextStyle(),
      h3: TextStyle(),
      em: TextStyle(),
      strong: TextStyle(),
      code: TextStyle(),
      codeblockDecoration: BoxDecoration(),
      blockquote: TextStyle(),
      listBullet: TextStyle(),
    ),
  ),
)

MarkdownBody 의 부모 위젯을 Container 로 감싸야 한다. 그리고 styleSheet 프로퍼티을 MarkdownStyleSheet 클래스로 설정할 수 있다.

 

p : 일반 텍스트
h1 : # 헤딩1
h2 : ## 헤딩2
h3 : ### 헤딩3
em : *이탤릭체* 또는 _이탤릭체_
strong : **볼드체** 또는 __볼드체__
code : '인라인 코드블록' 또는 '''코드 블록''' (백쿼터를 대체)
codeblockDecoration : '인라인 코드블록' 또는 '''코드 블록''' 의 박스 데코레이션
blockquote : > (콜아웃)
listBullet : *, -, 또는 + 리스트 불릿