
Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang How to Convert HTML Format in Flutter. Flutter HTML adalah sebuah plugin pada flutter yang digunakan untuk merubah format html ke dalam bentuk format text.
Step 1. Tambahkan Dependencies
Tambahkan https://pub.dev/packages/flutter_html/install pada pubspec.yml
dependencies: flutter: sdk: flutter flutter_html: ^2.1.5 |
Step 2. Tambahkan HTML Format
Buat HTML format dengan menambahkan code seperti berikut
final _htmlContent = “”” <div> <h1>The world’s most expensive cars</h1> <img style=’width: 300, height: 200′ src=’https://1cars.org/wp-content/uploads/2021/05/Bugatti-La-Voiture-Noire-800×450.jpeg’ /> <ul> <li>Bugatti La Voiture Noire: 18.68 million</li> <li>Pagani Zonda HP Barchetta: 17.5 million</li> <li>Rolls Royce Sweptail: 13 million</li> <li>Bugatti Centodieci: 9 million</li> <li>Lamborghini Veneno Roadster: 8.3 million</li> </ul> </div> “””; |
Step 3. Tambahkan Style HTML Format
Tambahkan style HTML format dengan menambahkan code seperti berikut
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Colors.blue, ), body: SafeArea( child: SingleChildScrollView( child: Html( data: _htmlContent, // Styling with CSS (not real CSS) style: { ‘h1’: Style( fontSize: FontSize.xxLarge, color: Colors.red ), ‘ul’: Style( margin: EdgeInsets.symmetric(vertical: 20) ) }, ), ), ), ); } |
Hasil Run :
Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂