Flutter Rev CX

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.

Transcript

1. Flutter is revolutionizing CX for mobile and web apps Why do you need to get on board?
2. Drawbacks of legacy frameworks 02 How Flutter covers those CX drawbacks 03 Consistency across all platforms 04 Webinar Agenda And More.. Importance of Customer experience for mobile apps & web apps 01 What to Expect? Nikhil Patil Prateek Bhojak Kaustubh Kushte Speakers
3. 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. 3 Used to develop hybrid applications for Primary method of creating applications for
5. Trends - Hybrid App 5
6. Growing Online Community 6
7. Flutter’s Benefits to Business 7 Faster Time to Market Easy Maintenance Cost Efficiency Customized Advanced UI Fuchsia OS – A Look into future Easy Integration with existing applications Strong Community Support
8. Business Use Cases of Flutter
9. BMW Builds its Car Application with Flutter 9 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.
10. Alibaba Chooses Flutter to Develop a Versatile App 10 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
11. Project Management Advantages using Flutter
12. 12 One team multiple platforms
13. 13 Improved Communication
14. 14 Reduced Development Time
15. 15 Reducing Testing Time
16. 16 Cost Reduction
17. Flutter’s Architectural Overview 17
18. The widgets whose state can be altered once they are built are called stateful Widgets. These states are mutable and can be changed multiple times in their lifetime. Widgets (stateful v/s stateless) Stateful Widget 18 Stateless Widget The widgets whose state can not be altered once they are built are called stateless widgets. These widgets are immutable once they are built.
19. class DemoWidget extends Stateless Widget { @override Widget build(BuildContext context) { return Container(); } } Stateless Widget Stateful Widget class Demo extends StatefulWidget { @override _DemoState createState() => _DemoState(); } class _DemoState extends State<Demo> { @override Widget build(BuildContext context) { return Container(); } }
20. Flutter Dev Tools 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 more CPU usage Memory tab - Allows you to view live memory consumption Network tab - For viewing every single details of your network requests Logging tab - For viewing system logs as well as console logs printed by developer Debugging - For inspecting your local variables & finding out bugs.
21. Questions?