Làm thế nào để render HTML CSS dưới dạng Flutter widget?

Có cách nào để hiển thị HTML, CSS dưới dạng flutter widget hay không? 

Môi trường

dart, flutter

Giải pháp

Có nhiều cách để render HTML, CSS trong flutter widget. Ở đây mình dùng package flutter_html, hãy làm theo các bước sau: 

Thêm phần code dưới đây trong pubspec.yaml:

dependencies:
  flutter_html: ^1.1.0

Và dưới đây là một ví dụ mẫu:

Container(
   child: Html(
      data: """
         <div>
            <h1>Demo Page</h1>
            <p>This is a fantastic product that you should buy!</p>
            <h3>Features</h3>
            <ul>
                <li>It actually works</li>
                <li>It exists</li>
                <li>It doesn't cost much!</li>
             </ul>
          <!--You can pretty much put any html in here!-->
          </div>
      """,
      padding: EdgeInsets.all(8.0),
      onLinkTap: (url) {
          print("Opening $url...");
      },
   ),
)

Các HTML tags được hỗ trợ:

a, abbr, acronym, address, article, aside, b, bdi, bdo, big, blockquote, body, br, caption, cite, code, data, dd, del, dfn, div, dl, dt, em, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, i, img, ins, kbd, li, main, mark, nav, noscript, ol, p, pre, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, template, tfoot, th, thead, time, tr, tt, u, ul, var

Từ khóa

How to show html string in text widget flutter