How to load Html Content in Flutter

Published February 25, 2020

In this post we are going to learn how to display html content in flutter.
For this we are going to use flutter_html plugin

Let's start

Step 1: Create Flutter Application

Step 2: Add dependencies 

Add required dependencies in pubspec.yaml file

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_html: ^0.11.1

 

Step 3: Create dart file and add below code

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter/material.dart';

class LoadHtml extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Render HTML data')),
      body: Center(
        child: SingleChildScrollView(
          child: Html(padding: EdgeInsets.all(12.0), data: """
            <div class="col-lg-4">
                <div class="homepage__icon" aria-hidden="true"><img src="https://flutter.dev/assets/homepage/icon-ui-5917d09ef0d8f9538615b4281870960b865bba4c8b6926b5adaef91433af0b07.svg" integrity="sha256-WRfQnvDY+VOGFbQoGHCWC4ZbukyLaSa1ra75FDOvCwc=" crossorigin="anonymous"></div>

                <h2>Expressive, beautiful UIs</h2>

                <p>
                Delight your users with Flutter's built-in
                beautiful Material Design and
                Cupertino (iOS-flavor) widgets, rich motion APIs,
                smooth natural scrolling, and platform awareness.
                </p>

                <a href="/docs/development/ui/widgets/catalog">Browse the widget catalog</a>
            </div>
            """),
        ),
      ),
    );
  }
}

 

Step 4: Updae main.dar file

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: LoadHtml(),
    );
  }

}

 

 

Step 5: Let's run application

Flutter Load Html content

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

9162 Views