Flutter App Publish Management : Set app icon, change version name, change version code and set app name and app title

INTRODUCTION

This post will help you sort out the common things that you need to do to publish Flutter application. So, keep on reading...

How to set app icon in Flutter (Android) :

First of all, you need an app icon image, for that create or download an image you want to set as your app icon and then go to https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html to convert them to the required size. You'll need to put these icons in different 'minmap' folders present in the 'res' folder of your flutter project. Note : put the icons in their respective size folder i.e, hdpi, xhdpi...etc.

In your project explorer, go to 'android-->app-->src-->main-->androidmanifest.xml', In this file, there is an application tag, inside that tag you need to put this code.

 android:icon="@mipmap/launcher_icon"

Replace the 'launcher_icon' with your image name. Now you can launch your app and it will have the icon image that you had set.

How to set the app name in Flutter (Android) :

 In your project explorer, go to 'android-->app-->src-->main-->androidmanifest.xml', In this file, there is an application tag, inside that tag you need to put this code.

 android:label="Your_app_name"

Replace the 'Your_app_name' with your app name and launch your application to see the name below the app icon as you have set in the above code.

How to set app title in Flutter (Android) :

App title is something which appears when you go into the multitask window. To set the app title, go to the first widget that you return in the main() function. And in the first MaterialApp widget set the app title as the code below :

 MaterialApp(

      title: 'Your_app_title',

Launch the application to see the change.

How to change the version code and version name :

When you first publish your app, the version name and version code of your app is by default set to '1.0.0'  and '1' respectively. But, on further development, when you want to update your app you need to have a new version name and version code. To do so follow this simple step :
Go to 'pubspec.yaml' file, and find this line of code :

version: 1.0.0+1

Here, the number ahead of  '+' symbol represents version name and the number after it represents version code.

So change that to :

version: 1.1.0+2

 So, now you know, on updates after it just keep on increasing the digits.

AndroidX incompability bug and How to resolve it

androidx has different version for the compile (1.0.0-rc01) and runtime (1.0.0) classpath

Android dependency 'androidx.core:core' has different version for the compile (1.0.0) and runtime (1.0.1) classpath. You should manually set the same version via DependencyResolution

Android dependency 'androidx.lifecycle:lifecycle-runtime' has different version for the compile (2.0.0-rc01) and runtime (2.0.0) classpath.

INTRODUCTION

If you are facing errors like above, chances are that you have androidx incompatibility issue in your project. Don't worry you can cure your project by reading this post. So, keep reading...

What is Androidx and what is this incompatibility ?

In a nutshell, Android used to provide support to previous versions of android using support libraries, then there many support libraries over the years. It created confusion in the minds of developers. AndroidX came to rescue, Android introduced a single library to all support libraries.

Now if you have support library code in your app or in a package you are using and you are also having AndroidX code in the same way then it created the incompability.

How to resolve it ?

android.enableJetifier=true

android.useAndroidX=true

paste this above code in your 'gradle.properties' file.

 subprojects {

        project.configurations.all {

            resolutionStrategy.eachDependency { details ->

                if (details.requested.group == 'com.android.support'

                        && !details.requested.name.contains('multidex') ) {

                    details.useVersion "27.1.1"

                }

                if (details.requested.group == 'androidx.core'

                        && !details.requested.name.contains('androidx') ) {

                    details.useVersion "1.0.1"

                }

            }

        }

    }

paste this above code below 'dependencies' section in this 'build.gradle' file which is in the same folder as your 'gradle.properties' file.

Now run your project. What we have done is resolved the dependencies with our code.

Please comment below if this worked or didn't worked for you.

Splash Screen in Flutter Right Way and Full Screen

INTRODUCTION

Hello developers, hope you're doing well. What is splash screen ? splash screen is the screen which show up when icon of an app is clicked and main page isn't yet loaded. In this post, we will see how to implement splash screen in flutter. There are 2 ways to do it but we will cover the right and standard way. Al tough I will tell you what's the other way in the end of the post. So, keep reading...

 We can divide this process into just 3 easy steps :

1. Add image in the 'drawable' folder
2. Add meta tag in the AndroidManifest.xml
3. Add your image in the launch_background.xml

So, let's start with the first step :

1.  Add image in the 'drawable' folder

In your project explorer, go to 'android-->src-->main-->res-->drawable'. In this folder, add the image you wish to show in your app.

2. Add meta tag in the AndroidManifest.xml

 In your project explorer, go to 'android-->src-->main-->AndroidManifest.xml'. In this file,

<meta-data

                android:name="io.flutter.app.android.SplashScreenUntilFirstFrame"

                android:value="true" />
check if this meta-data tag is added in the activity tag.
This keeps the window background of the activity showing until Flutter renders its first frame. It can be removed if there is no splash screen

3. Add your image in the launch_background.xml 

In your project explorer, go to 'android-->src-->main-->res-->drawable-->launch_background.xml'.

Replace the code inside this file with this code,

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

   

 <item>

        <color android:color="#FFF"></color>

    </item>

    <item >

        <bitmap

            android:gravity="center|fill_vertical"

            android:src="@drawable/your_image_name" />

    </item>

   

</layer-list>

Replace 'your_image_name' with your splash screen image name without the extension (.jpg or .png etc). Also, this android:gravity is the attribute for changing the aspect ratio and fit of your splash screen. The above code will fix most of the use cases but if you need a different aspect ratio then visit : https://developer.android.com/reference/android/graphics/drawable/BitmapDrawable.html#attr_android:gravity and experiment with different gravity types.

That's it. You're done ! Run your app now and you'll have your splash screen.

The other way to implement a splash screen is to create a widget with the image and set that widget as the root widget of the app and after few seconds navigate to the main widget. But that is a workaround and not the standard way.

Try this and comment if this worked or didn't worked for you,