Add support for changing the website <title>

[jaredsburrows]

For example:

void updatePageTitle(String pageName) {
  // Update the page title - Burrows Tools - page, eg. Burrows Tools - Character Counter
  if (pageName.isEmpty) {
    html.document.title = 'Burrows Tools';
  } else {
    html.document.title = 'Burrows Tools - $pageName';
  }
}

[krokyze]

Hey.

You should use ApplicationSwitcherDescription which already supports it. Here's an example: https://github.com/krokyze/flutter_seo/blob/main/example/lib/widgets/app_head.dart

[jaredsburrows]

Does https://api.flutter.dev/flutter/services/SystemChrome-class.html only work on Chrome? Also would be nice to have a little wrapper for this if it works on the web well.

Similar to https://pub.dev/packages/meta_seo example:

final router = GoRouter(
  initialLocation: '/',
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        // Add MetaSEO just into Web platform condition
        if(kIsWeb) {
          // Define MetaSEO object
          MetaSEO meta = MetaSEO();
          // add meta seo data for web app as you want
          meta.ogTitle(ogTitle: 'First Screen');
          meta.description(description: 'First Screen');
          meta.keywords(keywords: 'Flutter, Dart, SEO, Meta, Web');
        }

        return const FirstScreen();
      },
    ),
    GoRoute(
      path: '/second_screen',
      builder: (BuildContext context, GoRouterState state) {
        // Add MetaSEO just into Web platform condition
        if(kIsWeb) {
          // Define MetaSEO object
          MetaSEO meta = MetaSEO();
          // add meta seo data for web app as you want
          meta.ogTitle(ogTitle: 'Second Screen');
          meta.description(description: 'Second Screen');
          meta.keywords(keywords: 'Flutter, Dart, SEO, Meta, Web');
        }

        return const SecondScreen();
      },
    ),
  ],
);

Can we do something similar with https://github.com/krokyze/flutter_seo?

final router = GoRouter(
  initialLocation: '/',
  routes: <GoRoute>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
          SystemChrome.setApplicationSwitcherDescription(
            ApplicationSwitcherDescription(
              label: widget.title,
              primaryColor: Theme.of(context).primaryColor.value,
            ),
          );

          return Seo.head(
            tags: const <HeadTag>[
              MetaTag(
                name: 'description',
                content:
                    'Burrows Tools offers a wide range of free, user-friendly apps and tools designed to enhance productivity and efficiency.',
              ),
              LinkTag(
                rel: 'canonical',
                href: 'https://burrows.tools',
              )
            ],
            child: const HomePage(),
          ),
      },
    ),
  ],
);

[krokyze]

Just tested SystemChrome does work on Chrome, Firefox, Safari.

In my example, experience for SystemChrome.setApplicationSwitcherDescription to work well it separately does require visibility_detector and currently I don't see a nice way how I could integrate it within my package, in a way that it wouldn't affect the performance.

In think that AppHead in the example is already an ok wrapper that everyone can use. If you feel different feel free to reopen the issue 😉