
How to Display Markdown in Flutter using flutter_markdown
Have you ever been in a position where you want to display a large amount of text on screen? Granted, you could do this with a widget tree using Text
, RichText
, Column
and so on, but this isn't very scalable. It also doesn't lend itself to being adaptable/editable quickly by people outside the mobile development team.
Using flutter_markdown
, we can achieve this goal, and to top it off, we can also use MarkdownStyleSheet
to change the way particular Markdown elements are styled.
Video
Prefer to watch the video for this article? Here's one I made earlier:
Let's make a new Flutter project to try this out!
New Flutter Project
Run the following in your terminal:
$ flutter create my_markdown
$ cd my_markdown
You can then open this up inside of an editor of your choice.
Installing flutter_markdown
Head over to pubspec.yaml
and add flutter_markdown
as a dependency:
dependencies:
flutter:
sdk: flutter
flutter_markdown: ^0.3.4
You may need to run flutter pub get
if your editor doesn't already do this. If you've already started the simulator or deployed this to a device for testing, you'll have to restart the service for the package to be recognised.
Our Markdown File
For demonstration purposes, we'll be using the Markdown file below. You can either choose to copy and paste this inside of assets/hello.md
or use a file of your choosing:
# Hello World!
_I'm a Markdown file._
This is some code:
```
class MyClass {
final String name = "Paul";
}
```
We'll also need to tell Flutter that we'll be using this Markdown file by adding it to the assets
sections of our pubspec.yaml
:
assets:
- assets/hello.md
Let's show this inside of our app!
Displaying Markdown
Now that we've got a Markdown file that we want to show, we've added the package and our asset to pubspec.yaml
, all we need to do is use the Markdown
widget with an appropriate data
source.
As we're loading this from our rootBundle
, we'll be using rootBundle.loadString
and a FutureBuilder
to resolve this. Create lib/home.dart
and add the following:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Markdown"),
),
body: FutureBuilder(
future: rootBundle.loadString("assets/hello.md"),
builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
if (snapshot.hasData) {
return Markdown(data: snapshot.data);
}
return Center(
child: CircularProgressIndicator(),
);
}),
);
}
}
Add the HomePage
to main.dart
:
import 'package:flutter/material.dart';
import 'home.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
We should then be able to see our Markdown data on the page, like so:

Styling our content
We're not only limited to showing Markdown content, we're also able to style it using styleSheet
:
return Markdown(
data: snapshot.data,
styleSheet: MarkdownStyleSheet(
h1: TextStyle(color: Colors.blue, fontSize: 40),
),
);
This gives us a blue h1
showing Hello World!
at fontSize: 40
.

Review
In this article we looked at how to display and style Markdown content inside of our Flutter applications. If you ever need to display consistently styled text from a Markdown source - you can use the official flutter_markdown
package to do so with ease.