Flutter Web Browser Tutorial: A Comprehensive Guide for Beginners

To create a web browser with multi-tab support and bookmark functionality using Flutter and SQLite, you will need to follow a series of steps. This comprehensive tutorial will provide you with detailed guidance throughout the entire process. We will utilize the powerful webview_flutter package to incorporate web browsing capabilities into our browser application.

Additionally, for efficient management of data, we will leverage the sqflite package, which provides seamless integration with SQLite for performing various database operations.

By following this tutorial, you will not only gain a solid understanding of how to build a web browser using Flutter and SQLite, but you will also acquire valuable insights into the underlying concepts and principles involved in the development process.

Prerequisites

• Basic understanding of Flutter and Dart.
• Flutter environment set up on your machine.

Step 1: Setting Up the Project

Create a new Flutter project:

flutter create flutter_web_browser

Add dependencies in your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^3.0.0
  sqflite: ^2.0.0+4
  path_provider: ^2.0.8

Run flutter pub get to install the packages.

Step 2: Database Setup for Bookmarks

Create a new Dart file database_helper.dart.

Set up the SQLite database for storing bookmarks:

import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:io';
import 'package:path/path.dart';

class DatabaseHelper {
  static final _dbName = 'myDatabase.db';
  static final _dbVersion = 1;
  static final _tableName = 'bookmarks';

  static final columnId = '_id';
  static final columnTitle = 'title';
  static final columnUrl = 'url';

  // Making it a singleton class.
  DatabaseHelper._privateConstructor();
  static final DatabaseHelper instance = DatabaseHelper._privateConstructor();

  static Database? _database;
  Future<Database> get database async {
    if (_database != null) return _database!;
    _database = await _initiateDatabase();
    return _database!;
  }

  _initiateDatabase() async {
    Directory directory = await getApplicationDocumentsDirectory();
    String path = join(directory.path, _dbName);
    return await openDatabase(path, version: _dbVersion, onCreate: _onCreate);
  }

  Future _onCreate(Database db, int version) {
    return db.execute('''
      CREATE TABLE $_tableName (
        $columnId INTEGER PRIMARY KEY,
        $columnTitle TEXT NOT NULL,
        $columnUrl TEXT NOT NULL
      )
    ''');
  }

  // Helper methods for CRUD operations.
}

Add CRUD operations for bookmarks in DatabaseHelper.

Step 3: Building the UI

1. In your main.dart, create the main app structure.
2. Implement a bottom navigation bar for tab management.
3. Use WebView widget from webview_flutter to display web pages.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'database_helper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Web Browser',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Browser(),
    );
  }
}

class Browser extends StatefulWidget {
  @override
  _BrowserState createState() => _BrowserState();
}

class _BrowserState extends State<Browser> {
  int _currentIndex = 0;
  final List<WebView> _tabs = [WebView(initialUrl: 'https://www.example.com')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web Browser'),
      ),
      body: _tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Tab ${_currentIndex + 1}',
          ),
          // Add more tabs here
        ],
        onTap: (index) {
          // Handle tab change
        },
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          // Handle new tab addition
        },
      ),
    );
  }
}

Implement the logic to handle tab changes and adding new tabs.

Handle tab management

Handling new tabs in the Flutter web browser app involves dynamically managing a list of WebView widgets and updating the UI accordingly. We'll modify the _BrowserState class to handle the addition of new tabs and switching between them.

Here's how you can implement this functionality:

Step 1: Update the Browser State

First, update the _BrowserState class to handle multiple tabs. This involves updating the _tabs list and the _currentIndex.

class _BrowserState extends State<Browser> {
  int _currentIndex = 0;
  List<WebView> _tabs = [WebView(initialUrl: 'https://www.example.com')];

  void _addNewTab() {
    setState(() {
      _tabs.add(WebView(initialUrl: 'https://www.example.com'));
      _currentIndex = _tabs.length - 1;
    });
  }

  void _changeTab(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web Browser'),
      ),
      body: IndexedStack(
        index: _currentIndex,
        children: _tabs,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        items: List.generate(_tabs.length, (index) {
          return BottomNavigationBarItem(
            icon: Icon(Icons.web),
            label: 'Tab ${index + 1}',
          );
        }),
        onTap: _changeTab,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: _addNewTab,
      ),
    );
  }
}

Step 2: IndexedStack for Tab Management

Notice the use of IndexedStack in the body of the Scaffold. IndexedStack is used to stack the web views but only display the one corresponding to _currentIndex. This way, all tabs are kept in the widget tree, maintaining their state.

Step 3: Bottom Navigation for Tab Switching

The BottomNavigationBar is dynamically generated based on the number of tabs in the _tabs list. Each time a new tab is added, the bottom navigation bar updates with a new item. Tapping on these items switches between the tabs.

Step 4: Adding a New Tab

The floating action button's onPressed method calls _addNewTab(). This method adds a new WebView to the _tabs list and sets it as the current tab.

Creating a bookmarking options

To create and add new bookmarks to the SQLite database and review them in another view in your Flutter web browser app, you need to expand your DatabaseHelper class with methods for adding and retrieving bookmarks. You'll also need to create a new view for displaying bookmarks.

Step 1: Expanding the DatabaseHelper Class

1. Update the DatabaseHelper class to include methods for adding and retrieving bookmarks:

import 'package:sqflite/sqflite.dart';
// ... other imports

class DatabaseHelper {
  // ... existing code

  // Method to add a bookmark
  Future<int> addBookmark(String title, String url) async {
    Database db = await database;
    return await db.insert(_tableName, {
      columnTitle: title,
      columnUrl: url
    });
  }

  // Method to fetch all bookmarks
  Future<List<Map<String, dynamic>>> getBookmarks() async {
    Database db = await database;
    return await db.query(_tableName);
  }
}

Step 2: Creating the Bookmark View

Create a new Dart file for the bookmarks view, e.g., bookmarks_view.dart.

In bookmarks_view.dart, create a stateful widget that displays a list of bookmarks:

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

class BookmarksView extends StatefulWidget {
  @override
  _BookmarksViewState createState() => _BookmarksViewState();
}

class _BookmarksViewState extends State<BookmarksView> {
  late Future<List<Map<String, dynamic>>> bookmarks;

  @override
  void initState() {
    super.initState();
    bookmarks = DatabaseHelper.instance.getBookmarks();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bookmarks'),
      ),
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: bookmarks,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                var bookmark = snapshot.data![index];
                return ListTile(
                  title: Text(bookmark['title']),
                  subtitle: Text(bookmark['url']),
                  // Add onTap or other functionality
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

Step 3: Integrating Bookmark Functionality in the Main Browser View

Add a way to save the current webpage as a bookmark. You might want to use the AppBar's actions for this purpose:

appBar: AppBar(
  title: Text('Flutter Web Browser'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.bookmark),
      onPressed: () async {
        // Assume you have the current webpage's title and URL
        String title = "Current Webpage Title"; // Replace with actual title
        String url = "https://currentwebpage.com"; // Replace with actual URL

        await DatabaseHelper.instance.addBookmark(title, url);
        // Optionally, show a confirmation message
      },
    ),
  ],
),

Add a button or another way to navigate to the BookmarksView to see the list of bookmarks.

Step 4: Running the App

Run your app and test the bookmark functionality. Ensure you can add bookmarks and view them in the bookmarks view.

Final Note

This tutorial provides a basic structure for building a web browser with Flutter. Enhance the project by adding features like history tracking, UI customization, and performance optimization. Test thoroughly for compatibility. Add multiple tab support, customize tab behavior, and handle bookmarks with a SQLite database.