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.