Skip to content

Latest commit

 

History

History
249 lines (175 loc) · 10.3 KB

README.md

File metadata and controls

249 lines (175 loc) · 10.3 KB

Scalable Flutter App Starter

👋 Hey, welcome to Scalable Flutter App.

Watch/star this repo to be notified when updates are pushed.

Table of Contents

What is Scalable Flutter App?

Scalable Flutter App is a starter template for Flutter apps.

It's designed to be scalable and easy to maintain. And should save you weeks of development time.

To get started, click on the green "Use this template" button on the top-right.

Requirements

Always keep up to date:

  • Flutter
  • Cocoapods
  • Firebase CLI

About the Author

I'm Milos Jokic and I:

  • built my first mobile app in 2007
  • grew my apps to 214k users and $106,140 revenue.
  • built apps for 10 Toptal clients.

And now I run a 6-figure devs agency where we launch MVPs in 4 weeks using Flutter & Firebase.

You can find me on:

Features

Feature Starter Pro
Platforms: Android, iOS, web
Scalable Architecture using flutter_bloc
Navigation using go_router
Scalable App Styling
GitHub Actions - code and formatting check
Responsive Design
UserMockProvider
Profile Page
Settings Page: sign out, app version...
Legal: Terms, Policy, Data Deletion
Google Fonts
Sign in and Sign Up Pages
Input Validators
Cached network image
Email Support
Lifetime Updates
Firebase Project Integration
Firebase Authentication
Firebase Remote Config
Firebase Crashlytics
Firebase Firestore
Firebase Analytics
Firebase Storage
Google Sign In
Apple Sign In
Common Cubits
In App Purchases (RevenueCat)
App Store Review Request
Local Notifications
Remote Notifications (Firebase)
HTTP Requests
Local Storage
Permissions
Environments
Localization
Dark Mode
Connectivity check
Hive - local database
MixPanel - analytics
Android - Release Signing
Onboarding
Forgot Password
🎉 BONUS: Scalable Firebase Backend Template

Scalable Flutter App Pro

Grab Scalable Flutter App - Pro Here

Docs

Code Architecture

The code architecture is based on flutter_bloc architecture proposal.

There are 4 layers:

  1. UI (Flutter Widgets)
  2. BLoC (stateful business logic)
  3. Repository (high-level API)
  4. Provider (low-level implementation)

And there's only 1 communication rule that we must follow:

The layer can only call the one layer below it.

That means that:

  • UI can only call BLoC
  • BLoC can only call Repository
  • Repository can only call Provider
  • Provider can only call external services (Firebase, HTTP, etc.)

And we avoid same-layer communication (as it creates interdependencies):

  • UserRepository calling AuthRepository is not allowed.
  • UserCubit calling UserRepository and AuthRepository is allowed.

When creating Providers, Repositories, and Cubits we follow this rule:

  • Providers are created top-level (so that they can be used in multiple Repositories)
  • Repositories are created top-level (so that they can be used in multiple Cubits)
  • Cubits are created in the router builder callbacks (so that they're accessible only where needed)
  • Cubits that are used in multiple screens are created top-level

Styling

Styling is based on Google's Material Design.

App-wide styling is defined in core/app/style.dart and is easy to update.

Here's a quick tip on custom Widget params. There are 2 Widget param types:

  • data (user, title, ...)
  • style (colors, paddings, ...)

Our custom Widgets should only hava data params.

And the style should be done app-wide (in style.dart).

That way all of our UI is consistent and easy to update.

Google Fonts

To change the font:

  1. Go to Google Fonts and select a font.
  2. Download the font files.
  3. Add the font files to assets/fonts (remove the old ones).
  4. Update style.dart with the new font (i.e. return GoogleFonts.rubikTextTheme(textTheme)).

Useful GitHub Pull Request Settings

I've found that turning on these 2 settings in GitHub repo settings helps a lot:

  1. Always suggest updating pull request branches
  2. Automatically delete head branches

FAQ

Why bloc and not X?

While GetX, Provider, Riverpod, MobX, Redux, etc. are all great solutions, most of them are too forgiving. They allow us to access and change state globally.

Whereas flutter_bloc forces us to have BuildContext in order to access and change the state. The stricter the rules, the harder it is to make mistakes.

And flutter_bloc has a great architecture proposal that scales well.

Who is Scalable Flutter App for?

Scalable Flutter App is for developers, agencies, and founders who want to:

  • build scalable Flutter apps
  • save weeks of development time
  • learn best practices

Where to learn Flutter basics?

I can only recommend what I've used myself:

What if I don't need a specific feature?

If you don't need a feature:

  • delete its imported package in pubspec.yaml
  • delete the code that uses the feature

What if I want more?

If you want Firebase integration, notifications, in-app purchases and more, get the Pro version here:

Resources

Build your app icon in minutes (free): Icon Kitchen

Cool illustrations that match your app's colors (free): unDraw

CI/CD for mobile apps (free & paid): Codemagic

Want me to launch your MVP in 4 weeks (premium)? Go to App Launch Program

Need a Flutter Expert (paid)? Go to Flutter Devs Board

Feedback

Found an issue or want to request a feature? Open an issue

Have a question? Ask me on LinkedIn or Twitter.

Enjoying Scalable Flutter App? Leave a testimonial