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

wave
มานพ กองอุ่น 23 พ.ย. 2018 09:54:06 1,749

ปัญหาหนึ่งที่เจอ เนื่องจากใน 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']))

 

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


ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com

เขียนบทเรียนรู้ของคุณ

รายละเอียด
  • ดู 1,749
  • รักเลย 0
  • หมวดหมู่ Flutter
  • เขียนเมื่อ
  • แก้ไขเมื่อ
  • Tags flutter markdown html
ข้อมูลผู้เขียน
มานพ กองอุ่น

มานพ กองอุ่น

เป็นสมาชิกเมื่อ: 18 ธ.ค. 2009