How to display webpage title in the App Bar with webview_flutter

Question

Trying to display the title of the webpage in the AppBar using the getTitle() method of webview_flutter.

It seems to work intermittently when the Hot reload is used on the debug bar but when I navigate to another page, it doesn't update.

Here is what I've tried

  @override
  Widget build(BuildContext context) {
    var appBarWebpageTitle = FutureBuilder(
      future: controller.getTitle(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text("${snapshot.data}");
        } else {
          return Text("Loading");
        }
      },
    );
    return Scaffold(
      appBar: AppBar(
        title: appBarWebpageTitle,
        backgroundColor: const Color.fromARGB(255, 0, 0, 0),
        actions: [
          PopupMenuButton(itemBuilder: (context) {
            return [
              const PopupMenuItem<int>(
                value: 0,
                child: Text("Dashboard"),
              ),
            ];
          }, onSelected: (value) {
            if (value == 0) {
              // print("My account menu is selected.");
            }
          }),
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

score 1 · Answer 1 · answered Jul 14 '23 at 09:27

When you navigate to another screen, you must update your Future appBarWebpageTitle because the last Future is already done, and nothing changed. This is a solution:

Change appBarWebpageTitle to a global variable.
Add a listener when the navigation changes, I think you can find it in your WebViewWidget.
Update appBarWebpageTitle = [a new Future] and call setState(() {})

score 0 · Answer 2 · answered Jul 14 '23 at 17:36

Using @youknowbaron's flow i was able to solve the problem. Below is the code in case it helps

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

void main() {
  runApp(
    const MaterialApp(home: WebViewApp(), debugShowCheckedModeBanner: false),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  var pageTitle;

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      // ..getTitle()
      ..setUserAgent(userAgent)
      ..setNavigationDelegate(
        NavigationDelegate(
          //calling the function which fetches the title as soon as the page loads
          onPageFinished: (url) {
            setAppBarTitle();
          },
        ),
      )
      ..loadRequest(
        Uri.parse('https://google.com.com'),
      );
  }

  Future<void> launchUrlMethod(url) async {
    var extUrl = Uri.parse(url);
    if (!await launchUrl(extUrl)) {
      throw Exception('Could not launch $extUrl');
    }
  }

  void setAppBarTitle() {
    setState(() {
      pageTitle = FutureBuilder(
        future: controller.getTitle(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text("${snapshot.data}");
          } else {
            return Text("Loading");
          }
        },
      );
    });
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: pageTitle,
        backgroundColor: const Color.fromARGB(255, 0, 0, 0),
        actions: [
          PopupMenuButton(itemBuilder: (context) {
            return [
              const PopupMenuItem<int>(
                value: 0,
                child: Text("Dashboard"),
              ),
            ];
          }, onSelected: (value) {
            if (value == 0) {
              // print("My account menu is selected.");
            }
          }),
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

How to display webpage title in the App Bar with webview_flutter

2 Answers2