How to save website for offline in flutter mobile

Saving Websites for Offline in Flutter

This article will guide you through the process of saving websites for offline use in your Flutter mobile applications.

Understanding the Approach

To enable offline access to websites in Flutter, we will leverage the power of the html and webview_flutter packages. Here’s how it works:

1. Rendering the Website with WebView

The webview_flutter package allows you to embed webviews within your Flutter application. This lets you display the desired website directly in your app.

2. Saving the HTML Content

Using the html package, we’ll parse the HTML content of the website. This allows us to extract and store the relevant data for offline access.

Implementation Steps

1. Set up the Packages

Add the following packages to your pubspec.yaml file:

dependencies:
  webview_flutter: ^3.0.0
  html: ^0.16.0

Then, run flutter pub get to install the packages.

2. Create the WebView Widget

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

class WebViewScreen extends StatefulWidget {
  final String url;

  const WebViewScreen({Key? key, required this.url}) : super(key: key);

  @override
  State createState() => _WebViewScreenState();
}

class _WebViewScreenState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Website Viewer')),
      body: WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

3. Extract and Save HTML Content

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:html/parser.dart';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

class OfflineWebsiteSaver extends StatefulWidget {
  final String url;

  const OfflineWebsiteSaver({Key? key, required this.url}) : super(key: key);

  @override
  State createState() => _OfflineWebsiteSaverState();
}

class _OfflineWebsiteSaverState extends State {
  String? htmlContent;

  @override
  void initState() {
    super.initState();
    _fetchAndSaveHtml();
  }

  Future _fetchAndSaveHtml() async {
    try {
      final response = await http.get(Uri.parse(widget.url));
      if (response.statusCode == 200) {
        final document = parse(response.body);
        htmlContent = document.outerHtml;

        final appDocDir = await getApplicationDocumentsDirectory();
        final file = File('${appDocDir.path}/offline_website.html');
        await file.writeAsString(htmlContent!);
        print('Website saved successfully!');
      } else {
        print('Failed to fetch the website');
      }
    } catch (e) {
      print('Error fetching website: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Offline Website')),
      body: Center(
        child: htmlContent != null
            ? Text('Website saved successfully!')
            : const CircularProgressIndicator(),
      ),
    );
  }
}

4. Loading the Saved Content

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';
import 'package:webview_flutter/webview_flutter.dart';

class OfflineWebViewScreen extends StatefulWidget {
  @override
  State createState() => _OfflineWebViewScreenState();
}

class _OfflineWebViewScreenState extends State {
  String? htmlContent;

  @override
  void initState() {
    super.initState();
    _loadSavedHtml();
  }

  Future _loadSavedHtml() async {
    try {
      final appDocDir = await getApplicationDocumentsDirectory();
      final file = File('${appDocDir.path}/offline_website.html');
      htmlContent = await file.readAsString();
    } catch (e) {
      print('Error loading saved HTML: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Offline Website')),
      body: htmlContent != null
          ? WebView(
              initialUrl: 'data:text/html;base64,${base64Encode(utf8.encode(htmlContent!))}',
              javascriptMode: JavascriptMode.unrestricted,
            )
          : const Center(child: CircularProgressIndicator()),
    );
  }
}

5. Handling File Storage

The code above uses getApplicationDocumentsDirectory() to store the saved HTML file in the app’s document directory, ensuring it’s not deleted by the system.

Comparison Table

Conclusion

By using webview_flutter and html packages, you can effectively save websites for offline access in Flutter apps. This approach allows users to view web content even when they’re not connected to the internet, enhancing the user experience and adding value to your application.