How do you set the page description in a flutter web app?

I know you can set the title of your web app with this code:

MaterialApp(
  title: 'App Title',
  ...

But is it possible to set the description meta tag the same way?

By default mine is showing:

<meta name="description" content="A new Flutter project.">

Solution

Easiest and simplest method is making any changes like description or any other metadata directly in the web/index.html (not build/web/index.html).

  <meta name="description" content="A cool pet shop!">
  <meta name="apple-mobile-web-app-title" content="My Pet Shop">
  <title>My Pet Shop</title>

This works better than later javascript generated dynamic metadata. But do not decide without going through the section Use the combination below.

Along this, you can also create dynamic metadata with meta_seo package. Here is an example on how you can generate dynamic metadata with it -

Add MetaSEO().config() before runApp

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:meta_seo/meta_seo.dart';

void main() {
  if (kIsWeb) {
    MetaSEO().config();
  }
  runApp(const MyApp());
}

Add metadata in the scaffolds you want. Or you can set a base scaffold for your project if that suits your need.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    if (kIsWeb) {
      List<String> keywords = ['Pet Food', 'Pet Toys'];
      MetaSEO meta = MetaSEO();
      meta.author(author: 'John Doe');
      meta.description(description: 'A cool pet shop!');
      meta.keywords(keywords: keywords.join(', '));
    }
    return const Scaffold(
      body: Center(child: Text('A cool pet shop!'),),
    );
  }
}

IMPORTANT: You won't see any changes in the generated index.html, also confused if it works great in the local server. But if you check the meta tags in live server, the changes will be there.

Use the combination: Both of these work great! But I would suggest to use the combination of the 2. Here is the reason -

If you only use the first one (static), you won't have the control to change a lot of other pages as well. Also you may miss bunch of easily managed SEO opportunity.

If you only use the second one the generated index.html will hold the default name 'flutter_project_name_with_underscore' and 'A new Flutter project.' will be the description. So until the js renders the dynamic data you see these nice things for the time being. Biggest issue is when you'll share the cool website to someone in any chat message it won't show the dynamic changes. You can check your site's preview on different mediums in Meta Tags Toolkit

Note: Do not make any changes inside the build/web/ directory (though it works temporarily, a new build will dismiss those changes again).