markdown_widget (마크다운 Renderer)

 

1. MarkDown 이란?

Markdown은 일반 텍스트 문서에 서식 요소를 추가하는 데 사용할 수 있는 경량 마크업 언어입니다. 2004년 John Gruber가 만든 Markdown은 현재 세계에서 가장 인기 있는 마크업 언어 중 하나입니다.
GitHub에서 사용되는 README.md 파일이 MarkDown으로 작성되었습니다.
MarkDown의 파일 확장자 명은 .md 혹은 .markdown을 사용합니다.

 

MakDown에 대한 더 자세한 내용은 MarkDown Guide를 참고바랍니다.

 

2. 사용법

2.1. child (단일)에 배치하는 경우

• MarkDownWidget 을 사용
• Container, SizedBox 등 같은 child (단일)항목에 배치하는 경우에 사용

	import 'package:flutter/material.dart';
	import 'package:markdown_widget/markdown_widget.dart';
	class MarkdownPage extends StatelessWidget {
	final String data;
	MarkdownPage(this.data);
	@override
	Widget build(BuildContext context) => Scaffold(body: buildMarkdown());
	Widget buildMarkdown() => MarkdownWidget(data: data);
	}

view raw markdownWidget.dart hosted with ❤ by GitHub

 

2.2. children (다중)에 배치하는 경우

• MarkdownGenerator 을 사용
• Column, Row, Stack 등 같은 children항목에 배치하는 경우에 사용

	Widget buildMarkdown() =>
	Column(
	children: MarkdownGenerator().buildWidgets(data));

view raw markdownGenerator.dart hosted with ❤ by GitHub

 

3. 속성 별 설정

• config 항목에서 MarkdownConfig 를 정의해 지정
• MarkDown 속성(Code Bloc, Link 등) 별로 위젯을 추가해주거나 theme를 주는 등의 설정을 추가할 수 있습니다.

3.1. Light/Dark Mode 전환

	Widget buildMarkdown(BuildContext context) {
	final isDark = Theme.of(context).brightness == Brightness.dark;
	return MarkdownWidget(
	data: data,
	config:
	isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig); // Light/Dart 모드 설정
	}

view raw markdown_mode.dart hosted with ❤ by GitHub

3.2. Code Bloc 설정

	import 'package:flutter_highlight/themes/a11y-light.dart';
	Widget buildMarkdown() => MarkdownWidget(
	data: data,
	config: MarkdownConfig(configs: [
	PreConfig(theme: a11yLightTheme, language: 'dart'),
	])
	);

view raw markdown_codebloc.dart hosted with ❤ by GitHub

3.3. Link 설정

	Widget buildMarkdown() => MarkdownWidget(
	data: data,
	config: MarkdownConfig(configs: [
	LinkConfig( // Link 설정
	style: TextStyle(
	color: Colors.red,
	decoration: TextDecoration.underline,
	),
	onTap: (url) { // 링크 클릭시 발생되는 이벤트
	///TODO:on tap
	},
	)
	]));

view raw markdown_link.dart hosted with ❤ by GitHub

 

4. MarkDown을 활용한 프로젝트 

• ChatGPT의 답변을 markdown_widget을 사용하여 Code Blok과 텍스트를 분류하였습니다.
• Code Block의 복사하기는 PreConfig의 wrapper 속성을 사용하여 아이콘을 추가하였습니다.

 

 

 

https://pub.dev/packages/markdown_widget

markdown_widget | Flutter Package