A Flutter Starter Kit (Boilerplate) to kick-start your next Android and iOS app

AceLords

Last update: Dec 28, 2022

Overview

Flutter Starter Kit (Boilerplate) using the BLoC Pattern

A Flutter starter application that utilizes the BLoC Pattern. You can read more at this Medium's excellent post

Features

Centralized place to manage your application's colors/branding (lib > utils > styles)
Centralized place to manage your application's constants/url/keys (lib > utils > constants)
BLoC Pattern when fetching and posting data over the internet.
Logically & Naturally organized files & folders.
- api - hold all your common api concerns (ApiBaseHelper, ApiResponse, AppException)
- blocs - hold all your blocs (Streams - provide data to the views. relate to controllers in Laravel)
- models - hold all your models (relate to models in Laravel)
- repositories - hold all your repositories (CRUD operations)
- responses - hold all your responses
- utils - hold all your utility files
- views - hold all your views/ui (relate to views in Laravel)
  - partials - hold all your commonly used widgets (ApiError, Loading)
Google AdMob ready
Firebase FCM ready

Sample pages included:

Splash Screen
Intro Screens (when app installed)
Homepage
About
Rate App
Refer a Friend
Login
flutter tips (Sample content page)
Unknown Page (The fallback page when router doesn't find page specified in navigation)
Movies List (Demonstrates BLoC Pattern when fetching a list of movies)

Crowdfunding

It's also possible to buying products and merchandise at Marketplace.

Getting Started

To safely start off your new flutter application while basing it off this project:

git clone [email protected]:lexxyungcarter/flutter-starter-kit.git myapp
Then open the folder inside Android Studio (Sorry vscode guys).
Using Android Studio, update the namespace of your project.
You're good to go
Go under lib > utils folder and update your constants and styles file accordingly.
You can even create an env.dart file inside there to store your secret keys such as api keys while testing. This file will not be saved in git for privacy concerns

How to rename to your namespace (technically, to your appId)

Say, your new appId is meant to be example.company.myapp, here's how to go about it:

Ensure Android Studio has finished indexing your project. VERY IMPORTANT
Making sure you're in the *Project Viewer mode, expand on the starterkit_android to its entirety
As you can see, the current nammespace is set to space.acelords.starterkit
Right-click on space, select refactor>rename and rename to your desired name, e.g. example
Select Do Refactor on all files presented at the terminal.
Repeat the same steps for the other parts of the namespace, i.e. acelords => example and starterkit => myapp
Confirm the namespace changing in AppManifest and all build,gradle files.
You're good to proceed building your app.

Building in DEV and Deploying to PRODUCTION

When building your app, you may need to set some things to testing (such as Google Ads) to avoid any penalties. And when deploying, you may also need to revert a setting to production mode (such as Google Ads also to display real ads)

Setting up for Local Development

Go to lib > utils > admob_constants.dart file
Set static bool testing = true;
Go to lib > utils > constants.dart file
Set static bool testing = true;

Setting up for Production Development

Go to lib > utils > admob_constants.dart file
Set static bool testing = false;
Go to lib > utils > constants.dart file
Set static bool testing = false;

Also ensure you have provided your correct Google Ad Units in admob_constants.dart file. This way, you'll ensure your app displays correct ads in PlayStore.

NB: To deploy Flutter app to store for the first time, you might need to read up on How To. These instructions assume you already know how to.

Google AdMob

To setup Google Ads,

Update this file accordingly: lib > utils > admob_constants.dart.
Update the app's build.gradle (located under android > app > build.gradle) and go to line 68. Update as instructed in the comments.
Update the projects' build.gradle (located under android > build.gradle) and go to line 12. Update as instructed in the comments.

Remember to update Your_Admob_App_ID in the respective platforms.

For iOS

Go to ios > Runner > Info.plist file
Navigate to line #45 and update Your_Admob_App_ID accordingly.

For Android

Go to android > app > src > main > AndroidManiifest.xml file
Navigate to line #16 and update Your_Admob_App_ID accordingly.

FaceBook Ads

The setup for facebook ads is similar. The same file lib > utils > admob_constants.dart can be used/modified or another new file created for easier ads management.

Setting up FCM - Firebase Cloud Messaging

Go to lib > utils > constants.dart file
Search line #36 static String publicTopicKey = testing ? "testing" : "public";
Set the topic you'd like to always post to once app is run
Update AndroidManifest.xml file android > app > src > main > AndroidManifest.xml. Go to line 20 and update accordingly.
You can also update Colors file android > app > src > main > res > values > colors.xml to match your app's theme color.

For apps requiring many topics, you can register multiple topics as required.

NB: Ensure you understand FCM from the developers console at Google. A medium article is under authoring to explain this further.

In case you need the Firebase Functions setup project, contact us and we'll gladly organize how. It is written in Node. Firebase Functions can automatically send notifications to your users when a CRUD operation happens in Firebase CloudStore e.g. a new order, a new blog post, a team won, or an invoice payment. Your imagination is the limit.

Updating Launcher Icon

Design your app logo, preferably in 1024x1024 size (px). Once done, open https://appicon.co/#app-icon in your browser and generate a new set of icons.

Place appstore.png to assets > icon and rename it to icon.png
Copy the other folders to their respective locations. For instance, on android it is android > app > src > main > res.

NB: You might need to manually remove Icon files from the folders. The website weirdly adds the unnecessary files, hindering a successful build

Once done, run this command in terminal: flutter pub run flutter_launcher_icons:main

AOB

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Contributing?

Suggestions are welcome and any contributions whatsoever are highly valued. If feeling a little bit shy, feel free to send an email to

Credits

Lexx YungCarter
AceLords
Google - For creating Flutter!

MSWS Flutter architecture starter

msws_starter Module Service Widget Screen Flutter architecture project starter. For examples visit Example project Main abstractions Main 5 types of a

Jul 7, 2021

A Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech.

AI Translator This is a Translator App Which is Build using Flutter, Speech To Text, Google ML Kit, Google Translator and Text To Speech. Download App

Jul 16, 2022

An App I made to learn of FIrebase Phone Auth and ML Kit

demoapp A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Oct 19, 2021

📱 CyBear Jinni App is the app to control CyBear Jinni Hub 💡 remotely from your Android, IOS and Web Browser

CyBear Jinni App Welcome This repository is in charge of the CyBear Jinni App and is part of the CyBear Jinni Smart Home system. The CyBear Jinni App

Dec 1, 2022

🍔😋 Grocery Shopping App template UI kit in Flutter

🍔 😋 Fryo - Grocery Shopping App template kit A Flutter UI template of a Grocery Shopping App I found on Uplabs. Design screens are on Uplabs. It's p

Jan 3, 2023

A Flutter IM Kit

flutter_im_kit 概述 flutter_im_kit 是一套基于 Flutter 的 IM 组件库，提供 IM 业务场景下的常用 UI 组件和解决方案。组件集合 flutter_excellent_badge 常用于消息提醒的红点展示。 BadgePosition 用于设置 flutt

Jul 27, 2022

A flutter ffmpeg kit example

flutter-ffmpeg-kit-lts-repro Steps to reproduce: git clone [email protected]:jozsefsallai/flutter-ffmpeg-kit-lts-repro.git cd flutter-ffmpeg-kit-lts-repr

Mar 5, 2022

A complete Flutter chat UI kit

A complete Flutter chat UI kit This Flutter package provides you with a base structure as well as a set of tools that allow you to quickly build up a

Dec 25, 2022

With ML Kit's face detection API, you can detect faces in an camera or image, Note that the API detects faces, it does not recognize people

Face Detection This project is a starting point for a Flutter application. Getting Started For help getting started with Flutter, view our online docu

Dec 29, 2022

Comments

'Element' is imported from both 'package://...' and 'package://...'

I am trying to resolve this issue below. But I can't find the files originated in the error: "page.dart" and "navigator.dart" does anyone have an idea of what may be throwing this error?

Config: Windows 10 Pro Flutter Config:

Flutter 1.20.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision bbfbf1770c (3 weeks ago) • 2020-08-13 08:33:09 -0700
Engine • revision 9d5b21729f
Tools • Dart 2.9.1

Copy & paste:

../../AppData/Local/Pub/Cache/hosted/pub.dartlang.org/intro_views_flutter-2.8.0/lib/intro_views_flutter.dart:241:11: Error: 'Page' is imported from both 'package:flutter/src/widgets/navigator.dart' and 'package:intro_views_flutter/UI/page.dart'.
          Page(
          ^^^^
../../AppData/Local/Pub/Cache/hosted/pub.dartlang.org/intro_views_flutter-2.8.0/lib/intro_views_flutter.dart:249:20: Error: 'Page' is imported from both 'package:flutter/src/widgets/navigator.dart' and 'package:intro_views_flutter/UI/page.dart'.
            child: Page(
                   ^^^^


FAILURE: Build failed with an exception.

* Where:
Script 'C:\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 896

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command 'C:\flutter\bin\flutter.bat'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 17s
Exception: Gradle task assembleDebug failed with exit code 1
Exited (sigterm)

Captura de Tela (30)

opened by alexrintt 7

Navigate login route when authentication token expired

I have a question when using your boilerplates, hope I can get solutions for my case. In API base helper, when response has status code is 401 (token expired), how can I automatically navigate the login page.

opened by cuongltv 1

Cannot build for ios

Thanks for great stuff for any starter, but It doesn't work when building for ios, It seems that CocoaPods could not find the pod "flutter_native_admob".

# flutter pub get
Running "flutter pub get" in flutter-starter-kit...                 0.7s

# flutter build ios
Building space.acelords.starterkit for device (ios-release)...
Found saved certificate choice "iPhone Developer: Chih Chao Yu (A83KYF885L)". To clear, use "flutter config".
Signing iOS app for device deployment using developer identity: "iPhone Developer: Chih Chao Yu (A83KYF885L)"
Running pod install...                                              2.1s
CocoaPods' output:
↳
      Preparing

    Analyzing dependencies

    Inspecting targets to integrate
      Using `ARCHS` setting to build architectures of target `Pods-Runner`: (``)

    Fetching external sources
    -> Fetching podspec for `Flutter` from `Flutter`
    -> Fetching podspec for `connectivity` from `.symlinks/plugins/connectivity/ios`
    -> Fetching podspec for `connectivity_macos` from `.symlinks/plugins/connectivity_macos/ios`
    -> Fetching podspec for `device_info` from `.symlinks/plugins/device_info/ios`
    -> Fetching podspec for `flutter_native_admob` from `.symlinks/plugins/flutter_native_admob/ios`
    -> Fetching podspec for `flutter_share_me` from `.symlinks/plugins/flutter_share_me/ios`
    -> Fetching podspec for `get_version` from `.symlinks/plugins/get_version/ios`
    -> Fetching podspec for `launch_review` from `.symlinks/plugins/launch_review/ios`
    -> Fetching podspec for `package_info` from `.symlinks/plugins/package_info/ios`
    -> Fetching podspec for `share` from `.symlinks/plugins/share/ios`
    -> Fetching podspec for `shared_preferences` from `.symlinks/plugins/shared_preferences/ios`
    -> Fetching podspec for `shared_preferences_macos` from `.symlinks/plugins/shared_preferences_macos/ios`
    -> Fetching podspec for `shared_preferences_web` from `.symlinks/plugins/shared_preferences_web/ios`
    -> Fetching podspec for `url_launcher` from `.symlinks/plugins/url_launcher/ios`
    -> Fetching podspec for `url_launcher_macos` from `.symlinks/plugins/url_launcher_macos/ios`
    -> Fetching podspec for `url_launcher_web` from `.symlinks/plugins/url_launcher_web/ios`

    Resolving dependencies of `Podfile`
      CDN: trunk Relative path: CocoaPods-version.yml exists! Returning local because checking is only perfomed in repo
      update
      CDN: trunk Relative path: all_pods_versions_c_7_9.txt exists! Returning local because checking is only perfomed in
      repo update
      CDN: trunk Relative path: Specs/c/7/9/Reachability/3.2/Reachability.podspec.json exists! Returning local because
      checking is only perfomed in repo update
    [!] CocoaPods could not find compatible versions for pod "flutter_native_admob":
      In Podfile:
        flutter_native_admob (from `.symlinks/plugins/flutter_native_admob/ios`)

    Specs satisfying the `flutter_native_admob (from `.symlinks/plugins/flutter_native_admob/ios`)` dependency were
    found, but they required a higher minimum deployment target.

    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:328:in `raise_error_unless_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:310:in `block in unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:308:in `tap'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:308:in `unwind_for_conflict'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:684:in `attempt_to_activate'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:254:in `process_topmost_state'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolution.rb:182:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/molinillo-0.6.6/lib/molinillo/resolver.rb:43:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/resolver.rb:94:in `resolve'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:1065:in `block in
    resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/user_interface.rb:64:in `section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:1063:in `resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer/analyzer.rb:124:in `analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:410:in `analyze'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:235:in `block in resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/user_interface.rb:64:in `section'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:234:in `resolve_dependencies'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/installer.rb:156:in `install!'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/command/install.rb:52:in `run'
    /Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/lib/cocoapods/command.rb:52:in `run'
    /Library/Ruby/Gems/2.6.0/gems/cocoapods-1.9.1/bin/pod:55:in `<top (required)>'
    /usr/local/bin/pod:23:in `load'
    /usr/local/bin/pod:23:in `<main>'

Error output from CocoaPods:
↳

    [!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified.
    Please specify a platform for this target in your Podfile. See
    `https://guides.cocoapods.org/syntax/podfile.html#platform`.

Error running pod install

opened by youjhihchao 1

Releases(1.0.0)

1.0.0(Jan 21, 2021)
Pages

Splash Screen

About Us

Intro Screen

Login Page

App Drawer

Share App

Movies List

Features

Admob (Google + FaceBook Ads)

Firebase Cloud Messaging

Updatable Launcher Icon

Easier theming / constants set in one location

Working in both iOS and Android Simulators
Source code(tar.gz)
Source code(zip)