Beginner’s Guide to Building a Flutter App for Release

When I started writing this guide for one of our interns, I wanted it to be accessible to anyone with any level of programming knowledge…

Danial

• 3 min read
Beginner’s Guide to Building a Flutter App for Release

Beginner’s Guide to Building a Flutter App

When I started writing this guide for one of our interns, I wanted it to be accessible to anyone with any level of programming knowledge, so I focused on using free and open-source tools, while explaining every detail clearly.

1. Naming Your App and Choosing a Color Scheme

Picking a Name

Let’s start from the very beginning — choosing a name for your app. A simple and free tool for this is Namelix. It’s a name and font generator that can even inspire your color scheme.

My settings tip: Set Non-English words > High in configs and use the settings icon in the top right to limit the name length to 8 characters. I also recommend selecting .net, .app and .io domain options.

Link

While some logos on Namelix are paid, the name suggestions are completely free to use.

Designing Your Icon

For creating your app icon, you can use GIMP (free) or a locally run Text-to-Image model. Although it requires a bit more effort, this ensures you avoid copyright issues.

Choosing a Color Palette

If your icon already contains primary colors, try Colormind to create a color scheme based on your image. Alternatively, explore palettes on Coolors, or search for your favorite brand’s colors on Color Hex.

Note: If you only have one color, you can use this tool to create a color palette for dark and light themes.

2. Setting Up Your Flutter Project

Step 1: Create a Directory

First, create your project directory:

mkdir your_project_name 
cd your_project_name

Step 2: Initialize Git

Set up version control for your project with Git:

echo "# Flutter App" >> README.md 
git init 
git add README.md 
git commit -m "first commit" 
git branch -M main 
git remote add origin https://[email protected]/USERNAME/YOUR_PROJECT_NAME.git 
git push -u origin main

Step 3: Initialize Your Flutter App

Now, let’s initialize the Flutter app:

flutter create --org com.yourcompany --platforms=web,android . 
flutter pub get

Step 4: Remove the Debug Banner

To remove the debug banner, open lib/main.dart and add debugShowCheckedModeBanner: false to GetMaterialApp.

Step 5: Configure for Play Store and App Store Publishing

Android
Ensure the minimum SDK version is set to 34 or higher in android/app/build.gradle:

defaultConfig { 
    minSdkVersion 25 
    compileSdkVersion 34 
    targetSdkVersion 34 // Change this line 
    ... 
}

iOS
For iOS, set the IPHONEOS_DEPLOYMENT_TARGET to 12 or higher in ios/Runner.xcodeproj/project.pbxproj

3. Setting Up Your App Icon

Requirements

Ensure your icon is square. If it’s not, use a free tool like Online Image Editor to resize it.

Generating Icons for Android & iOS

You can use appicon.co to generate icons for iPhone, iPad, and Android. After generating them, replace the default icons:

  • Android: Replace the folders in android/app/src/main/res
  • iOS: Replace the Assets.xcassets folder in ios/Runner/Assets.xcassets

Web Icons

Web icons are generated based on the configuration in pubspec.yaml

Round Icon for Android

  • Use ImageOnline to crop your image into a circular shape.
  • Go back to appicon.co and generate round icons for Android. Name the file round_launcher
  • Update your AndroidManifest.xml (located at android/app/src/main/AndroidManifest.xml) by adding this line:
android:roundIcon="@mipmap/round_launcher"

Your final <application> section should look like this:

<application 
    android:label="your_project_name" 
    android:name="${applicationName}" 
    android:roundIcon="@mipmap/round_launcher" 
    android:icon="@mipmap/ic_launcher">

Generating Icons Locally

To generate icons locally using Flutter, add the flutter_launcher_icons package configuration in pubspec.yaml:

flutter_launcher_icons: 
  android: "ic_launcher" 
  ios: true 
  image_path: "assets/icon/icon.png" 
  web: 
    generate: true 
    image_path: "assets/icon/icon.png" 
    background_color: "#ffffff" # Remove if your icon has a background 
    theme_color: "#ffffff" # Remove if your icon has a background

Then run:

flutter pub run flutter_launcher_icons

4. Customizing Fonts

(To be added)

5. Selecting a UI Kit

I recommend checking out the Figma Community to find a UI kit that matches your app’s design.

6. Adding Third-Party Authentication

Google Login

Follow this guide to implement Google Sign-In without Firebase.

Apple Login

(In progress)

Resources

This article is part of a series designed to help you publish your app to the Play Store and App Store. It guides you through each step, from naming your app to deploying it, using free and open-source tools to ensure a smooth launch of your first Flutter app.