Overview #

Browser is a Flutter widget for browsing websites.

• Works in Android, iOS, and browsers. Various cross-platform differences are handled correctly by the package so you don't need to deal with details of the underlying webview_flutter. You can still access
• Has a customizable top bar that displays the domain so that end-users have some protection against phishing websites.
• Has customizable bottom bar with buttons for "back", "forward", "refresh", and URL sharing.
• Displays website loading error messages using Flutter widgets. The errors look nicer and are easier to decipher by non-technical users.

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

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.cn/',
        ),
      ),
    ),
  ));
}

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:

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.cn/',
          controller: BrowserController(
            // "User-Agent" HTTP header.
            userAgent: 'Your user agent',
            
            // Can user zoom into the content? Default is true.
            isZoomingEnabled: false,
          )
        ),
      ),
    ),
  ));
}

Cache clearing #

For privacy reasons, the package clears persistent state every now and then. This includes:

• Cookies
• Caches
• Local storage

You can disable this behavior in your main function:

import 'package:web_browser/web_browser.dart';

void main() {
  // Disables clearing when the app is started
  BrowserController.resetGlobalStateAtStart = false;
  
  // Disables expiration.
  BrowserController.globalStateExpiration = null;
}

Accessing WebViewController #

To access WebViewController by using browserController.webViewController.