Skip to main content

Flutter Load Local HTML File in WebViewWidget

Flutter WebView upgrades into WebViewWidget. In today's tutorial we will learn about loading local HTML and CSS file into WebViewWidget. With this method we can load entire HTML website template from local assets folder. This will not required active internet connection If we place all the images also locally.

Flutter Load Local HTML File in WebViewWidget

1. In the first step we have to Install WebViewWidget Pub package in our flutter project. I have already made tutorial regarding this topic. You can VISIT IT FROM HERE.
2. Creating a test HTML file index-first.html . I am putting demo HTML code in this file for testing purpose.

<HTML>
 
  <HEAD> 
   
  <style>
   
  body {
      background-color: #00BCD4;
  }
  h1 {
      color: #fff;
  }
  p {
      color: #fff;
  }
   
  </style>
   
  <TITLE> Testing Local Web Page in Flutter WebView </TITLE>
   
  </HEAD>
   
  <BODY>
<div>
  <h1 style="font-size:10vw;" >This is Heading H1</h1>
  <h2 style="font-size:10vw;" >This is Heading H2</h2>
  <h3 style="font-size:10vw;">This is Heading H3</h3>
  <p style="font-size:5vw;" >Sample Paragraph Text.</p>
  <div>
    <h1 style="font-size:10vw;">Heading Tag Inside DIV</h1>
    <p style="font-size:5vw;"><strong>Bold Text</strong> in HTML.</p>
    <p style="color: red">Below is List View in HTML</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p style="font-size:5vw;">Img tag in HTML for Showing Image</p>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNSWovS91U5EyeIG-SILt_votSAbPM8ZfFubEZC_Wb-zCL5a9YP-qigWiJs3Bjle45KwIEc_Jhxb9HA_UzH0WLAtaRXKiPRrUrlIURgwfIoex4qfcEed839tE3aLl2yBrK1uHNCyGjdkEM6oEUUCyhYmMEhuuCYlhj_FHBdG8hr97otfM_GGKriiF6qxA/s16000/flutter-app.png'>
  </div>
  </div>
  </BODY>
  </HTML>
3. After creating index-first.html file we will put this file into flutter_project->assets->webpage folder.
Local HTML File location in flutter project
4. Now we have to add assets/webpage/ folder location into pubspec.yaml file. So we can access this path in our project anywhere. Open your flutter project's pubspec.yaml file in code editor and put assets/webpage/ path under assets section.
  assets:
    - assets/images/
    - assets/webpage/
    - google_fonts/
Source code of our pubspec.yaml file:

name: myapp
description: A new Flutter project.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev
version: 1.0.0+1

environment:
  sdk: '>=3.0.5 <4.0.0'
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

  cupertino_icons: ^1.0.2
  url_launcher: ^6.1.12
  flutter_widget_from_html_core: ^0.10.3
  google_fonts: ^5.1.0
  blinking_text: ^1.0.2
  youtube_player_flutter: ^8.1.2
  webview_flutter: ^4.2.2

dev_dependencies:
  intl: ^0.18.0-nullsafety.2
  flutter_test:
    sdk: flutter

  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

  assets:
    - assets/images/
    - assets/webpage/
    - google_fonts/
5. All the folder and file settings are now completed. Open flutter project's main.dart file and import material.dart and webview_flutter.dart file.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
6. Defining controller for WebViewWidget.
  late final controller;
7. Defining a String variable with Local HTML File Path.
String filePathHTML = 'assets/webpage/index-first.html';
8. Creating initState() inbuilt function and here we will assign local html path to WebViewWidget controller.
  @override
  void initState() {
    super.initState();
    controller = WebViewController();
    controller.loadFlutterAsset(filePathHTML);
  }
9. Call WebViewWidget with Controller in our widget build area.
WebViewWidget(controller: controller)
Complete source code for main.dart file:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: MyApp()));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  String filePathHTML = 'assets/webpage/index-first.html';
  late final controller;

  @override
  void initState() {
    super.initState();
    controller = WebViewController();
    controller.loadFlutterAsset(filePathHTML);
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: WebViewWidget(controller: controller));
  }
}
Screenshot:
Flutter Load Local HTML File in WebViewWidget
Labels:

Comments

Post a Comment