Flutter starter template for production applications with a REST backend

Overview

Flutter Boilerplate

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.

What this is:

This is a simple boilerplate template for creating a production-ready Flutter app with icon / splash screen generation, rest boilerplate, reporting (analytics, performance and crash reporting) all wired up for you.

What this not:

Since y'all get a bit too religious in your State Management and App Architecture ways, this templates doesn't take any opinions on these topics.

This is, therefore, not your state management and app architecture template. So, feel free to choose any state management approach or move things around to create your preferred architecture.

Or fork the repo and customize the template to your heart's content and make it your own!

That said, I may consider creating branches with my own architecture and state management opinions in future.

Getting Started

  1. Get the template

    Create your project using this repo by either:

    • On Github click "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
  2. Install dependencies

    Run flutter pub get to fetch dependencies

  3. 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>.

  4. Application Name

    Next you'll need to change your app's user-readable label - the CFBundleName and/or CFBundleDisplayName within Info.plist (for iOS) and android:label field in your application node in AndroidManifest.xml (for Android).

    I'm afraid this step is manual; would be cool if change_app_package_name could do this for you.

    NOTE: You'll also need to change your package name and description within pubspec.yaml

  5. 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 how to generate launcher icons and update your pubspec.yaml accordingly. For example, you may want to have 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

  6. Splash Screen

    We'll then generate native splash screens for both of our platforms to be shown before our app loads, and for this we'll use flutter_native_splash.

    • Copy the image you want to be shown 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 under flutter_native_splash -> color and put your preferred color code. Default is white.
    • Finally run flutter pub pub run flutter_native_splash:create to generate your resources from the splash image and update your manifest files.
  7. 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 stored in environments/ directory at the root of your project. To set up a new environment create an new file with a .env extension under environments directory (e.g. .env or debug.env or staging.env) then copy the contents of .env-sample and populate 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.

  8. 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 configuration needed, I've already done that for you.

    NOTES:

    • All the Firebase Services we're making use of 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.
  9. TODOs

    Hunt down any TODOs within the lib folder and get that sorted.

  10. Work work work work!

    Now go start working on your app. Happy hacking.

  11. 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.
  1. Profit!

Packages used

  • change_app_package_name - Change App Package Name with single command. It makes the process very easy and fast.
  • dio - The best HTTP Client for Flutter IMO. Reusable interceptors, amirite?
  • dio_firebase_performance - Dio's Interceptor implementation that sends http request metric data to Firebase.
  • 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.
  • flutter_dotenv - Load configuration at runtime from a .env file which can be used throughout the application.
  • flutter_launcher_icons - A command-line tool which 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 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() and toJson() needs.
  • 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

Buy me a coffee

You might also like...

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery.

KenBurns The Ken Burns effect is a type of panning and zooming effect used in video production from still imagery. First add to your dependencies: dep

Apr 28, 2022

A simple bank UI template with a little bit of backend. Created by Martin Gogołowicz.

Flutter Bank UI A simple bank UI template with a little bit of backend. Created by Martin Gogołowicz. How it looks: Nagranie.z.ekranu.2021-12-2.o.21.5

Oct 14, 2022

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter getx template - A Flutter Template using GetX package for State management, routing and Dependency Injection

Flutter GetX Template (GetX, Dio, MVVM) This Flutter Template using GetX package

Aug 27, 2022

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

Choose color theme template - A template will help you choose a color scheme for the application, show how widgets interact with it

choose_color_theme_template This template will help you choose a color scheme fo

Oct 24, 2022

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components to make it look like our Now UI Design, minimalistic and easy to use.

Oct 9, 2022

Clean architecture template project for new flutter applications.

Clean architecture template project for new flutter applications.

clean_template Clean architecture template project for new flutter applications. Implemented app logic RestClient - rest API client-server networking

Jul 27, 2022

Flutter starter - GetX Flutter Firebase Auth Example

Flutter starter - GetX Flutter Firebase Auth Example

GetX Flutter Firebase Auth Example UPDATE: Version 2.0.0 Changed to new language

Jan 5, 2023

Flutter course chatapp - A Flutter Course Chat App Starter

flutter_course_chat_app_starter Getting Started Firebase installations 1- Open F

Jan 5, 2022

A simple flutter starter with firebase & getX

A simple flutter starter with firebase & getX

Flutter starter GetX simplify & optimise a lot how to use Flutter! You should read a bit about GetX and Firebase. Package used Firebase (firebase_core

Jun 9, 2022
Owner
Ali Behzadian Nejad
Project Manager at Sadad Informatics corp.
Ali Behzadian Nejad
Starter-Flutter - Starter flutter project for best architecture and seperation of code

Modular-Architecture Codebase CodeBase , Infrastructure and the common Layers (c

Ahmed Tawfiq 13 Feb 16, 2022
A starter kit for beginner learns with Bloc pattern, RxDart, sqflite, Fluro and Dio to architect a flutter project. This starter kit build an App Store app as a example

Flutter Starter Kit - App Store Example A starter kit for beginner learns with Bloc pattern, RxDart, sqflite, Fluro and Dio to architect a flutter pro

kw101 678 Jan 8, 2023
Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Muhammad Rezky Sulihin 54 Nov 26, 2022
Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster.

Hungry is a Free Flutter Recipe App Starter Template that can help you develop a Recipe application much faster. You just need to add some adjustment to the frontend and you can create your own backend.

Muhammad Rezky Sulihin 48 Dec 20, 2022
Project-x2 - A Flutter E-Commerce starter template that bootstraps development of your mobile application

Flutter E-Commerce UI KIT A powerful Flutter E-Commerce starter template that bo

null 1 Apr 7, 2022
A starter template for working with Sonr's Motor in Flutter

Motor Flutter Starter This repository serves as a template starter project for the Motor Flutter library. Getting Started This project comes pre-confi

Sonr 4 Oct 18, 2022
A Very Good Blog App using Flutter, flutter_bloc, django rest framework for backend✨

Very Good Blog App - Blog sharing Features Login, register, manage personal information. Compose, edit, post blog to share with everyone. Like, save b

Nguyen Minh Dung 14 Nov 27, 2022
Structured and Organized Flutter (ANDROID+WEB) template project using Redux architecture and Retrofit rest package

flutter_redux_template A new Flutter project. JSON Models classes need this lines to json generator: part 'foo.g.dart'; //on imports factory Foo.from

Raul Abreu 2 Apr 11, 2022
Production-grade project developed during the Reso Coder Academy Flutter Bootcamp: It's a mobile Github repository viewer

RepoStar - GitHub Starred Repository Manager Production-grade project developed during the Reso Coder Academy Flutter Bootcamp. It's a mobile Github s

Kishan Dhankecha 4 Aug 18, 2022
A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready.

Package Rename A Blazingly Fast way to configure your Bleeding Edge flutter project to be production ready. Package Rename handles changing 30 fields

OutdatedGuy 3 Aug 24, 2022