web_browser 0.6.0

A cross-platform Flutter widget for displaying websites and other web content. Has optional navigation buttons.

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