แสดง HTML ใน Page แบบสวยๆ กับ Flutter

ปัญหาหนึ่งที่เจอ เนื่องจากใน API ฝั่ง Server เราไม่ได้เขียนให้ตัด HTML ทำให้การแสดงผลใน Page นั้นมีคำสั่ง HTML โผล่มา นั่นคงไม่ดีแน่ ดังนั้น เรามีวิธีจัดการแปลงคำสั่งเหล่านี้ให้แสดงผลให้ถูกต้องด้วย libary 2 ตัว นั่นคือ

• html2md
• flutter_html_view

ไม่ระบุ version นะครับ ลองไปค้นดู เพราะ version update เรื่อยๆ

Step1 ; เพิ่ม dependency ที่ pubspec.ymal

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2

  html2md: ^0.2.1
  flutter_markdown: ^0.2.0

สั่ง get dependency ให้เรียบร้อย

Step2 ; import เข้ามาใช้งานในหน้า Page

import 'package:html2md/html2md.dart' as html2md;
import 'package:flutter_markdown/flutter_markdown.dart';

Step3 ; เอาค่าที่ได้จาก API หรือ HTML มาแปลงเป็น Markdown ก่อน

var md = html2md.convert(item['body']);

Step4 ; แสดงผล

MarkdownBody(data: md)

หรือทำรวดเดียวเลยก็ได้

MarkdownBody(data: html2md.convert(item['body']))

ลองนำไปประยุกต์ใช้กันดูนะครับ