Flutter WebView : design TabBar, final step

In our previous section we have seen how we can use Flutter WebView widget with TabBar.

However, you’ve probably noticed that the TabBar design is not up to the mark. In addition, we cannot display the application’s title as we wanted to do.

Therefore, in this section we will work on them. 

Let’s see the previous image where we’ve not added any design to our TabBar.

How did it look?

Let’s see.

Compared to the previous image, we have changed the design of the TabBar a little bit.

Now the title places itself in the centre.

Moreover, the tabs are now in white and bold. Therefore, user can read them easily.

We can manage the design in many ways. We could have extracted a common text widget and passed the string and style as class constructor.

However, we have hard coded it for a while just to understand the workflow.

Let’s see the code of dashboard home widget where every magic happens.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_today/view/beginner.dart';
import 'package:flutter_today/view/dart_home.dart';
import 'package:flutter_today/view/flutter_apps.dart';
import 'package:flutter_today/view/intermediate.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:webview_flutter/webview_flutter.dart';
import '../view/home_page.dart';

class DashBoardHome extends StatefulWidget {
  const DashBoardHome({
    Key? key,
  }) : super(key: key);

  @override
  State<DashBoardHome> createState() => _DashBoardHomeState();
}

class _DashBoardHomeState extends State<DashBoardHome>
    with SingleTickerProviderStateMixin {
  final controller = Completer<WebViewController>();
  TabController? _tabController;

  final List<Tab> topTabs = <Tab>[
    Tab(
      iconMargin: const EdgeInsets.only(bottom: 10.0),
      child: Text(
        'HOME',
        textAlign: TextAlign.center,
        style: GoogleFonts.lato(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
    Tab(
      child: Text(
        'BEGINNERS',
        textAlign: TextAlign.center,
        style: GoogleFonts.lato(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
    Tab(
      child: Text(
        'INTERMEDIATE',
        textAlign: TextAlign.center,
        style: GoogleFonts.lato(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
    Tab(
      child: Text(
        'FLUTTER APPS',
        textAlign: TextAlign.center,
        style: GoogleFonts.lato(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
    Tab(
      child: Text(
        'DART',
        textAlign: TextAlign.center,
        style: GoogleFonts.lato(
          fontSize: 20.0,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
      ),
    ),
  ];

  @override
  void initState() {
    _tabController =
        TabController(length: topTabs.length, initialIndex: 0, vsync: this)
          ..addListener(() {
            setState(() {});
          });

    super.initState();
  }

  Future<bool> _onWillPop() async {
    if (_tabController?.index == 0) {
      await SystemNavigator.pop();
    }

    Future.delayed(const Duration(microseconds: 100), () {
      _tabController?.index = 0;
    });

    return _tabController?.index == 0;
  }

  final _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(5.0),
      child: WillPopScope(
        onWillPop: _onWillPop,
        child: Scaffold(
          key: _scaffoldKey,
          appBar: AppBar(
            title: Text(
              'Flutter Today',
              textAlign: TextAlign.center,
              style: GoogleFonts.laila(
                fontSize: 30.0,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            centerTitle: true,

            //backgroundColor: Colors.grey[400],
            flexibleSpace: Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Colors.pink,
                    Colors.grey,
                  ],
                  begin: Alignment.topRight,
                  end: Alignment.bottomRight,
                ),
              ),
            ),
            elevation: 20,
            titleSpacing: 60,
            bottom: TabBar(
              isScrollable: true,
              indicatorColor: Colors.red,
              indicatorWeight: 10,
              controller: _tabController,
              tabs: topTabs,
            ),
          ),
          body: TabBarView(
            controller: _tabController,
            children: [
              /// all categories displayed on tabs
              ///
              HomePage(webViewController: controller),
              Beginner(webViewController: controller),
              Intermediate(webViewController: controller),
              FlutterApps(webViewController: controller),
              DartHome(webViewController: controller),
            ],
          ),
        ),
      ),
    );
  }

  IconButton buildIcons(Icon icon) {
    return IconButton(
      onPressed: () {},
      icon: icon,
    );
  }
}

We have highlighted those parts where we have modified the design.

If you want to clone this part, please visit this GitHub repository branch.