dint-dev/web_browser

Pub Package Github Actions CI

Overview

The package gives you Browser, a Flutter widget for displaying web pages.

The package is built on top of webview_flutter and it adds navigation widgets that:

• Display the domain.
• Allow user to tap "back", "forward", "refresh", or share the URL using a native dialog of each platform.
• Display website loading error messages in a visually pleasant and easy-to-understand way.

Browser has been tested in Android, iOS, and browsers. By adding relevant "webview_flutter" plugin dependencies to your "pubspec.yaml", you can use this package in Windows, Mac OS X, and Linux too.

Licensed under the Apache License 2.0.

Links

• Github project
• Issue tracker
• API Reference

Setting up

1.Setup

In pubspec.yaml:

dependencies:
  web_browser: ^0.7.4

2.Display web browser

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

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Browser(
          initialUriString: 'https://flutter.dev/',
        ),
      ),
    ),
  ));
}

Manual

Default designs

The package contains two designs, Cupertino (web_browser.cupertino) and Material (web_browser.material). By default, the package chooses a Cupertino or Material design based on whether the app is CupertinoApp or MaterialApp. You can override the defaults by using relevant parameters of Browser() constructor.

The Cupertino and Material navigation bars look like this:

https://raw.githubusercontent.com/dint-dev/web_browser/HEAD/screenshots/cupertino.png

https://raw.githubusercontent.com/dint-dev/web_browser/HEAD/screenshots/material.png

Localization

Use BrowserLocalizations to localize the widgets.

void main() {
  runApp(MaterialApp(
    localizations: [
      ...browserLocalizationsList,
      // ...
    ],
    // ...
  ));
}

final browserLocalizationsList = [
  // Spanish localization
  BrowserLocalizations.forLocale(
    locale: Locale('es'),
    load: (locale) async => BrowserLocalizations(
      couldNotReach: 'No se pudo acceder al sitio web.',
      // ...
    ),
  ),
];

Setting various parameters

You can give various parameters to Browser:

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

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Browser(
          initialUriString: 'https://flutter.dev/',
          controller: BrowserController(
            // "User-Agent" HTTP header.
            userAgent: 'Your user agent',
            
            // Can user zoom into the content? Default is true.
            isZoomingEnabled: false,
          )
        ),
      ),
    ),
  ));
}

Cache clearing

For end-users privacy, it is good to clear:

• Cookies
• Caches
• Local storage

You can enable this by setting:

import 'package:web_browser/web_browser.dart';

void main() {
  // Clear when the app is started
  BrowserController.resetGlobalStateAtStart = true;
  
  // Clear every now and then.
  BrowserController.globalStateExpiration = const Duration(days: 1);
  
  // ...
}

Accessing WebViewController

To access WebViewController by using browserController.webViewController.