Flutter is a cross-platform framework that allows building mobile apps for both Android and iOS using a single codebase. FundsCorner chose Flutter to build mobile apps quickly and reuse their existing web development team. Key benefits of Flutter include pre-built native widgets, a reactive programming model, and rich ecosystem of plugins. Popular apps like Google Ads and Alibaba have also been built with Flutter. FundsCorner leverages Flutter's reactive state management and scoped model design pattern to build a cross-platform borrower app with modular components.

1. FLUTTER AT
FUNDSCORNER
OUR KEY DECISION
FRAMEWORK AND
LEARNINGS

2. WHY FLUTTER?
Executive View
Cross-Platform
(Desktop, Web,
Android and iOS)
Fast product
iterations
Rich Native Widgets
Developer View
Native tooling &
Libraries
Compiles to binary
Hot re-loading
FLUTTER IS SUITED FOR BUILD-ONCE ROLLOUT ANYWHERE & FAST-TO-MARKET USE CASES

3. FUNDSCORNER DRIVING REQUIREMENTS
Ability to rollout mobile apps fast, with a
focus on usability and accuracy
Re-use web development team to build
mobile apps as well
EMBRACE FRUGALITY, CONSISTENCY AND SPEED

4. KEY BENEFITS WITH FLUTTER AT FUNDSCORNER
UI & UX
• Pre-built widgets
• Native look & Feel
• Minimal re-work
Programming
Constructs
• Dart – easy on the
developers
• Asynchronous
programming a
breeze
• Hot re-load
Ecosystem
• Rich ecosystem for
reuse
• Plugins that work
(e.g.: flutter
webview plugin)
Reactive State
Management
• Easy to use state
management
• Segregate UI and
logic
Integration with
Android
• Platform interface
to integrate with
native APIs
Build and release an end-to-end, material design compliant, and functionality-rich cross-platform
app in weeks!

5. POPULAR APPS CREATED WITH FLUTTER
 Google Ads
 Alibaba
 Ebay
 Tencent
 BMW

6. REACTIVE STATE MANAGEMENT: SCOPED MODEL DESIGN PATTERN
 Enables simple state management without the complexities of Redux
Service Backend API
Request
Response
UI Store
Maintain
State
Rebuild UI
based on State
Events
Data Model
UI is completely redrawn reactively, every time data
changes

7. In declarative frameworks like Flutter, you don’t need to change the UI, you need to rebuild it.
API Client
Data Model Data Store
Widget
Call API Return Data
REACTIVE DATA FLOW
Publish
Subscribe

8. WHAT HAPPENS UNDER THE HOOD?
 Data Stores are implemented with ChangeNotifier.
 ChangeNotifier provides change notification to listeners through observable.
 Consumer widgets wrap the widget with Consumer<$Store>.
 Consumer listens for updates from the provider & re-draws the widget that it wraps.
 Use ChangeNotifierProvider at the root level, to provide an instance of ChangeNotifier to all its descendants.

9. FUNDSCORNER BORROWER APP STRUCTURE
Home
On-boarding
Loan
Application
Limit Summary
Overdues
Upcoming Dues
Pending Tasks
Limits
Summary
present?
Limits
Summary
Loan
Application
is present?
Loan Application
On-Boarding

10. INSIGHTS ON FLUTTER & DART AT FUNDSCORNER - STACKSHARE
Insights on Flutter and Dart at FundsCorner | StackShare