Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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">


Android App Title

 

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(),
      },
    );
  }
}


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

 

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>


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

 

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"


 



Last Updated : 09 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads