Tips & tricks

4 min read
Last update: November 28, 2021

Create app

flutter create myApp


Download dependencies, execute this after clone

flutter pub get

Run flutter app from terminal

flutter run


To upgrade flutter CLI

flutter upgrade


List Android (emulator and smartphones) with adb

adb devices

Default enable DevTools

flutter pub global activate devtools
flutter pub global run devtools

Check if flutter install works

flutter doctor

Clean repo and repair it

flutter clean
flutter pub cache repair


To use API

Add <uses-permission android:name="android.permission.INTERNET" /> to AndroidManifest.xml

<manifest xmlns:android=""
    <uses-permission android:name="android.permission.INTERNET" />
        <!-- ...  -->

This configuration allow to use online API, not localhost API, to do this, you have to use a tunneling service like ngrok.

Your app is available on

Add packages

Add new package to pubspec.yaml, here example with http package

Check documentation on on Installing tab and add this to pubspec.yaml (respect indent)

    sdk: flutter
  http: ^0.12.2

If you use VSCode, the IDE will execute flutter pub get but if not works, execute it manually. Add package at the top of the file where you want to use it :

import 'package:http/http.dart' as http;

// example of usage
Future<http.Response> fetchAlbum() {
  return http.get('');

If you want to see full example :

Check To use API to allow HTTP requests in your app.

Manage assets

Example to manage fonts and assets:


  # ...
    - family: Poppins
        - asset: assets/fonts/Poppins-Medium.ttf

    - assets/images/
    - assets/svg/
    - .env

Here, we have:

  • Poppins-Medium.ttf in assets/fonts/
  • Some images in assets/images/
  • Some svg in assets/svg/
  • .env (with package flutter_dotenv)

With this config, all images in assets/images/ will be loaded.

Theme colors for app

In web, we have global Sass variables, in Flutter we have ThemeData to define main colors in the app. Some Widgets will use default color based on this list but you can define a color based of an item of this list if you want.

getColorHexFromStr() is totally optional, I use it to transform hexa code to Flutter color hex.

import 'package:flutter/material.dart';

ThemeData appTheme() {
  return ThemeData(
    primaryColor: Color(getColorHexFromStr('ce6442')),
    hintColor: Colors.white,
    dividerColor: Colors.white,
    buttonColor: Color(getColorHexFromStr('ce6442')),

// Give colorHex from hexa code
int getColorHexFromStr(String colorStr) {
  colorStr = "FF" + colorStr;
  colorStr = colorStr.replaceAll("#", "");
  int val = 0;
  int len = colorStr.length;
  for (int i = 0; i < len; i++) {
    int hexDigit = colorStr.codeUnitAt(i);
    if (hexDigit >= 48 ; hexDigit <= 57) {
      val += (hexDigit - 48) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 65 ; hexDigit <= 70) {
      // A..F
      val += (hexDigit - 55) * (1 << (4 * (len - 1 - i)));
    } else if (hexDigit >= 97 ; hexDigit <= 102) {
      // a..f
      val += (hexDigit - 87) * (1 << (4 * (len - 1 - i)));
    } else {
      throw new FormatException("An error occurred when converting a color");
  return val;

If you want to define ThemeData.primaryColor (on any Widget, MaterialButton is just an example)

  color: Theme.of(context).primaryColor,
  // ...

Android version / minSdk version

Some packages need a minimal SDK Android version, like flutter_secure_storage, to change it update android.defaultConfig.minSdkVersion in android/app/build.gradle.

// ...

android {
    compileSdkVersion 28

    // ...

    defaultConfig {
        // ...
        minSdkVersion 18
        targetSdkVersion 28
        // ...

    // ...

Change minimal SDK version is an important update, if user has an Android version below this SDK version, they couldn't use the application and PlayStore disallow download. To know link between SDK version and Android version, check or In this example, SDK version 18 is used by Android 4.3 (Jelly Bean), smartphone with below Android version can't use the application.

Change application name

Change attribute android:label in <application /> in <manifest />

<manifest xmlns:android="" package="com.example.cap_transactions">
    android:label="My beautiful app"

If you have problems, delete build/ folder and uninstall app from smartphone.

Change application icon

Check Flutter/Flutter packages to discover how to use flutter_launcher_icons.