[플러터] 플러터로 markdown 문서에 로컬 이미지를 불러오는 방법

플러터로 텍스트 데이터를 저장하고 불러오는 방법으로 markdown 문서를 이용하고 있습니다. markdown 문서는 텍스트 파일의 일종으로 마크업과 호환되는 것을 기능으로 한 문서인데요. 고유의 형식을 가지고 있고 개발자가 프로그램에 대한 해설을 하는 용도로 쓰입니다. 프로젝트에 포함시켜 작성하는데, 깃헙에서 프로젝트 해설을 할때도 쓰입니다. 저는 이 문서 형식을 써서 앱에서 실어 보여줄 글을 저장해서 불러오게 하는데요. 글 중간에 특정 기호로 된 조건을 만족하는 문구를 포함시키면, flutter_markdown과 같은 패키지로 이미지도 표시가 됩니다.

flutter_markdown 패키지는 여러 유형의 이미지 경로 지정 방식을 제공하지만, 이 예시에서는 로컬 이미지를 불러오는 방법을 설명합니다. 파일명과 소스코드는 제 프로젝트 기준이고, 임의로 변경하셔도 됩니다.

우선 프로젝트 루트 디렉토리에 assets/images 디렉토리를 만들고 사진을 저장합니다.

그리고 pubspec.yaml 에 아래 라인을 추가합니다.

assets:
  - assets/images/yamaguchi-momoe1.jpg
  - assets/images/yamaguchi-momoe2.jpg
  - assets/images/yamaguchi-momoe3.jpg
  - assets/images/yamaguchi-momoe4.jpg

그리고 표시할 markdown 파일 중간 중간에 아래처럼 기재합니다.

...글 내용...
![모모에 어릴적 사진](resource:assets/images/yamaguchi-momoe1.jpg)
...글 내용...
![야마구치 모모에와 미우라 토모카즈](resource:assets/images/yamaguchi-momoe2.jpg)
...글 내용...
![모모에 젊은 시절 사진](resource:assets/images/yamaguchi-momoe3.jpg)
...글 내용...
![모모에 최근 사진](resource:assets/images/yamaguchi-momoe4.jpg)

![ ] 안에는 이미지를 식별하는 문구가 들어가구요. 소괄호 안에는 이미지 경로가 들어갑니다. 우리는 로컬 이미지를 assets 디렉토리에서 읽어야 하니, 앞에 resource: 를 붙여서 지정합니다.

그리고나서 FutureBuilder로 flutter_markdown 패키지를 활용한 MarkdownBody() 등의 코딩을 통해서 이미지가 읽혀져 표시가 됩니다.

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    appBar: AppBar(
      title: const Text(
        '아이돌의 황혼기 - 글 내용',
      ),
    ),
    body: SingleChildScrollView(
      scrollDirection: Axis.vertical,
      padding: const EdgeInsets.all(20.0),
      child: FadeIn(
        duration: const Duration(milliseconds: 1650),
        curve: Curves.easeIn,
        child: FutureBuilder(
          future: retrieveArticleDisplayData(_entity),
          builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
            return MarkdownBody(
              data: snapshot.data.toString(),
              styleSheet: MarkdownStyleSheet(
                p: const TextStyle(
                  fontSize: 18.0,
                  height: 1.7,
                  color: Colors.black87,
                ),
                h2: const TextStyle(
                  fontSize: 22.0,
                  height: 1.5,
                  color: Colors.black87,
                ),
                h3: const TextStyle(
                  fontSize: 21.0,
                  height: 1.5,
                  color: Colors.black87
                ),
                pPadding: const EdgeInsets.all(10.0), // pPadding값을 지정
             ),
           );
        }
      ),
    ),
  ),