What Does Branding a Flutter App Entail?

Flutter is a cross-platform tool. It makes your application available on both Android and iOS. Branding and Theming are crucial to the success of your digital product. Flutter is able to represent your brand appropriately on either Android or iOS. In this article, you will learn how to go about branding your Flutter apps with icons, fonts, and logos. You will also understand the process of theming to have the same colors whether it is published on the AppStore or PlayStore.

Your brand is how people know you. It is the sum of your identity. Branding tells your story. It uniquely identifies you among the many businesses out there.

Branding a Flutter app refers to those general settings that all apps share, irrespective of their features. Branding/Theming Flutter refers to those external configurations that beautify your application.

With regards to your Flutter application, your brand includes the following:

• Colors
• Logos
• Project name(s)
• Fonts/Typography

What Are the Names of a Mobile Application?

Every application has 2 names: display and package names. Your app’s display name is what the user sees with the app icon when the app is installed on their phone. It’s a short human-readable name that the user will remember. It matches the name users see when they search for your app on App/Play Store. For example “Sweetcode”.

On the other hand, your app’s package name is rather a unique name that differentiates it from all ever existing apps out there. Package names follow reverse domain name notation. So, if your company’s domain name is sweetcode.io, your app’s package name could be io.sweetcode.app (reversing the domain name).

To create a new Flutter project, you use the flutter create command. This command takes a project_name.  This project_name will be the name of the entire Flutter project folder that Flutter will create. 

Choose a project_name that matches or suits your application. For example:

• If you are building a ride-hailing app (and you haven’t yet chosen a display name), you can choose ride_hailing for a project name.
• If you chose “Comfort Rides” as your display name for this ride-hailing app (before you started coding), you can choose comfort_rides as the project name.
• If the app you are building is for your company, you can simply use your company name as the project name. E.g. sweetcode.
• It is also very valid to use the app’s display name as the project name. But it should all be in lowercase E.g. sweetcode.

Note that we use underscores (_) heavily in file and folder names because that’s what the Dart spec defines.

Once you run the flutter create command, Flutter uses com.example.project_name as the default package name of your app. Of course, project_name here is that which you specified when running flutter create). Flutter will also use this project_name as the display name of your app. 

These defaults are undesirable. You will have to configure suiting display and package names for your app after creating the Flutter project.

Flutter is cross-platform. It can build both Android and iOS apps from the same codebase. As such, it respects the rules of each platform. If you were developing your application from separate Android and iOS codebases, you have to set up the app’s display and package names in those separate projects. As you are setting up names in Flutter, you still have to respect the setup rules of both platforms (Android and iOS). Therefore, set up the name of a Flutter app across each platform’s folder.

How to Set Up the Name of Your Flutter App

Setting up app names involve changing the “name” fields across various files. These files are found in the Android and iOS folders of the generated Flutter code. Your IDE will greatly help you in this step. Your IDE will help you make the change at once in all the right files. 

To set up the package name:

• Press Cmd/Ctrl + Shift + H, while in your IDE to open the project-wide “Find And Replace” feature.
• Type com.example.project_name in the “Find” field. This is the default package name. 
• Type your desired package name in the “Replace” field. 
• Press Enter key and confirm the find and replace.

This will update your package name in build.gradle,  MainActivity.kt, project.pbxproj, and 3 AndroidManifest.xml files. 

Now you have to set up the display name. But before doing so, update the names of the folders containing the MainActivity.kt file to match your new package name. This is a special requirement for Android (Java actually). 

By default, MainActivity.kt file will be in android/app/src/main/kotlin/com/example/${project_name}. Update the later folder names to reflect what you have as the package name. So, if your package name is io.sweetcode.app, update the folder names to now become android/app/src/main/kotlin/io/sweetcode/app.

Setting up the display name involves the same steps as above. This time, search only your project_name (starting with a capital letter). Replace with your chosen display name. The change will reflect only in the AndroidManifest.xml and Info.plist files.

Most times, your app’s display name could match the project_name. Especially when your app’s name is only one word (like “Sweetcode”). In such a scenario, you won’t need to update the display name again. 

How to Make Your Logo app-icon-ready

A logo is a unique image, wordmark, or icon that you use to represent your organization, project idea, or application. Your logo is a core part of your identity (branding). 

This section is not about how to create or design a logo. Your logo idea is unique to you or your designers. Also, coming up with the logo is much of a graphic design skill. This section explains how to be sure that you can use that logo for an app icon. 

Your logo could be a complex combination of designed letters. Or it could be images mixed with letters. Or it is not a square. To make your logo app-icon ready:

• If it is a simple image and not a square, add paddings to the image on appropriate sides to make the image a square. 
• If the logo is a combination of image and text. Crop out the fitting image for the app icon. Then equally pad the appropriate side(s) to make it a square.
• If it is difficult obtaining some good app icons from the logo, consider reaching out to your designers and they will help you. In fact, the padding-to-square process has to be done with a graphic design tool.

At times, you don’t need to prepare your logo to use as an app icon. This is because your logo could already be a square or it is already just simple enough to serve as an app icon. 

How to Set Up App Icons in Flutter

You now have a perfectly squared image for an app icon. You need to convert it into the various icon formats that the Android and iOS operating systems expect from you. 

There are many ways to go about these conversions. Primarily, Android specifies using Image Asset Generator from Android Studio for Android phones. iOS also specifies how to generate these app icons with Xcode for iPhones. These are recommended ways for obtaining icons. But there are more.

There are many free tools built by various developers from the community. These tools can generate app icons for both platforms across different resolutions at the same time. For the sake of simplicity, we will use one of such tools in this article: easyappicon.co.

• Visit the site, upload your square logo, set paddings, and download. The downloaded ZIP file contains an android and an ios folder.
• Move the contents of the android folder into android/app/src/main/res folder in your Flutter project. Replace any existing icons with matching names.
• Move the contents of the ios folder into ios/Runner/Assets.xcassets folder. Replace any existing icons with matching names.

And there you have your own branded icons for your Flutter app. When next you run the flutter run or flutter build commands, Flutter will re-install/re-build your app with your icon sets.

If you are not comfortable with how the icon looks on your test device, You can redo the logo or re-generate the app icons (with different paddings). You can also try out other “app icon generator” tools from an online search and choose the best icons you generated. You can still fall back to using Android Studio and Xcode as you wish.

How to Theme Your Flutter App

This is where colors give life to your app. Every color is unique. Every unique combination of colors give a different feel to your users. Theming involves setting colors in various UI parts of your app, as according to your branding/design spec.

Nowadays, Operating Systems as well as applications have both dark and light theme. Hence, it is a good idea to incorporate both sides in every app you are building now. 

Flutter eases the theming process. Flutter provides an all-inclusive ThemeData object. In ThemeData, you can set the theme of various UI pieces you will use in the app. You then give your custom ThemeData to your FlutterApp. And that’s it.

There are defaults for all configurations in ThemeData. At a basic level, a newly generated Flutter app comes with a light theme that has blue as its primary color. 

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: const MyHomePage(title: 'Flutter Demo Home Page'),
);

If you are in a haste, or want to theme the app later, you can simply change the primarySwatch field into a color of choice. You can also specify a dark theme through the brightness property.

ThemeData(
  brightness: Brightness.dark,
  primarySwatch: Colors.amber,
)

For more customizations (preferable), set the colorScheme. It takes primary and secondary colors (amongst other fields). Flutter will use these colors for UI bars and ripple effects as users interact with your application. 

It is also in ThemeData that you can set the fontFamily and textTheme that your entire application will use. As mentioned earlier, remember that you can create themes for various UI parts of your app. For example: 

• appBarTheme
• bottomSheetTheme
• dividerTheme
• elevatedButtonTheme
• inputDecorationTheme

When Should You Start Branding and Theming Your Project

Branding and theming is something you should set up earlier on in the project. This early setup ensures that you get things right. Also, you will easily make minor corrections as you develop the app content. Setting up branding early also personalizes the application during development. It’s yours!

If you keep branding to when you want to publish to App/Play Store, you might rush things at that point and may not get it right. Also, you might forget some settings and only correct them after the app is published (which is something you don’t want).

There are some valid reasons to keep branding for later. It could be that you or your team has not yet fully taken branding decisions. For example, maybe you don’t yet have a design system, a domain name, or a logo. In such cases, it is best to keep branding for later. However, ensure you craft time to beautify your application while developing.

Conclusion

In this article, we have looked at the following:

• The meaning of display, package, and project names.
• How to choose and set up the different names of a Flutter app.
• How to prepare the app icon from your logo.
• How to generate the app icons and place them in respective folders.
• How to set up your app’s themes
• Most importantly when to carry out the branding process.

Now that you have branded your Flutter app, you should focus on developing its screens and features. While implementing some features, you might need to install and use some Flutter packages from pub.dev. However, some packages might be too specific and you might want to customize them. 

Here is how to customize Flutter packages to suit your needs.