Flutterexperts

Why OPT Flutter to develop your app?

• :: Flutter is a free and open-source tool to develop mobile, desktop, web apps with a single code base.
• :: Setting up the Flutter environment on our machine is much easier and straight forward.
• :: Technical architecture of flutter apps is a much easier, clean, and precise code structure.
• :: It runs the application at 60–120 frames per second.
• :: Google, as always, tends to provide clear and in-depth documentation for their products. They did it for Flutter documentation isn’t an exception.

Almost 100,000 + applications have been successfully published in the app store. There are lots of big companies that are using flutter to develop applications. So as a flutter developer you should know how to upload your flutter app to app stores. In this blog, we shall learn how to make our flutter ready for production and publish it on app stores.

Publishing app to app stores is really easy and fun to do. The whole process is divided into four essential steps that are as follows::

Testing::

1. Testing your app on various devices of different sizes, on older devices, new devices, small screen, big screen of course on android devices, and ios devices if you are planning to publish your app to both platforms.
2. Use const and new keyword on static widgets to improve app performance.
3. Try to split your code into smaller widgets file so that you can easily modify if there is any new change.

Prepare 3rd party API::

Add all your API keys so that your users do not face any problem while performing any Rest API request from your app. Please try to maintain them properly and timely.

Add app icon, splash screen, app name::

Setting up the app icon::

To set up an app icon you need an icon image:

1. Make an assets folder inside your project and store the app icon inside it.
2. Go to your pubspec.yaml file and add this code

flutter_icons:
  android: true
  ios: true
  image_path: "assets/app_icon.png" //use_your_image_name

3. Run the following command:

flutter packages pub run flutter_launcher_icons:main

Now the app icon is added to your app.

Adding Splash Screen::

Timer widget is a widget that can de used to add a delay between two tasks. We can also use it to add a splash screen for a few seconds.

import 'dart:async';
import 'package:flutter/material.dart';
import 'homePage.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  startTime() async {
    var _duration = Duration(seconds: 4);
    return Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HomePage.routeName);
  }

  @override
  void initState() {
    super.initState();
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
              height: MediaQuery.of(context).size.height,
              child: Image.asset(
                'assets/splashScreen.jpeg',
                fit: BoxFit.cover,
              )),
          Container(
            height: MediaQuery.of(context).size.height,
            color: Colors.blue.withOpacity(0.2),
          ),
          Positioned(
              top: MediaQuery.of(context).size.height * 0.9,
              left: MediaQuery.of(context).size.width * 0.15,
              child: Row(
                children: <Widget>[
                  Image.asset(
                    'assets/bottomSplashImage.png',
                    width: 50,
                    height: 50,
                  ),
                  Column(
                    children: <Widget>[
                      Text(
                        "ENERGY & PRESISTENCE",
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 20),
                      ),
                      Text(
                        "CONQUER ALL THINGS",
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 15,
                            wordSpacing: 2,
                            letterSpacing: 4),
                      )
                    ],
                  )
                ],
              ))
        ],
      ),
    );
  }
}

Timer class – dart:async library – Dart API
API docs for the Timer class from the dart: async library, for the Dart programming language.api.flutter.dev

Adding App Name::

Go to android\app\main\AndroidManifest.xml and change the android label, it will change the application name that will be displayed on your phone as the app name.

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

Publish app to app store::

Create a Keystore::

Run the following command to a Keystore

for windows

keytool -genkey -v -keystore c:\Users\USER_NAME\key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key

for mac/linux

keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

If already have one Keystore you can also use that.

This command will make a key.jks file inside the home directory.

Create a reference of Keystore inside your app::

Create a file inside <app dir>/android/key.properties that contains a reference to your Keystore:

storePassword=testpassword
keyPassword=testpassword
keyAlias=testkey
storeFile=D:/keystore.jks  //your_home_directory

Signing in Gradle::

Add the bold content inside your app/build.gradle :

def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
    localPropertiesFile.withReader('UTF-8') { reader ->
        localProperties.load(reader)
    }
}

def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}

def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
    flutterVersionCode = '1'
}

def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
    flutterVersionName = '1.0'
}

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}
android {
    compileSdkVersion 28

    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }

    lintOptions {
        disable 'InvalidPackage'
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.gymguide.gymguide"
        minSdkVersion 16
        targetSdkVersion 28
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
            storePassword keystoreProperties['storePassword']
        }
    }
    buildTypes {
        release {
            signingConfig signingConfigs.release
        }
    }

}

flutter {
    source '../..'
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
}

Build an apk::

Run flutter build apk on your project terminal and it will build a release apk that we can use to upload on the play store.

Publish app to Google Play Store::

• Go to Google Play Console.
• To publish your app on the play store you need to pay $25 to google as a one-time payment.

• Click on Create app and fill in the app details.
• Go through all the steps mentioned in the dashboard section and your app will be live on the play store after google review the app, this step might take hours.

Launch | Google Play | Android Developers
Publish with confidence on Google Play.developer.android.com

Build and release an Android app
During a typical development cycle, you test an app using flutter run at the command line, or by using the Run and…flutter.dev

Build and release an iOS app
This guide provides a step-by-step walkthrough of releasing a Flutter app to the App Store and TestFlight. Before…flutter.dev

---

Thanks for reading this article ❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

If we got something wrong? Let me know in the comments. we would love to improve.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.