web_browser 0.7.4 copy "web_browser: ^0.7.4" to clipboard
web_browser: ^0.7.4 copied to clipboard

A web browser widget. Unlike webview_flutter, comes with cross-platform navigation and URL sharing widgets. Works in Android, iOS, browsers, and other platforms.

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.

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:

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.

69
likes
140
pub points
89%
popularity

Publisher

verified publisherdint.dev

A web browser widget. Unlike webview_flutter, comes with cross-platform navigation and URL sharing widgets. Works in Android, iOS, browsers, and other platforms.

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache-2.0 (license)

Dependencies

cupertino_icons, flutter, share_plus, webview_flutter, webview_flutter_android, webview_flutter_web, webview_flutter_wkwebview

More

Packages that depend on web_browser