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
and do a good old
$ flutter pub get
then import the package like this:
import 'package:flutter_markdown/flutter_markdown.dart';
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;
}
To show the markdown content we just need to return this iwdget inside the builder:
return Markdown(data: snapshot.data);
the result will be this:
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.
Top comments (0)