Flutter is revolutionizing CX for
mobile and web apps
Why do you need to get on board?
Importance of Customer experience
01 for mobile apps & web apps
Webinar Agenda 02 Drawbacks of legacy frameworks
What to Expect?
How Flutter covers those CX drawbacks
03
Speakers Consistency across all platforms
04
Prateek Bhojak
Kaustubh Kushte
And More..
Nikhil Patil
What is Flutter?
Flutter is an open-source mobile application development SDK created by Google. It is
Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web,
and desktop from a single codebase.
Used to develop hybrid applications for Primary method of creating
applications for
3
4
Trends - Hybrid App
5
Growing Online Community
6
Flutter’s Benefits to Business
Faster Time to Market Easy Maintenance Cost Efficiency Customized Advanced UI
Easy Integration with Fuchsia OS – Strong Community
existing applications A Look into future Support
7
Business Use
Cases
of Flutter
BMW Builds its Car Application with Flutter
BMW has developed its ‘My BMW’ app entirely in-house using
Flutter and Dart programming language. Flutter’s scalable and
universal software architecture has enabled BMW to rapidly
expand its content and quickly implement new functions and
customer requests. Flutter has also paved the way for BMW
to constantly improve its app with multiple updates every year,
furthering its functionality continually.
The app acts as a new universal interface with the car,
providing information on the vehicle’s status at any time. The
BMW Group’s Flutter/Dart development team is one of the
world’s largest after Google’s.
9
Alibaba Chooses Flutter to Develop
a Versatile App
Alibaba’s used goods platform, Xianyu, leveraged Flutter to fast track its app
development and instate easy app maintenance. Alibaba aimed to create an
easy-to-navigate app for users, filled with graphics (and yet load fast),
accessible to as many people as possible. Most importantly, achieve all this
at an incredible pace. Alibaba leveraged Flutter owing to its outstanding
user experience, especially its high FPS and seamless UI.
Alibaba’s developers began implementing Flutter incrementally, adding
more functionalities to the app’s framework. Xianyu’s Item Detail page, in
which the application’s critical, complex, and frequently visited section
features many images and complex UI sections, is run through a single
codebase on iOS and Android using Flutter. Using Flutter, Xianyu’s
developer’s managed to ship new features in half the time. Flutter’s
expressive UI widgets enabled the creation of a sleek UI and significantly
reduced the workload when implementing new features
10
Project Management
Advantages using
Flutter
One team
multiple platforms
12
Improved
Communication
13
Reduced
Development Time
14
Reducing
Testing Time
15
Cost
Reduction
16
Flutter’s
Architectural
Overview
17
Widgets (stateful v/s stateless)
Stateful Widget Stateless Widget
The widgets whose state can be altered The widgets whose state can not be
once they are built are called stateful altered once they are built are called
Widgets. These states are mutable and can stateless widgets. These widgets are
be changed multiple times in their lifetime. immutable once they are built.
18
Stateful Widget Stateless Widget
class Demo extends StatefulWidget { class DemoWidget extends Stateless Widget {
@override @override
_DemoState createState() =>
Widget build(BuildContext
_DemoState(); context) {
} return Container();
class _DemoState extends State<Demo> { }
@override
}
Widget build(BuildContext context) {
return Container();
}
Timeline - Identify the jank in the app. Jank is unreliable or poor
quality of animation/UX
Performance - Bottom Up chart to tell which part of code is taking
Flutter
more CPU usage
Memory tab - Allows you to view live memory consumption
Network tab - For viewing every single details of your network
Dev Tools
requests
Logging tab - For viewing system logs as well as console logs
printed by developer
Debugging - For inspecting your local variables & finding out bugs.
Questions?
