Как изменить название приложения flutter

Flutter is a UI kit by Google. Flutter is a widely growing open-source framework, with many libraries getting published daily making android/iOS, web development easy. In this article, we will see the use of the library – “rename“. Although there are other packages also, but this one is the most popular and holds null safety.

While creating a project, you didn’t give it an appropriate name. Now, you want to change its name. There are two options to do it, create a new project, copy all the files inside the new project – it’s a terrible idea, or rename it using a package with just one command- nice idea.

Prerequisite:

• You have an existing Flutter project to rename.

Implementation:

Follow the below steps to rename your flutter app:

Step 1: Installation of Dependencies

• In pubspec.yaml, add the dependency of the package as shown in the below image:

• After adding it, run either of the following commands:

pub get

• You can also add packages directly from the terminal, simply run either of the following commands:

pub add rename

This command will add dependency in pubspec.yaml file, resolving all the dependencies as shown below:

Step 2: Import the package

• When renaming the app name there is no use in importing this package anywhere. All we have to do is, run a command from the terminal and we are done. From the terminal go to the app location, then type the below command to change the app name. You can give the name inside brackets in place of “New App Name”. We have named the app while creating it as “random_app”, and now renamed it to “Quote-Generator”.

pub global run rename --appname "New App Name"

• Or run the below command using flutter if the pub is not recognized as an internal command, replace “Quote-Generator” with the new name you want to give to your application: 

flutter pub global run rename --app "Quote-Generator"

After you run this command in a terminal, you should see something like the below:

• If you want to change the name for a specific platform for example, only for android, use this command:

pub global run rename --appname yourappname --target android

• Or use flutter to run this command(shown below).  Here “–target” specifies the platform which you are targeting. Similarly, you can do this for the web, macOS, iOS, just replace “android” with another platform. For example:

Similarly, for an ios platform,

Change the bundleId:

If you want to change the bundleId, by default it is like “com.example.appname”. Run the below command:

pub global run rename --bundleId com.companyname.newappname

After this, something like the below should be seen on the terminal, it means you have successfully changed the name of bundleId as shown below:

Congratulations!, you just learned a new way to rename the Flutter app and bundleId of your project.

Flutter is a UI kit by Google. Flutter is a widely growing open-source framework, with many libraries getting published daily making android/iOS, web development easy. In this article, we will see the use of the library – “rename“. Although there are other packages also, but this one is the most popular and holds null safety.

While creating a project, you didn’t give it an appropriate name. Now, you want to change its name. There are two options to do it, create a new project, copy all the files inside the new project – it’s a terrible idea, or rename it using a package with just one command- nice idea.

Prerequisite:

• You have an existing Flutter project to rename.

Implementation:

Follow the below steps to rename your flutter app:

Step 1: Installation of Dependencies

• In pubspec.yaml, add the dependency of the package as shown in the below image:

• After adding it, run either of the following commands:

pub get

• You can also add packages directly from the terminal, simply run either of the following commands:

pub add rename

This command will add dependency in pubspec.yaml file, resolving all the dependencies as shown below:

Step 2: Import the package

• When renaming the app name there is no use in importing this package anywhere. All we have to do is, run a command from the terminal and we are done. From the terminal go to the app location, then type the below command to change the app name. You can give the name inside brackets in place of “New App Name”. We have named the app while creating it as “random_app”, and now renamed it to “Quote-Generator”.

pub global run rename --appname "New App Name"

• Or run the below command using flutter if the pub is not recognized as an internal command, replace “Quote-Generator” with the new name you want to give to your application: 

flutter pub global run rename --app "Quote-Generator"

After you run this command in a terminal, you should see something like the below:

• If you want to change the name for a specific platform for example, only for android, use this command:

pub global run rename --appname yourappname --target android

• Or use flutter to run this command(shown below).  Here “–target” specifies the platform which you are targeting. Similarly, you can do this for the web, macOS, iOS, just replace “android” with another platform. For example:

Similarly, for an ios platform,

Change the bundleId:

If you want to change the bundleId, by default it is like “com.example.appname”. Run the below command:

pub global run rename --bundleId com.companyname.newappname

After this, something like the below should be seen on the terminal, it means you have successfully changed the name of bundleId as shown below:

Congratulations!, you just learned a new way to rename the Flutter app and bundleId of your project.

3 min read

It may happen that while creating a Flutter app, you might have given a random name to your app. Maybe you were in hurry or haven’t decided on an app name yet. But when releasing your app to the public, you must replace the name with your final app name. So in this tutorial, we’ll learn how to change app name in Flutter.

Here’s what we’ll cover:

• What is App Name (Why it’s Important)
• Changing App Name in Flutter For Android
• Changing App Name in Flutter For iOS
• Changing App Icon

What is App Name (Why it’s Important)

Your app name represents your brand. Every phone comes with a launcher app. When you open the launcher app it displays the launcher icons for all the installed apps. Your app name is displayed below the launcher icon. 

Having an appropriate app name helps you promote your brand.

Here’s how your app name looks on the launcher app.

Changing App Name in Flutter For Android

The app name in Android is changed by modifying the label name in AndroidManifest.xml file. This method of changing the name is called a native way of changing the app name.

Steps to change app name in Android:

• Navigate to the android>app> src>main and open the AndroidManifest.xml file. 
• Under the application tag, Find the android:label and replace its value with the new app name.
• Hit flutter clean command in the terminal.
• Completely stop and run your app.

Check out the official instructions here.

Code:

// old
<application
     android:label="OldAppName"
     android:icon="@mipmap/ic_launcher">
// new
<application
     android:label="NewAppName"
     android:icon="@mipmap/ic_launcher">

Here’s is how it looks:

Output:

Changing App Name in Flutter For iOS

The app name in iOS is changed by modifying the CFBundleName in the info.plist file.

Steps to change app name in iOS:

• Navigate to the ios>Runner and open the info.plist file.
• Find the key named as CFBundleName and replace the string value (below it) to reflect the new app name.
• Hit flutter clean command in the terminal.
• Completely stop and run your app.

Code:

// old
<key>CFBundleName</key>
<string>OldAppName</string>
// new
<key>CFBundleName</key>
<string>NewAppName</string>

Here’s is how it looks:

Output:

Changing App Icon

When you create a Flutter app, by default the launcher icon is created with the Flutter logo. You must replace the Flutter logo with your own designed icon.

In case if you wish to change the app icon as well. Follow the steps to change the app icon here.

That’s it. I hope you find this article useful ?

Conclusion

In this tutorial, we learned, how to change app name in Flutter for Android and iOS with practical examples. We also learned how to change the app launcher icon in Flutter.

Would you like to check other interesting Flutter tutorials?

Users can create a flutter project using the command flutter create a name so what if a user wants to change the project once the new project is already been created. So in this article, we will take a look at how to change the project name in flutter.

That depends on what you are trying to achieve.

If you want to change the name of the app which is displayed in the menu of the mobile phone together with the app icon, you have to change the android:label in the android/app/src/main/AndroidManifest.xml (Code Sample 1) and the CFBundleName in the ios/Runner/Info.plist (Code Sample 2).

The last time I did this it took me ages to find out, why the name of the app was not changed in the list of currently running apps on Android.

For that, you also need to change the title of your MaterialApp (Code Sample 3).

For renaming it everywhere I would suggest using search and replace in the project.

If you do this, you have to choose a name without spaces or special characters.

So project name ‘new project’ in the pubspec.yaml for example will break the build.

Code Sample 1:

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="New Name"
    android:icon="@mipmap/ic_launcher">

Code Sample 2:

<key>CFBundleName</key>
<string>New Name</string>

Code Sample 3:

return new MaterialApp(
  title: 'New Name'
  ...);

So if you want to change the project name, simply change it in all these files.

• build.gradle (app)
• AndroidManifest.xml
• MainActivity.java

Rebuild your app and you should be good to go.

If you are using Android Studio, follow these steps:

• Right-click your project in the Project window (Alt+1 to show).
• Click Refactor > Rename.
• Enter a new name.

So This will rename the project’s name on all required places except in the test directory.

Steps to rename your project:

1. Use VSCode’s any other editor’s search and replace across the entire project feature. But always turn on the match cases for vscode: located on the right side.
2. You have to do this two times as for the first you have to replace com.orgname.currentname with com.orgname.newname then
3. currentname with newname
4. Rename the folders inside /android/app/src/main/kotlin/com/orgname/currentname to new /android/app/src/main/kotlin/com/orgname/newname.
5. If you’re using only Java with flutter then just replace the kotlin with java
6. Rename the currentname.iml of your root project folder to newname.iml

Conclusion:

Thanks for reading!! Hope you have learned better!!

So in this article, we have been through how to change the project name in flutter.

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

This tutorial explains you how to change the name and icon of a Flutter application for both Android and iOS

Change App Launcher Name

By default, the name on the launcher is your Flutter project name. To change the name displayed on Android or iOS application launcher, you need to change AndroidManifest.xml and Info.plist respectively.

Inside AndroidManifest.xml, find <application> tag. Change its android:label property with your desired app name.

android/app/src/main/AndroidManifest.xml

  <application
          android:name="io.flutter.app.FlutterApplication"
          android:label="Woolha App"
          android:icon="@mipmap/launcher_icon">

Inside Info.plist, find CFBundleName key and change its value which is inside string tag on the next line.

ios/Runner/Info.plist

  <key>CFBundleName</key>
  <string>Woolha App</string>

Change App Launcher Icon

There are some ways to change the app launcher icon.

Using flutter_launcher_icons.yaml

The easiest way is using a tool called flutter_launcher_icons.yaml

  dependencies:
    flutter_launcher_icons: ^0.7.2

  flutter_icons:
    android: true
    ios: true
    image_path: "assets/images/favicon.png"

Below are the available config options:

The path is relative from your project root. After that, run flutter pub get on your project directory or just press  if you’re using Android Studio while opening the pubspec.yaml file.

After the tool successfully installed and you’ve added the configuration, you can run flutter pub run flutter_launcher_icons:main. If the config is not in pubspec.yaml or flutter_launcher_icons.yaml, add -f {your config file name} flag to the command.

Basically, the tool is used to generate icons with different sizes for Android and iOS.

Using Android Studio’s Asset Studio

Android Studio has built-in feature for changing Android app icons. Right click on the android folder, the choose New > Image Asset.

On the opened popup, select Launcher Icons on Icon Type. You can change the foreground layer, background layer, legacy icon, round icon as well as Google Play Store icon. It will automatically generate icons with different sizes for different pixel densities.

Change the icon manually

If the tools above doesn’t work for you or maybe you need more customization, you can set the launcher icon manually.

For Android, go to android/app/src/main/res folder. You should see some folders beginning with mipmap-* which represent different pixel densities. Replace launcher_icon.png file in each folders to use custom icons.

For iOS, the icon config and files are located inside ios/Runner/Assets.xcassets/AppIcon.appiconset. The Contents.json file defines a list of icon images with different sizes and scales. The files are located in the same folder. It’s recommended to follow the guideline for designing iOS icon.

Иногда вы замечаете, что нам приходится менять заголовок приложения в приложениях для Android и iOS, а также заголовок для флаттер-веб во время или после загрузки. Итак, в этой статье мы рассмотрим все места, где нам нужно изменить название приложения на разных платформах.

1. Название приложения для Android

Измените имя метки Android в

Путь к файлу : android/app/src/main/AndroidManifest.xml

2. Когда приложение работает в фоновом режиме и еще не убито

• На Android: используется в недавних приложениях
• На iOS: используется в переключателе приложений
• Он используется на вкладках браузера, которые соответствуют свойству title веб-приложения.

Путь к файлу: lib/main.dart

3. Название приложения для iOS

Путь к файлу: ios>Runner/info.plist

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

4. Заголовок появляется при загрузке веб-приложения (Flutter web).

Путь к файлу: web/index.html

Вы также можете изменить эти два описания в веб-флаттере, чтобы улучшить SEO.

Путь к файлу: web/index.html

Путь к файлу: pubspec.yaml