In this tutorial I am going to explain you that how you can create a simple light weight browser for your mobile device and avoid using other browsers that may be storing some of your data. To do so, we will use Flutter framework with flutter_webview_plugin.

Lets go step by step and develop a very simple browser with very minimal user interface and basic functionality.

Step 1:

Make sure you have Flutter properly installed.

Step 2:

Setup a flutter project in your desired directory.

Step 3:

To verify that everything is so far working fine run the project you have created.

Step 4:

Remove all the content from main.dart file and replace it with:

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

void main() {
  runApp(
    MaterialApp(
      home: Browser(),
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
    ),
  );
}

Step 5:

Create a new file browser.dart inside the lib folder.

Step 6:

Open pubspec.yaml file and add dependency by running command flutter pub add flutter_webview_plugin in project terminal.

Step 7:

Create a stateful widget inside browser.dart file. and initialise following variables:

TextEditingController textEditingController = TextEditingController();
FlutterWebviewPlugin flutterWebviewPlugin = FlutterWebviewPlugin();
var urlString = "https://www.google.com";
var urls = ["https://www.google.com"];
var linkscounter = 0;

Step 8:

Inside the Build function return WebviewScaffold.

Inside WebviewScaffold pass arguments: appbar, url, and bottomNavigationBar.

Step 9:

Inside appbar you'll pass it as:

appBar: AppBar(
        title: TextField(
          autofocus: false,
          controller: textEditingController,
          cursorColor: Colors.white,
          cursorWidth: 0.3,
          textInputAction: TextInputAction.go,
          onSubmitted: (url) => launchUrl(),
          style: TextStyle(
            color: Colors.white,
          ),
          decoration: InputDecoration(
            border: InputBorder.none,
            hintText: "Enter URL Here",
            hintStyle: TextStyle(color: Colors.white),
          ),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () => launchUrl(),
          ),
          IconButton(
            icon: Icon(Icons.settings_backup_restore_outlined),
            onPressed: () {
              setState(
                () {
                  urlString = textEditingController.text;
                  flutterWebviewPlugin.reloadUrl(urlString);
                },
              );
            },
          ),
        ],
      ),

Inside app bar I've added a textfield for url input, search and reload page buttons. LaunchUrl function contains url validation and loads the website. LaunchUrl function is as follows:

launchUrl() {
    setState(
      () {
        RegExp urlExp1 = RegExp(
            r"(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?");
        RegExp urlExp2 = RegExp(
            r"[\w-]+(\.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?");
        if (urlExp1.hasMatch(textEditingController.text)) {
          urlString = textEditingController.text;
        } else if (urlExp2.hasMatch(textEditingController.text)) {
          urlString = "https://" + textEditingController.text;
        } else {
          urlString = "https://www." + textEditingController.text;
        }
        textEditingController.text = urlString;

        flutterWebviewPlugin.reloadUrl(urlString);
        urls.add(urlString);
        ++linkscounter;
      },
    );
  }

Step 10:

After ending appbar pass following arguments

url: urlString,
clearCache: true,
withZoom: true,
supportMultipleWindows: true,

Step 11:

Create a Bottom navigation bar containing forward, back and exit buttons as below:

bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () {
                setState(
                  () {
                    urlString = urls[--linkscounter];
                    flutterWebviewPlugin.reloadUrl(urlString);
                    textEditingController.text = urlString;
                  },
                );
              },
            ),
            IconButton(
                icon: Icon(Icons.arrow_forward),
                onPressed: () {
                  setState(
                    () {
                      urlString = urls[++linkscounter];
                      flutterWebviewPlugin.reloadUrl(urlString);
                      textEditingController.text = urlString;
                    },
                  );
                }),
            IconButton(
              icon: Icon(Icons.power_settings_new_outlined),
              onPressed: () {
                SystemNavigator.pop();
              },
            )
          ],
        ),
      ),

Hurrah! your basic flutter based Browser application is ready.

Get full code here.

If you liked the content share it. Also follow on social media for more insightful content.