[{"data":1,"prerenderedAt":44},["Reactive",2],{"blog-post-flutter-markdown-parsing":3},{"slug":4,"title":5,"description":6,"excerpt":7,"date":8,"category":9,"author":10,"keywords":11,"readingMinutes":12,"html":13,"headings":14,"tools":21,"related":22},"flutter-markdown-parsing","Flutter Markdown Parsing Tutorial","Learn to parse Markdown in Flutter with the `flutter_markdown` library. This tutorial covers setup, implementation, and customization.","This tutorial aims to demonstrate how to parse Markdown content in the Flutter framework. We will utilize the fluttermarkdown library which wraps around the Dart package markdown to translate…","2024-07-20","Tutorial","Matthew Rathbone","Flutter markdown parsing",2,"\u003Ch2 id=\"parsing-markdown-in-flutter\">Parsing Markdown in Flutter\u003C/h2>\n\u003Cp>This tutorial aims to demonstrate how to parse Markdown content in the Flutter framework. We will utilize the \u003Ccode>flutter_markdown\u003C/code> library which wraps around the Dart package \u003Ccode>markdown\u003C/code> to translate Markdown into Flutter widgets. This tutorial assumes familiarity with Flutter and Dart. \u003C/p>\n\u003Ch3 id=\"setting-up-the-project\">Setting Up the Project\u003C/h3>\n\u003Cp>To start, we need to create a new Flutter application by running the command \u003Ccode>flutter create markdown_flutter\u003C/code>.\u003C/p>\n\u003Cp>Navigate to your project directory using \u003Ccode>cd markdown_flutter\u003C/code>, and then open your \u003Ccode>pubspec.yaml\u003C/code> file.\u003C/p>\n\u003Cp>Next, we need to add the \u003Ccode>flutter_markdown\u003C/code> package to our dependencies:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-yaml\">\u003Cspan class=\"hljs-attr\">dependencies:\u003C/span>\n  \u003Cspan class=\"hljs-attr\">flutter:\u003C/span>\n    \u003Cspan class=\"hljs-attr\">sdk:\u003C/span> \u003Cspan class=\"hljs-string\">flutter\u003C/span>\n\n  \u003Cspan class=\"hljs-attr\">flutter_markdown:\u003C/span> \u003Cspan class=\"hljs-string\">^0.6.6\u003C/span>\n\u003C/code>\u003C/pre>\u003Cp>Now, run \u003Ccode>flutter pub get\u003C/code> to fetch the package.\u003C/p>\n\u003Ch3 id=\"implementing-flutter_markdown\">Implementing \u003Ccode>flutter_markdown\u003C/code>\u003C/h3>\n\u003Cp>With the package installed, we can now create a Markdown display. In your \u003Ccode>main.dart\u003C/code> file, replace the existing content with the following:\u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-dart\">\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-string\">'package:flutter/material.dart'\u003C/span>;\n\u003Cspan class=\"hljs-keyword\">import\u003C/span> \u003Cspan class=\"hljs-string\">'package:flutter_markdown/flutter_markdown.dart'\u003C/span>;\n\n\u003Cspan class=\"hljs-keyword\">void\u003C/span> main() {\n  runApp(MyApp());\n}\n\n\u003Cspan class=\"hljs-class\">\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title\">MyApp\u003C/span> \u003Cspan class=\"hljs-keyword\">extends\u003C/span> \u003Cspan class=\"hljs-title\">StatelessWidget\u003C/span> \u003C/span>{\n  \u003Cspan class=\"hljs-meta\">@override\u003C/span>\n  Widget build(BuildContext context) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> MaterialApp(\n      title: \u003Cspan class=\"hljs-string\">'Flutter Markdown Demo'\u003C/span>,\n      theme: ThemeData(\n        primarySwatch: Colors.blue,\n      ),\n      home: MyHomePage(),\n    );\n  }\n}\n\n\u003Cspan class=\"hljs-class\">\u003Cspan class=\"hljs-keyword\">class\u003C/span> \u003Cspan class=\"hljs-title\">MyHomePage\u003C/span> \u003Cspan class=\"hljs-keyword\">extends\u003C/span> \u003Cspan class=\"hljs-title\">StatelessWidget\u003C/span> \u003C/span>{\n  \u003Cspan class=\"hljs-keyword\">final\u003C/span> \u003Cspan class=\"hljs-built_in\">String\u003C/span> _markdownData = \u003Cspan class=\"hljs-string\">"""\n# H1 Header\n## H2 Header\n### H3 Header\n- List Item 1\n- List Item 2\n1. Numbered Item 1\n2. Numbered Item 2\n\n**Bold Text**\n\n*Italic Text*\n\n[External Link](https://flutter.dev)\n\n    Code Snippet\n"""\u003C/span>;\n\n  \u003Cspan class=\"hljs-meta\">@override\u003C/span>\n  Widget build(BuildContext context) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C/span> Scaffold(\n      appBar: AppBar(\n        title: Text(\u003Cspan class=\"hljs-string\">'Flutter Markdown Demo'\u003C/span>),\n      ),\n      body: Markdown(data: _markdownData),\n    );\n  }\n}\n\u003C/code>\u003C/pre>\u003Cp>When we run the application (\u003Ccode>flutter run\u003C/code>), we should see a screen with various Markdown rendered elements: headers, numbered and bulleted lists, bold and italic text, a hyperlink, and a code snippet. \u003C/p>\n\u003Ch3 id=\"customizing-markdown-styles\">Customizing Markdown Styles\u003C/h3>\n\u003Cp>The \u003Ccode>flutter_markdown\u003C/code> package allows for customization of the parsed Markdown. \u003C/p>\n\u003Cp>Let's modify the color of header elements. \u003C/p>\n\u003Cpre>\u003Ccode class=\"hljs language-dart\">body: Markdown(\n  data: _markdownData,\n  styleSheet: MarkdownStyleSheet.fromTheme(Theme.of(context)).copyWith(\n     h1: Theme.of(context).textTheme.headline1!.copyWith(color: Colors.red),\n     h2: Theme.of(context).textTheme.headline2!.copyWith(color: Colors.orange),\n     h3: Theme.of(context).textTheme.headline3!.copyWith(color: Colors.yellow),\n  ),\n),\n\u003C/code>\u003C/pre>\u003Cp>This would render H1 headers in red, H2 in orange, and H3 in yellow color.\u003C/p>\n\u003Cp>For a deep dive into the Markdown syntax, you may refer to this \u003Ca href=\"/blog/guide-to-blockquotes-in-markdown\">comprehensive guide to Markdown on Mastering Markdown\u003C/a>.\u003C/p>\n\u003Ch2 id=\"conclusion\">Conclusion\u003C/h2>\n\u003Cp>The \u003Ccode>flutter_markdown\u003C/code> library is a powerful tool for incorporating Markdown into Flutter applications, with a strong level of compatibility and customization. This straightforward addition can enable richer text handling in your Flutter applications and give the ability to display formatted content easily. \u003C/p>\n\u003Cp>For further learning, you can explore the various ways to customize the Markdown renderer to fit your application's needs better.\u003C/p>\n",[15,18],{"id":16,"text":17,"level":12},"parsing-markdown-in-flutter","Parsing Markdown in Flutter",{"id":19,"text":20,"level":12},"conclusion","Conclusion",[],[23,30,37],{"slug":24,"title":25,"description":26,"excerpt":27,"date":28,"category":9,"author":10,"keywords":29,"readingMinutes":12},"markdown-strikethrough","How to Use Markdown Strikethrough - A Tutorial","Learn how to effectively use strikethrough in Markdown to show text edits or corrections. Simple steps for clear communication.","In this article, we will delve into the use case and implementation of the strikethrough text in Markdown.","2024-05-06","Markdown strikethrough",{"slug":31,"title":32,"description":33,"excerpt":34,"date":35,"category":9,"author":10,"keywords":36,"readingMinutes":12},"javascript-markdown-example","Javascript Markdown Parsing with Markdown-it: A Guide","Discover how to parse and generate markdown in Javascript using Markdown-it, with practical examples for easy markdown-to-HTML conversion.","Markdown, a lightweight markup language with plain text formatting syntax, has gained immense popularity due to its ease of use and broad compatibility. This article will guide you on how to parse…","2024-04-26","Javascript markdown example",{"slug":38,"title":39,"description":40,"excerpt":41,"date":42,"category":9,"author":10,"keywords":43,"readingMinutes":12},"swift-markdown-parsing","Swift Markdown Parsing: How to Guide & Examples","Learn to parse Markdown in Swift using SwiftMarkdown. This tutorial provides examples for converting Markdown to HTML and customization.","As Swift becomes increasingly ubiquitous in iOS development, we often find ourselves needing to process different kinds of text data. Today, we'll focus on a popular plaintext markup language:…","2024-07-23","Swift markdown parsing",1792184940678]