Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

How to load Html Content in Flutter

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


4199 Views

Author: RRTutors

Flutter Questions

Android Questions