Design Converter
Flutter
React
Shopify
Flutter
React
Shopify
Discord
Discord
Education
Software Development Executive - II
Last updated onSep 5, 2024
Last updated onAug 8, 2023
Developing an app and pushing it to the production environment is an accomplishment for every developer. It is more than just writing the code; it involves building and packaging the app for different platforms. Today, we'll be discussing how to build and release a Flutter app for Android, iOS, and the Web, also known as Flutter release.
Flutter is a modern, reactive framework developed by Google that makes it easier to build native apps for Android, iOS, and Web from a single codebase. It offers a rich set of features and an extensive library of widgets that make app development quick, efficient, and enjoyable.
The build and release process involves preparing your app for release and setting it up on the respective app stores. This process often differs between Android and iOS due to the differences in platform specifications. However, Flutter allows you to streamline this process through the use of a single command known as Flutter build release. This command compiles your Flutter app code into a native app specifically designed for release on the target platform.
The focus of this blog post will be to guide you through this process. Therefore, if you've just finished developing your first Flutter app and want to learn how to prepare it for release, or if you're a Flutter developer looking to make your app available to a wider audience, then continue reading.
Before diving into the build and release process, let's cover some basic groundwork on Flutter.
Flutter is a robust and flexible framework developed by Google, allowing developers to write once and run anywhere. It focuses heavily on providing a native interface for both iOS and Android platforms from a single code base. Furthermore, it also extends its support to web app development, making it a universal framework for crafting elegant UI interfaces.
The answer lies in Flutter's exclusive benefits:
Flutter allows developers to use the same codebase for developing applications for Android, iOS, and Web. This ability significantly reduces development time and effort.
An essential feature of Flutter, hot reload, allows developers to see changes in the output immediately after tweaking the code.
Flutter’s rich set of customizable widgets helps in creating complex UIs more efficiently and effectively.
Setting up Flutter involves downloading and installing the Flutter SDK, and setting up an editor, typically Visual Studio Code or Android Studio, to write your applications. Installation instructions can be found on the Flutter official website.
To check if Flutter has been correctly set up on your machine, you can run the below code snippet in the terminal or command prompt.
1 flutter doctor
This command checks your environment and displays a report to the terminal window.
In this section, we will be creating a simple Flutter app that greets users with a welcome message. The app structure is simple - a title bar and a body with a message. We shall go through each step in detail.
First, let's understand the basics of a Flutter project structure. When you create a new Flutter project, it generates a directory structure where all the necessary code, images, fonts, and configuration files are stored. "lib/main.dart" is the entry point of the Flutter application.
Widgets are the basic building blocks of a Flutter UI. They describe what their view should look like given their current configuration and state. Everything in the Flutter UI is part of a widget or widget tree.
For this example, we will import the Flutter package and start creating our main function.
1 import 'package:flutter/material.dart'; 2 3 void main() { 4 runApp(MyApp()); 5 }
Now, we will define our app. Following is the code of a simple app that displays a welcome message. The app uses the MaterialApp widget that provides a number of widgets required for implementing Material design.
1 class MyApp extends StatelessWidget { 2 @override 3 Widget build(BuildContext context) { 4 return MaterialApp( 5 title: 'Welcome to Flutter', 6 home: Scaffold( 7 appBar: AppBar( 8 title: Text('Welcome to Flutter'), 9 ), 10 body: Center( 11 child: Text('Hello, World!'), 12 ), 13 ), 14 ); 15 } 16 }
This app creates a Material app with a scaffold that includes an app bar and body with a simple text message in the center of the screen.
Running the main.dart file will result in the display of the created application.
As your Flutter app evolves and you deem it ready for the market, there comes the point where your app needs to be built for release. Building a release version of an app differs from debug mode. In contrast to debug mode, the release mode enables optimizations and obfuscation to deliver an efficient and smooth user experience.
The flutter build command compiles your app and prepares it for distribution in your chosen platform's app store. The release mode uses Dart's compiler to increase the app's performance by reducing the size of the package and ensuring fast startup.
To elaborate more on this, let's consider a few essential Flutter build release commands:
To build a release version of your app for Android, the command flutter build apk --release is used. This command will generate a release APK at "projectname/build/app/outputs/flutter-apk/app-release.apk".
To prepare your app for a release on the web, use flutter build web. The command builds your application for the web and places the output in the "build/web" directory of your project.
For releasing the Android app, after it is built using flutter build apk --release, the generated APK file can be submitted to the Google Play Store using the Play Console.
In Flutter, you can build your app in either debug or release mode.
The debug mode is for development. It includes assertions to catch and report errors and provides debugging information to the developers.
The release mode is intended for distribution to end-users and is built with optimizations to guarantee the smoothest and most efficient user experience.
Getting a Flutter app ready for release on Android involves a series of steps to ensure that it is prepared to meet user's and Google Play's requirements.
Google Play prefers to have the release version of an Android app deployed as an Android App Bundle, instead of an APK. An Android App Bundle is a publishing format containing all the app's compiled codes and resources, yet defer APK generation and signing to Google Play Store. This reduces app size and enables the new dynamic delivery models.
To build an Android App Bundle, run flutter build appbundle from the app's top directory.
To make your Flutter Android app ready for release, you need to digitally sign it with a keystore. This keystore is a binary file serving as a cryptographic proof that verifies authorship of the app. The keystore is mandatory for Google Play Store releases.
In your Android development environment, create a new key using the following command:
1 keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias 2
Enter the necessary information, and this command will create a new file named my-release-key.jks. Store this file in a safe place separate from your project directory.
After creating the keystore, reference it in your app. In the android/ directory, create a file named key.properties that contains a reference to the keystore using the following format:
1 storePassword=<password from previous step> 2 keyPassword=<password from previous step> 3 keyAlias=my-alias 4 storeFile=/path/to/my-release-key.jks 5
Remember, replace the placeholders <password from previous step> with your actual passwords, and /path/to/my-release-key.jks with the actual path where your key is stored. This file should NOT be check-in into your source version control.
Your app's manifest file, AndroidManifest.xml, contains essential information about your app needed by the device's system to run it correctly. Here, you may wish to update the application's android:label to reflect the app's final name or add any permissions your application needs, like the android.permission.INTERNET permission if your app requires internet access.
Building your Android application for release includes compiling your app into a deployable unit, either an APK file or an app bundle, that you can distribute to users.
To build an APK, run the following command in your terminal from your application's root:
1 flutter build apk --release 2
To construct an app bundle, use:
1 flutter build appbundle 2
After building, the APK or app bundle should reside in the 'projectname/build/app/outputs/flutter-apk' or 'projectname/build/app/outputs/bundle/release' directory, respectively.
Once the preparation process for the release of the Android version of your Flutter app is finished, the next step is to distribute your application to the users on the Google Play Store.
Distributing your app to users is an exciting stage in the development process where your app becomes available to the public. The app can be distributed via several channels, but the most common one is the Google Play Store.
Distributing your app through the Play Store is an effective way to reach your target audience, as this platform allows potential users to find, download, and update your app easily.
This is the final step in which you submit your application to the Google Play Store for users to download.
Before uploading, ensure you update your app's version details. In your pubspec.yaml file, update the version property to version: 1.0.0+1 (or update the version to the relevant number following semantic versioning practices).
After building, the app bundle or APK that you can upload to Google Play Store is generated at 'projectname/build/app/outputs/bundler/release/app-release.aab' or 'projectname/build/app/outputs/flutter-apk/app-release.apk' respectively.
Make sure the Google Play Console is set up for the app. Then, navigate to the "Release" section, upload the generated file, and follow the instructions to publish the new release.
Releasing an iOS application involves a sequence of steps to ensure that it aligns with Apple's App Review Guidelines. This process involves preparing your app for release, registering the app, and, finally, distributing it through App Store Connect.
Before you prepare your application for release, you need to have Xcode installed on your machine. Within Xcode, you will have to register your iOS app and its unique identifier (called a Bundle ID), create an archive of the app, and then upload this archive to App Store Connect.
The iOS archive (.xcarchive) is a package that bundles your app's executable (along with any associated libraries) and any assets required to run the app, including the app icon and launch image.
Next, review your Xcode project settings. Particularly, verify the most important settings:
An App Store Connect record contains metadata about your app and links to your app's binary files. You should create the app record within App Store Connect. It's important to ensure that the bundle identifier in your Xcode project matches the one in this record.
Archiving your app compiles it and prepares it for distribution in the Apple App Store. You can create a build archive by running flutter build ipa within your Flutter app's root directory. This command will produce an .xcarchive file in the build/ios/archive directory.
To release your app and distribute it to users, follow these steps:
Upon successful validation, submit your app for the iOS App Review. To do this, go to your app's status page in App Store Connect and add any necessary app information, screenshots, app previews and version information. Then, click "Submit for Review".
After your app has been reviewed, you will receive a notification from Apple. If your app passes the review, you'll be able to release it whenever you're ready. If any issues arise from the review, you'll need to address them and submit your app for review again.
After building your Flutter web application, you'll want to prepare it for release on the web. This section will guide you through this process.
To compile your Flutter web app for release, run the 'flutter build web' command in your app's top directory. By default, this command creates a build using the auto renderer option, which deploys the HTML renderer for mobile browsers and the CanvasKit renderer for desktop browsers. However, if you wish to specify a renderer, modify your command like 'flutter build web --web-renderer html' or 'flutter build web --web-renderer canvaskit'.
The deployment process is as simple as uploading the output of your build (build/web) to your web server. However, several services can help to simplify this process:
Firebase provides tools to automatically build and deploy your Flutter web app. By installing and initializing Firebase in your app's directory, you can utilize the firebase init hosting and firebase deploy commands to upload your assets to Firebase Hosting.
By default, Flutter's auto renderer option is applied. This uses the HTML renderer for mobile browsers and the CanvasKit renderer for desktop browsers. If you want to specify a renderer, you can do it with the 'flutter build web' command by passing '--web-renderer html' or '--web-renderer canvaskit'.
In this section, we will be offering some valuable tips and suggestions that could help to ensure a smoother and more efficient Flutter build release process.
When dealing with software development, issues and bugs are inevitable parts. Here are a few common issues that developers might face during the build release:
Typically, this is due to some issues with the project dependencies. Check if all dependencies are compatible with each other and the current Flutter SDK version.
Check your main() function and debug your issues carefully. Sometimes unexpected null values or not handling exceptions properly can cause the app to crash.
Sometimes, an app behaves differently in debug and release modes. This could be due to factors like different operating conditions or optimizations made during release builds.
Always have proper error handling and logging mechanisms in your app. Make sure to test your app thoroughly in all modes.
While debugging issues, good, user-friendly error messages can be very helpful. Ensure that your app provides helpful error messages during failures, such as network requests exceptions or database exceptions. This not only enhances the user experience but also eases the debugging process when an issue arises.
Always be open to feedback from your app users. Users are the best source for identifying real-world issues in your app. Responses and reviews from users can help identify blind spots in the development and improve future versions of the app. Actively fix those issues and roll out updates regularly.
In conclusion, Flutter is a robust framework that answers the crucial necessity of modern application development – crafting efficient and aesthetically pleasing applications targeting multiple platforms from a single code base. With its multitude of features and a growing community, Flutter has made application development enjoyable and efficient. This guide offered an overview of how to build and release your Flutter application on multiple platforms, including Android, iOS, and Web.
You can also visit official Flutter docs for detailed information. Keep deploying powerful Flutter apps! 💙
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.
