DEV Community

loading...
Cover image for Starting with Flutter: showing markdown

Starting with Flutter: showing markdown

theotherdevs profile image TheOtherDev/s ・2 min read

Markdown is awesome, you can show rich text without using that ugly http code. On Flutter you have a great package to use to show markdown: flutter_markdown.

It is extremely easy to use in its basic "mode" but we'll also show some advanced features.

Installation

That's a no-brainer, just add to your pubspec.yaml:

dependencies:
  flutter_markdown: ^0.5.2
Enter fullscreen mode Exit fullscreen mode

and do a good old

$ flutter pub get
Enter fullscreen mode Exit fullscreen mode

then import the package like this:

import 'package:flutter_markdown/flutter_markdown.dart';
Enter fullscreen mode Exit fullscreen mode

Showing a file

We'll use the text file on this repository (all credits to mxstbr), so we'll create a FutureBuilder and http to get text and give it to our Markdown renderer widget:

Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.red,
        ),
        body: Center(
          child: FutureBuilder(
            future: getTextData(),
            builder: (context, snapshot){
              if(snapshot.hasData){
                //HERE we need to add the text renderer
              }
              return Container();
            }
          )
        ));
}

Future<String> getTextData() async{
    String url = 'https://raw.githubusercontent.com/mxstbr/markdown-test-file/master/TEST.md';
    var response = await http.get(url);
    return response.body;
  }
Enter fullscreen mode Exit fullscreen mode

To show the markdown content we just need to return this iwdget inside the builder:

return Markdown(data: snapshot.data);
Enter fullscreen mode Exit fullscreen mode

the result will be this:

Result

the widget is already scrollable, if we need to add it to a scrollable parent we should use MarkdownBody.

Some advanced features

This package also includes:

  • Image support in form of URL, absolute file or resources
  • Selectable text
  • Emoji support
  • AutoLink support

and more.

There, your natural evolution of WYSIWYG is here, you are welcome.

Discussion (0)

pic
Editor guide