Flutter – How to Change App and Launcher Title in Different Platforms

Sometimes you notice that we have to change the App title in Android, and iOS apps, and the title for flutter web during or after loading. So in this article, we will cover all the places where we have to change the app title with different platforms.

1. Android App Title

Change the android label name in 

File Path: android/app/src/main/AndroidManifest.xml

Dart

<application
  android:label="Your android app title"
  android:name="${applicationName}"
  android:icon="@mipmap/ic_launcher">

2. When App is  running in the background and  is not killed yet

• On Android: it is used in Recent apps
• On iOS: it is used in the App switcher
• It’s used in browser tabs, which correspond to the web app’s ‘title’ property.

File Path: lib/main.dart 

Dart

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App Title',
      theme: ThemeData(
        scaffoldBackgroundColor: Color(0xFFDEE9F9),
        textTheme: TextTheme(
          headline3: TextStyle(
            color: Colors.black,
            fontSize: 20,
            fontWeight: FontWeight.w600,
          ),
        ),
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      initialRoute: home,
      routes: {
        checkBox: (context) => const GradientCheckBox(),
        home: (context) => const Home(),
      },
    );
  }
}

3. iOS App Title

File Path: ios>Runner/info.plist

<key>CFBundleName</key>
<string>Your iOS App Title</string>

Dart

<key>CFBundleDisplayName</key>
<string>Your iOS App Title</string>

4. Title Appears when the web app is loading (Flutter web)

File Path: web/index.html

Dart

<meta name="apple-mobile-web-app-title" content="your web app title">
<title>your web app title</title>

You can also change these two descriptions in flutter web to increase your SEO.

File Path: web/ index.html

Dart

<meta name="description" content="Your App Description">

File Path: pubspec.yaml

Dart

name: Your App Title
description: Your App Description

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.16.2 <3.0.0"