This is my Flutter starter template for production applications with a REST backend.
The main aim of this template is to get you up and running as fast as possible on your next production-ready Flutter project without all the hassle of initial project setup.
This is a simple boilerplate template for creating a production-ready Flutter app with icon/splash screen generation, rest boilerplate, and reporting (analytics, performance, and crash reporting) all wired up for you.
Since y'all get a bit too religious in your State Management and App Architecture ways, this template doesn't take any opinions on these topics.
This is, therefore, not your state management and app architecture template. So, you can choose any state management approach or move things around to create your preferred architecture.
Or fork the repo, customize the template to your heart's content, and make it your own!
That said, I may consider creating branches with my architecture and state management opinions in the future.
-
Get the template
Create your project using this repo by either:
- On Github, click the
"Use this template"
button, which will allow you to create your project using this repo as your baseline, or - Clone this repo to your local machine
- On Github, click the
-
Install dependencies
Run
flutter pub get
to fetch dependencies. -
Application Bundle Name
Now to change your app's package name / bundle identifier in both Android and iOS manifests, run
flutter pub run change_app_package_name:main <com.new.package.name>
.- This step uses change_app_package_name, go give the package some love.
-
Application Name Next you'll need to change your app's user-readable label - the
CFBundleName
and/orCFBundleDisplayName
withinInfo.plist
(for iOS) andandroid:label
field in your application node inAndroidManifest.xml
(for Android).I'm afraid this step is manual; it would be cool if
change_app_package_name
could do this for you.NOTE: You'll also need to change your package
name
anddescription
withinpubspec.yaml
-
App Icons
Then we'll auto-generate your app launcher icons using flutter_launcher_icons package.
- Copy the image you want to make your launcher icons out of to
assets/icon/icon.png.
- Now run
flutter pub run flutter_launcher_icons:main
. This command will auto-generate Android and iOS launcher icons from the PNG file for the different DPIs and place them in their respective resource directories.
NOTE: Check the package documentation for more configuration options on generating launcher icons and update your
pubspec. yaml
accordingly. For example, you may want different icons for different platforms since Android allows you to use a transparent icon and iOS doesn't. However, the default configuration included in this template will be sufficient in most cases. - Copy the image you want to make your launcher icons out of to
-
Splash screen
We'll then generate native splash screens for both of our platforms which your app will display before loading is complete, and for this, we'll use flutter_native_splash.
- Copy the image you want to be displayed at the center of your splash screen to
assets/splash/splash.png.
- To change the background color of your splash screen, go to your
pubspec.yaml
underflutter_native_splash -> color
and put your preferred color code. The default is white. - Finally, run
flutter pub run flutter_native_splash:create
to generate your resources from the splash image and update your manifest files.
- Copy the image you want to be displayed at the center of your splash screen to
-
Environment variables
We'll make use of flutter_dotenv package to store and retrieve our app configuration from
.env
files. This will allow us to easily switch between different app configurations when running the app under different environments like production, staging, or debug modes.All
.env
files are located in theenvironments/
directory at the root of your project. To set up a new environment, create a new file with a.env
extension under theenvironments
directory (e.g..env
ordebug.env
orstaging.env
), then copy the contents of.env-sample
and populate it as needed.Loading your environment file is as easy as:
import 'package:flutter_dotenv/flutter_dotenv.dart'; ... await dotenv.load('environments/.env');
And make use of environment variables like so:
import 'package:flutter_dotenv/flutter_dotenv.dart'; ... final serverUrl = dotenv.env['SERVER_URL'];
NOTE: All
.env
files are.gitignored
by default since they may contain sensitive information such as paths, keys, and such. -
Firebase Reporting
In this step, we are going to integrate different Firebase Reporting Tools into your app, including Firebase Analytics, Firebase Performance, and Crashlytics.
- Create your Firebase project on the Firebase Console
- Download your
GoogleService-Info.plist
&google-services.json
and drop them into their corresponding folders for iOS and Android. I've `.gitignore'd these files so that you won't, by any chance, have them checked into your VCS by mistake. - Well, that's it. You're done! No further configuration is needed; I've already done that for you.
NOTES:
- All the Firebase Services we're using in this project are free of charge - at least at the time of writing - so they will not attract any charges.
- With this step, we'll also have integrated Firebase Performance Monitoring into your HTTP Client using dio_firebase_performance which is a Dio Interceptor that will measure the performance of all your HTTP calls and report the stats to Firebase.
-
TODOs
Locate any
TODOs
within the lib folder and get that sorted. -
Work work work work!
Now go start working on your app. Happy hacking.
- Deploying
Before releasing your Android app, make sure to sign it by:
-
Generate a Keystore file if you don't already have one. If you have one, ignore this step and go to the next.
-
Go to
android/key.properties
and include your Keystore path, alias, and password.
- Profit!
- change_app_package_name - Change App Package Name with a single command. It makes the process very easy and fast.
- dio - The best HTTP Client for Flutter IMO. Reusable interceptors, amirite?
- dio_http_cache - Dio interceptor to cache requests. Intercepts requests to respond with cached data and responses to cache received remote data. Very configurable.
- dio_log - It's a Dio Interceptor that presents your request & response logs within your app's UI
- firebase_analytics - Flutter plugin for Google Analytics for Firebase, an app measurement solution that provides insight on app usage and user engagement on Android and iOS.
- firebase_crashlytics - Flutter plugin for Firebase Crashlytics. It reports uncaught errors to the Firebase console.
- firebase_performance - Flutter plugin for Google Performance Monitoring for Firebase, an app measurement solution that monitors traces and HTTP/S network requests on Android and iOS.
- firebase_performance_dio - Dio's Interceptor implementation that sends http request metric data to Firebase.
- flutter_dotenv - Load configuration at runtime from a
.env
file which can be used throughout the application. - flutter_launcher_icons - A command-line tool that simplifies the task of updating your Flutter app's launcher icon.
- flutter_native_splash - Automatically generates native code for adding splash screens in Android and iOS. Customize with a specific platform, background color, and splash image.
- freezed - Simple yet powerful code generator for immutable classes with all the good stuff like unions/pattern-matching/copy etc. Made by Remi Rousselet, the creator & maintainer of Provider. Can work with json_serializable for all your
fromJson()
andtoJson()
needs. - go_router - This package builds on top of the Flutter framework's Router API and provides convenient URL-based APIs to navigate between different screens.
- screenshots - Screenshots is a standalone command line utility and package for capturing screenshot images for Flutter.
- pretty_dio_logger - Dio interceptor that prettily prints to console HTTP requests and responses going through Dio