Developed by Flow Labs 🚀

Flutter Kit

This starter kit was created to address the challenges of initializing a project. At Flow Labs, we identified recurring patterns when starting a project: state management, authentication, forms, alerts, snackbars, styles, authentication, users, rules and more. The idea behind this repository is to consolidate all the knowledge we’ve gained from building apps into a single resource.

This kit is not a "framework"; rather, it's a guide for initializing a project with useful tools, popular libraries, folder structures, widgets, and more. The key idea is flexibility: developers have the freedom to choose their preferred structure. The goal of this repository is to be a helpful starting point without imposing rigid constraints on developers.

Screenshots

Platforms

• Android
• IOS

Features

• Sign In
  • Google
  • Apple
• Sign Up
  • Email/Password
• Validate Email
• Forgot Password
• Profile
• Preferences
  • Lenguage
  • Theme
    • Light
    • Dark
• Delete user
• Export data
  • Auth
  • Firestore
• Emulators

Index

• Download Kit
• Firebase
  • Install firebase CLI
  • Create firebase projects
  • Configuration services
    • Authentication
      • Google
      • Apple
      • Email and password
    • Firebase Database
    • Storage
    • Functions
  • Deploy
    • Rules
• Flutter App
  • Configuration initial project
    • Install VGV project
    • Add dependencies
    • Copy the app_initial
    • Set Firabase environments in the project
  • Create the app
  • Install the kit
• Set plaforms
  • IOS
    • Set BundleId
    • Set Min Version iOS
    • Add Permissions
    • Sign in with Apple
    • Sign in with Google
  • Android
    • Set Namespace
    • Update min-sdk-version
    • Sign in with Google
• Emulators
  • Run emulators
  • Functions
  • Config App
• Export data from Firebase
  • Firebase Auth
  • Firestore

Download Kit

This is the first step to do something with the kit

git clone https://github.com/Flowlabsio/flutter_starter_kit.git <project-name>

cd <project-name>

# Open project with vscode
code .

Firebase

Install firebase CLI

# Download CLI
curl -sL https://firebase.tools | bash

# Or from npm
npm install -g firebase-tools

# Login in firebase
firebase login

Create firebase projects

We will go to create the firebase projects for each environment

1. Open firebase/Makefile and rename the var PROJECT_NAME

Aclaration: If you will have more than three envirnments, add you other envirnments in the var ENVIRONMENTS on firebase/Makefile

2. Create the projects for each envirnments

cd firebase

make create_firebase_project

This command could be failed because the name is used on another project (and the names of the projects could be unique), if that happen try to run the next command for each failed project

firebase projects:create <project-name>-<env>

Or go to the console and drop the projects created and start again this process. Or create manually

Configuration services

This configuration is the basic setup to use the app_initial this app use four services in Firabase, Authentication and Firestore Database, Storage and Functions

You must to cofig every services in each environment. Or if you want to only start with development (or another) you can only set that and then the another environments

Authentication

The Sign-in methods should be three

1. Email and password (iOS and Android)
2. Google (iOS and Android)
3. Apple (iOS)

Google

1. Select "Google"

2. Set enable and set the facing name (you can change this later)

You will see this title when you try to sign-in with Google in the app.

3. Press "Save"

Apple

1. Select "Apple"

2. Press "Save"

Email and password

1. Select "Email/Password"

2. Press "Save"

Firebase Database

1. Enter in "Firebase Database" and press in "Create Database"

2. Choose a location

3. Press "Create"

Storage

Both Storage and Functions will need to set a "Billing Account". This point is important because if you dont do that you won't be able to use this services instead with the emulators

1. Go to the "Storage" section and press "Upgrade project"

3. If you have an account, choose one of them, otherwise, create one

4. Set a budget

5. After that you will see the button "Get started", press it

6. Select your location

7. Press "Create"

Functions

1. Press "Get started"

2. Press "Continue"

3. Press "Finish"

Deploy

Rules

Go to /firebase and select the project firebase use <project-name>-<env>

Deploy the rules to Firebase

firebase deploy --only firestore:rules
firebase deploy --only storage

Flutter App

This starter kit use the template of Very Good Ventures to generate the app. The team believe it's a great standard to lunch an app. Therefore we will follow the next steps to install the CLI and generate the app.

Install VGV project

1. Install the VGV CLI

dart pub global activate very_good_cli

2. Run one by one the commands to create the project and leave every file and file in the root folder

# Go to the root of the project

# Create the project
very_good create flutter_app <project-name>

# Copy project files
rsync -avh --ignore-existing <project-name>/ .

# Delete the other project
rm -rf <project-name>

Add dependencies

flutter pub add app_ui --path=./kit/app_ui
flutter pub add app_core --path=./kit/app_core
flutter pub add app_helpers --path=./kit/app_helpers

flutter pub add go_router \
  equatable \
  flutter_native_splash \
  reactive_forms \
  google_sign_in \
  sign_in_with_apple \
  firebase_core \
  firebase_auth \
  cloud_firestore \
  firebase_storage \
  image_cropper \
  image_picker \
  permission_handler \
  shared_preferences

Copy the app_initial

1. Delete the folder lib/app, lib/counter, test/counter

2. Go to test/app/view/app_test.dart and paste this

import 'package:flutter_test/flutter_test.dart';

void main() {
  group('App', () {
    testWidgets('', (tester) async {
      expect(true, true);
    });
  });
}

4. Replace the folder lib/l10n/arb by kit/app_initial/lib/l10n/arb

5. Move the kit/app_initial/lib/src to lib/

6. Go to kit/app_initial/lib/bootstrap.dart.template copy the content and paste in lib/bootstrap.dart

7. Run this command to fix the path's dependencies

./replace_text.sh ./lib "app_initial" "<project-name>"

flutter pub get

8. Go to every main_<env> and fix the App dependencie

import 'package:<project-name>/src/app/app.dart';

6. Delete the folder kit/app_initial

Set Firabase environments in the project

Before to start with this step remember to finish all the steps about create projects in the "Firebase" section

1. Instal flutterfire_cli to config the firebase console with the app

dart pub global activate flutterfire_cli

2. Then config run this command

./configure_firebase.sh \
    --project="<project-name>-<env>" \
    --ios-bundle-id="com.<org>.<project-name>.<env>" \
    --android-package-name="com.<org>.<project-name>.<env>" \
    --env="<env>"

3. Set the platforms

If you go to

At the seccion "Your apps", you will see your apps

Will apear four new files in environments/<env>/.

* firebase_options.dart
* GoogleService-Info.plist
* google-services.json
* firebase.json

After run the project with vscode, this files with be paste in their correct position

* lib/firebase_options.dart
* ios/Runner/GoogleService-Info.plist
* android/app/google-services.json
* firebase.json

Repeat this process for each environment (if you configurated the other environment).

5. From the root of the project run make <env> to paste the firebase config files in their positions (this proccess in automatic with vscode)

6. Go to lib/bootstrap.dart and uncomment this lines

/// UNCOMMENT THIS LIKE AFTER ADDING FIREBASE CONFIGURATION
// await Firebase.initializeApp(
//   options: DefaultFirebaseOptions.currentPlatform,
// );

7. Delete old .git with rm -rf .git

Set plaforms

IOS

Set BundleId

1. Open xcode

open ios/Runner.xcworkspace

2. Press on "Runner"

3. Go to "Signing & Capabilities"

5. Set the bundle id and team for each team (remember that the bundle id must match with the bundle id create in firebase console)

Set Min Version iOS

In the Podfile set the min version in 13 (required by firebase_auth). Go to ios/Podfile, paste

platform :ios, '13.0'

Add Permissions

In the Podfile paste in the final

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)

    target.build_configurations.each do |config|
      # You can remove unused permissions here
      # for more information: https://github.com/BaseflowIT/flutter-permission-handler/blob/master/permission_handler/ios/Classes/PermissionHandlerEnums.h
      # e.g. when you don't need camera permission, just add 'PERMISSION_CAMERA=0'
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',

        ## dart: PermissionGroup.camera
        'PERMISSION_CAMERA=1',

        ## dart: PermissionGroup.microphone
        'PERMISSION_MICROPHONE=1',

        ## dart: PermissionGroup.photos
        'PERMISSION_PHOTOS=1',

        ## dart: PermissionGroup.notification
        'PERMISSION_NOTIFICATIONS=1',
      ]
    end
  end
end

Sign in with Apple

1. Press on "Runner"

2. Go to "Signing & Capabilities"

3. Press

5. Add "Sign in with Apple"

Sign in with Google

1. Go to environments/<env>/GoogleService-Info.plist and copy the value of the key REVERSED_CLIENT_ID and past it in the environments/<env>/Info.plist in the CFBundleURLSchemes

If you can't find the REVERSED_CLIENT_ID it's because the Sign in with Google configuration in firabase is missing.

<dict>
    <!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
    <!-- Google Sign-in Section -->
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleTypeRole</key>
            <string>Editor</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <!-- TODO Replace this value: -->
                <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
                <string>[REVERSED_CLIENT_ID]</string>
            </array>
        </dict>
    </array>
    ...
</dict>

2. Go to environments/<env>/GoogleService-Info.plist and copy the value of the key CLIENT_ID and past it in the environments/<env>/env.json in the GOOGLE_CLIENT_ID

{
  ...
  "GOOGLE_CLIENT_ID": "<CLIENT_ID>",
  ...
}

Android

Set Namespace

1. Intall the next package

flutter pub add --dev change_app_package_name

2. Run the command

dart run change_app_package_name:main com.<org>.<project-name> --android

Update min-sdk-version

Go to android/app/build.gradle and set minSdkVersion

...
minSdkVersion 23
...

Sign in with Google

1. Excecute

# Debug
keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore -storepass android -keypass android

2. Copy the SHA1 and go to the firebase console

3. Go to "Project settings"

And select the android app

5. Press in "Add fingerprint"

6. Paste the SHA1 and press "Save"

7. Update the environment files with the command ./configure_firebase.sh (check the documentation about generate if you forgot the process)

Emulators

To use the emulators, it's necessary to choose a real firebase project, use one of created before (recommended dev environment).

Clarification: If you want to use any service in the emulator, that service must be activated in the firebase project, for example "Google Sign In", the provider of google should be activated to use it in the emulator

Run emulators

To start the emulator run

cd firebase

firebase use <project-name>-<env>

firebase emulators:start --import export/ --export-on-exit export/

Functions

Install the function dependencies (if you want to use it)

cd firebase/functions

python3 -m venv venv

source venv/bin/activate

pip install -r requirements.txt

Config App

In the app, uncomment this lines in the bootstrap.dart

/// USE EMULATORS
FirebaseFirestore.instance.useFirestoreEmulator('localhost', 8080);
await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
await FirebaseStorage.instance.useStorageEmulator('localhost', 9199);

Export data from Firebase

Clarification: There isn't a "native" way to export the data from firebase and insert in the emulator,

Firebase Auth

# Select the project
firebase use <project-name>-<env>

# Export data
firebase auth:export export/firebase_users.json --format=JSON --project <project-name>-<env> 

Firestore

1. Install firestore-export-import

npm install -g firestore-export-import

2. You have to generate new private key from "Project Settings" from Firebase Console.

3. Go to "Service Account" tab

4. And press "Generate new private key"

6. Move the key serviceAccountKey.json to the folder firebase/

7. Run

cd firebase

firestore-export -a ./<service-account-key>.json -b ./<data-namefile>.json