Flutter official WebView can do such an amazing things and one of them is Loading local HTML files directly into its WebView screen. Sometimes flutter developer have to display HTML files online from server but they took time to load every time from internet even though some of them is same always. So using the WebView local HTML page loading functionality we can easily show HTML files placed inside app. So in this tutorial we would Flutter Load Local HTML File Placed in Assets Folder Android iOS Example Tutorial.
Contents in this project Flutter Load Local HTML File Placed in Assets Folder Android iOS Example Tutorial:
1. The main step before getting started for coding is to create a HTML file. I am creating a HTML file named as TestPage.html . Below is the source code for TestPage.html file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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> <H1> THIS IS SAMPLE HEADING IN WEBPAGE. </H1> <p> Sample Paragraph Tag Text in HTML File. Here we are Testing Local HTML File in Flutter Dart Application. </p> </BODY> </HTML> |
2. Now create a folder named as assets in your flutter project folder.
3. Put the TestPage.html file inside assets folder.
4. Now before start coding we have to install the official WebView plugin in your Flutter project. We have to manually install this plugin. So open your flutter project folder and open pubspec.yaml file in any code editor.
5. Find dependencies line and put webview_flutter: ^0.3.19+7 just after it.
|
1 2 3 4 |
dependencies: webview_flutter: ^0.3.19+7 flutter: sdk: flutter |
6. Find the Flutter section and now we have to put our Assets folder path here with HTML file. In current tutorial we are creating a HTML file named as TestPage.html and putting the file inside Assets folder.
|
1 2 3 |
flutter: assets: - assets/TestPage.html |
7. Complete Source code of my pubspec.yaml file after making all the above changes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
name: project description: A new Flutter project. version: 1.0.0+1 environment: sdk: ">=2.1.0 <3.0.0" dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 dev_dependencies: webview_flutter: ^0.3.19+7 flutter_test: sdk: flutter # For information on the generic Dart part of this file, see the # following page: https://dart.dev/tools/pub/pubspec # The following section is specific to Flutter. flutter: assets: - assets/TestPage.html # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true |
8. Save the pubspec.yaml file. Now open the flutter project root directory in Command Prompt or Terminal and execute flutter pub get command like i did in below screenshot. This step is very important because using this command flutter will download the latest version of WebView package and install in our flutter project.
9. Now all the changes and configuration has been done. It’s time to start coding for app. So open your project’s main.dart file and import material.dart, webview_flutter.dart, services.dart and convert package in your app.
|
1 2 3 4 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'package:flutter/services.dart'; import 'dart:convert'; |
10. Create void main runApp() method and here we would download our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
11. Create our main MyApp class extends with StatelessWidget. In this class we would call our next WebViewLoad() class.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewLoad() ) ); } } |
12. Create a class named as WebViewLoad extends State full widget. In this class we would make createState() method of State and enable states in WebViewLoadUI class.
|
1 2 3 4 5 |
class WebViewLoad extends StatefulWidget { WebViewLoadUI createState() => WebViewLoadUI(); } |
13. Create a class named as WebViewLoad extends with State. This is our main class.
|
1 2 3 4 |
class WebViewLoadUI extends State<WebViewLoad>{ } |
14. We are using WebView widget’s component WebViewController here to perform certain task here.
|
1 |
WebViewController webViewController; |
15. Create a String named as htmlFilePath and assign HTML file path inside it.
|
1 |
String htmlFilePath = 'assets/TestPage.html'; |
16. Create a ASYNC function named as loadLocalHTML(). Inside this function we would call above HTML file path and decode the HTML file and ready the file to display on device screen. We have to encode the file inot utf-8 format in order to display on screen.
|
1 2 3 4 5 6 7 |
loadLocalHTML() async{ String fileHtmlContents = await rootBundle.loadString(htmlFilePath); webViewController.loadUrl(Uri.dataFromString(fileHtmlContents, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')) .toString()); } |
17. Creating WebView widget with onWebViewCreated() event management property. Here we would call our loadLocalHTML() function.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Load Local HTML File in WebView')), body: WebView( initialUrl: '', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController tmp) { webViewController = tmp; loadLocalHTML(); }, ), ); } |
18. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; import 'package:flutter/services.dart'; import 'dart:convert'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: WebViewLoad() ) ); } } class WebViewLoad extends StatefulWidget { WebViewLoadUI createState() => WebViewLoadUI(); } class WebViewLoadUI extends State<WebViewLoad>{ WebViewController webViewController; String htmlFilePath = 'assets/TestPage.html'; loadLocalHTML() async{ String fileHtmlContents = await rootBundle.loadString(htmlFilePath); webViewController.loadUrl(Uri.dataFromString(fileHtmlContents, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')) .toString()); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Load Local HTML File in WebView')), body: WebView( initialUrl: '', javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController tmp) { webViewController = tmp; loadLocalHTML(); }, ), ); } } |
Screenshot:
Bonjour,
Serait-il possible d’avoir le projet Flutter complet car j’ai un problème avec mon terminal pour faire l’import ?
Merci d’avance
Yes Selie i can send you my complete flutter project, Send me your email address.
[email protected]
Thanks
I followed the same process and code but i get error in PrerollContext and PaintContext embedding in ios simulator. Would appretiate your help if you have the solution.
Tshering lhamo did you put the webview_flutter: ^0.3.19+7 flutter package name in pubspec.yaml file and execute flutter pub get command after that ?
Can you send me the complete flutter project?
Yes, I will send me your Email .
Hi, please send me too
[email protected]
Thank You
how can load html asset file when i use flutter web.
because flutter wed don’t support flutter webview
please how want to load a local html file but flutter web doesn’t support WebView how can i achieve it.
i m using web platform