Overview #

Browser is a Flutter widget for browsing websites in Android, iOS, and browsers. It's provides all sorts of functionality on top of the standard webview_flutter (by Flutter team), including:

• Back / forward / refresh buttons
• Address displaying bar.
• Various other UI features.
• Frees you from thinking various cross-platform differences and security issues. For example, we have paid attention to how to make users notice phishing attack URLs. Unless the app is running inside browser, we show suffix of the current domain above the content.

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

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: WebBrowser(
          initialUrl: 'https://flutter.cn/',
          policy: BrowserPolicy(
            allowedDomains: {
              // Allow navigation to "flutter.dev" and any subdomain.
              // Other websites will be opened in the user's browser.
              '**.flutter.dev',

              // And some other websites...
              '**.dart.dev',
              '**.youtube.com',
            },
          )
        ),
      ),
    ),
  ));
}

Designs available in this package #

Material design #

• MaterialBrowserTopBar
• MaterialBrowserBottomBar with:
  • MaterialBrowserBackButton
  • MaterialBrowserForwardButton
  • MaterialBrowserRefreshButton

Cupertino design #

• CupertinoBrowserTopBar
• CupertinoBrowserBottomBar with:
  • CupertinoBrowserBackButton
  • CupertinoBrowserForwardButton
  • CupertinoBrowserRefreshButton

Auto-design (default) #

By default, the package chooses Material or Cupertino design based on whether the app is CupertinoApp or MaterialApp.

Customization #

Top/bottom bars #

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

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: WebBrowser(
          topBar: MaterialBrowserTopBar(
            addressField: MaterialBrowserAddressField(
              trailingButtons: [
                MyHomeButton(),
              ],
            ),
          ),
        ),
      ),
    ),
  ));
}

BrowserController inside the widget subtree #

Widgets inside the top/bottom bars can use the following pattern:

class MyBackButton extends StatelessWidget {
  const MyBackButton({super.key});
  
  @override
  Widget build(BuildContext context) {
    final controller = Browser.of(context).controller;
    return MaterialButton(
      // ...
      onTap: () {
        controller.goBack();
      },
    );
  }
}