Flutter Load Local HTML File Placed in Assets Folder Example Tutorial

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.

2. Now create a folder named as assets in your flutter project folder.

3. Put the TestPage.html file inside assets folder.

Flutter Load Local HTML File Placed in Assets Folder Example Tutorial

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.

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.

7. Complete Source code of my pubspec.yaml file after making all the above changes.

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.

10. Create void main runApp() method and here we would download our main MyApp class.

11. Create our main MyApp class extends with StatelessWidget. In this class we would call our next WebViewLoad() class.

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.

13. Create a class named as WebViewLoad extends with State. This is our main class.

14. We are using WebView widget’s component WebViewController here to perform certain task here.

15. Create a String named as htmlFilePath and assign HTML file path inside it.

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.

17. Creating WebView widget with onWebViewCreated() event management property. Here we would call our loadLocalHTML() function.

18. Complete source code for main.dart file:

Screenshot:

Flutter Load Local HTML File Placed in Assets Folder Example Tutorial

6 Comments

  1. 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

  2. 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 ?

  3. Can you send me the complete flutter project?

Leave a Reply

Your email address will not be published. Required fields are marked *