Flutter at World Expo 2020 Dubai

What do the Eiffel Tower in Paris, the Atomium in Brussels, the Space Needle in Seattle, and Flutter technology have in common?
- They have all participated in a world fair.

In this talk, we will discuss how we built an end-to-end food delivery app using Flutter in just 5 months for the 24 million visitors of Dubai Expo 2020.

Meetup link: https://www.meetup.com/flutter-ad/events/288648552/
Social announcement: https://www.linkedin.com/feed/update/urn:li:activity:6985281908096004097/

Transcript

1. Flutter at Csongor Vogel gerfalcon GerfalconVogel
2. EXPO 2020 1 October 2021 to 31 March 2022 • 6 months
3. EXPO 2020 1 October 2021 to 31 March 2022 • 6 months • 24.1M visits from 178 countries
4. EXPO 2020 1 October 2021 to 31 March 2022 • 6 months • 24.1M visits from 178 countries • 200 pavilions
5. EXPO 2020 1 October 2021 to 31 March 2022 • 6 months • 24.1M visits from 178 countries • 200 pavilions • 1 opportunity
7. EXPO talabat kitchen
8. EXPO talabat kitchen • 2 floors - 2 cloud kitchen
9. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines
10. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines • 30 brands
11. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines • 30 brands • robot barista
12. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines • 30 brands • robot barista • smart lockers
13. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines • 30 brands • robot barista • smart lockers • tala-bots
14. EXPO talabat kitchen • 2 floors - 2 cloud kitchen • 15 different types of cuisines • 30 brands • robot barista • smart lockers • tala-bots • Grab n Go stations
15. What we built Dfsdf
16. What we built Dfsdf Full app flow
17. What we built Dfsdf Full app flow Kiosk app
18. What we built Dfsdf Full app flow Kiosk app Usher app
19. What we built Dfsdf Full app flow Kiosk app Usher app Kitchen projector Web app
20. Full app flow Entry point with the Native Android - iOS Home screen Menu screen Menu item screen Cart screen Pickup selection map screen Dfsdf
21. Full app flow Entry point with the Native Android - iOS Home screen Menu screen Menu item screen Cart screen Pickup selection map screen Phone number screen Dfsdf
22. Full app flow Entry point with the Native Android - iOS Home screen Menu screen Menu item screen Cart screen Pickup selection map screen Phone number screen Checkout screen Dfsdf
23. Full app flow Entry point with the Native Android - iOS Home screen Menu screen Menu item screen Cart screen Pickup selection map screen Phone number screen Checkout screen Post order screen Dfsdf Added lines of code Android: 4 518 iOS: 1 278 Flutter: 87 838
24. Kiosk app
25. Usher app
26. Kitchen projector web app
27. Our team
28. Tamás Maksa Engineering Manager Tony Fadel Sr. Director Product Guy Blackhurst Sr. Product Designer Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Yoshita Bhatia Sr. QA Quentin Gallois Sr. iOS Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer
29. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Quentin Gallois Sr. iOS Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer
30. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Quentin Gallois Sr. iOS Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 178 DAYS
31. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Quentin Gallois Sr. iOS Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer April 6 178 DAYS
32. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer April 25 Quentin Gallois Sr. iOS Engineer 159 DAYS
33. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer Quentin Gallois Sr. iOS Engineer May 30 124 DAYS
34. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer Quentin Gallois Sr. iOS Engineer June 7 116 DAYS
35. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer Quentin Gallois Sr. iOS Engineer June 22 101 DAYS
36. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 101 DAYS Quentin Gallois Sr. iOS Engineer June 22
37. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 101 DAYS Quentin Gallois Sr. iOS Engineer June 22
38. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 50 DAYS Quentin Gallois Sr. iOS Engineer Aug 11
39. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 0 DAYS Quentin Gallois Sr. iOS Engineer Oct 1
40. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer 0 DAYS Quentin Gallois Sr. iOS Engineer Oct 1
41. Challenges
42. Lots of unknowns • When should we enable the Expo app?
43. Lots of unknowns • When should we enable the Expo app? • Which version will be ready for the expo?
44. Lots of unknowns • When should we enable the Expo app? • Which version will be ready for the expo? • Where should we show the pickup stations?
45. Lots of unknowns • When should we enable the Expo app? • Which version will be ready for the expo? • Where should we show the pickup stations? • How can we easily control our Kiosk terminals?
46. Lots of unknowns • When should we enable the Expo app? • Which version will be ready for the expo? • Where should we show the pickup stations? • How can we easily control our Kiosk terminals? ⌛ Feature flags Feature flags Remote configs Feature flags Feature flags Remote configs Remote configs Remote configs Feature flags Feature flags Remote configs Feature flags Feature flags Remote configs Feature flags Remote configs Remote configs Remote configs Remote configs Feature flags Feature flags
47. Responsive UI Design draft
48. Responsive UI Samsung Galaxy Tab S7 1600 x 2560 pixel 375 x 812 pixel Design draft
49. Responsive UI @override Widget build(BuildContext context) { final mediaQuery = MediaQuery.of(context); final screenHeight = mediaQuery.size.height; /// (...) } Design draft Samsung Galaxy Tab S7 1600 x 2560 pixel 375 x 812 pixel
50. Responsive UI Design draft Samsung Galaxy Tab S7 1600 x 2560 pixel 375 x 812 pixel
51. Responsive UI import 'package:flutter_screenutil/flutter_screenutil.dart'; class App extends StatelessWidget { @override Widget build(BuildContext context) { return ScreenUtilInit( designSize: const Size(x, y), builder: () !=> MaterialApp( !!/// (!!...) ), ); } } Design draft Samsung Galaxy Tab S7 1600 x 2560 pixel 375 x 812 pixel
52. Responsive UI import 'package:flutter_screenutil/flutter_screenutil.dart'; class App extends StatelessWidget { @override Widget build(BuildContext context) { return ScreenUtilInit( designSize: const Size(x, y), builder: () => MaterialApp( /// (...) ), ); } } Design draft Samsung Galaxy Tab S7 1600 x 2560 pixel 375 x 812 pixel
53. Responsive UI import 'package:flutter_screenutil/flutter_screenutil.dart'; class App extends StatelessWidget { @override Widget build(BuildContext context) { return ScreenUtilInit( designSize: const Size(375, 812), builder: () !=> MaterialApp( !!/// (!!...) ), ); } } Design draft Samsung Galaxy Tab S7 1600 x 2560 pixel
54. Responsive UI before after //Adapted to screen width ScreenUtil().setWidth(32) //Adapted to screen height ScreenUtil().setHeight(200) //Adapt according to the smaller //of width or height ScreenUtil().radius(200) //Adapter font ScreenUtil().setSp(24) Samsung Galaxy Tab S7 1600 x 2560 pixel
55. Responsive UI !//Adapted to screen width 32.w !//Adapted to screen height 200.h !//Adapt according to the smaller !//of width or height 200.r !//Adapter font 24.sp before after Samsung Galaxy Tab S7 1600 x 2560 pixel
56. Responsive UI 32.w, 200.h, return SizedBox( width: height: ); before after Samsung Galaxy Tab S7 1600 x 2560 pixel
57. 3 mins later… Session expiration ⌛
58. 3 mins later… Session expiration ⌛
59. Session expiration ⌛
60. Session expiration • Timer ⌛
61. Session expiration • Timer Timer(); ⌛
62. • Timer Timer(Duration duration, void Function() callback); Session expiration ⌛
63. • Timer Timer(Duration(minutes: 3), _clearBasketAndNavigateToHome); Session expiration ⌛
64. • Timer Timer(); Session expiration ⌛
65. • Timer -> Timer(); ✅ Session expiration ⌛
66. • Timer -> Timer(); • Track the user’s gestures ✅ Session expiration ⌛
67. Listener() Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅
68. Listener( onPointerDown: (_) !=> _handleUserInteraction(), child: widget.child, ) Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅
69. @override Widget build(BuildContext context) { return Listener( onPointerDown: (_) => _handleUserInteraction(), child: widget.child, ); } Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅
70. @override Widget build(BuildContext context) { return Listener( onPointerDown: (_) => _handleUserInteraction(), child: widget.child, ); } Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅ class ExpoInactivityTimer extends StatefulWidget { final Widget child; @override _ExpoInactivityTimerState createState() => _ExpoInactivityTimerState(); } class _ExpoInactivityTimerState extends State<ExpoInactivityTimer> { Timer _timer; }
71. @override Widget build(BuildContext context) { return Listener( onPointerDown: (_) => _handleUserInteraction(), child: widget.child, ); } Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅ class ExpoInactivityTimer extends StatefulWidget { final Widget child; @override _ExpoInactivityTimerState createState() !=> _ExpoInactivityTimerState(); } class _ExpoInactivityTimerState extends State<ExpoInactivityTimer> { Timer _timer; }
72. Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures ✅ ExpoInactivityTimer( child: MaterialApp( !!/// (!!...) ),
73. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅
74. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅ ExpoInactivityTimer( child: MaterialApp( /// (...) ),
75. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅ ExpoInactivityTimer( child: MaterialApp( /// (...) ), @override Widget build(BuildContext context) { Navigator.of(context) .pushNamedAndRemoveUntil(RouteNames.expo, (_) !=> false); }
76. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅ ExpoInactivityTimer( child: MaterialApp( !!/// (!!...) ), @override Widget build(BuildContext context) { Navigator.of(context) .pushNamedAndRemoveUntil(RouteNames.expo, (_) => false); }
77. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅ final _navigatorKey = GlobalKey<NavigatorState>(); ExpoInactivityTimer( child: MaterialApp( !!/// (!!...) ),
78. ✅ Session expiration ⌛ • Timer -> Timer(); • Track the user’s gestures -> Listener() • Navigation ✅ return ExpoInactivityTimer( child: MaterialApp( initialRoute: initialRoute, navigatorKey: _navigatorKey, /// (...) ), ), ✅
79. Respect the native sides
80. Respect the native sides
81. Respect the native sides
82. Respect the native sides ‼
83. Respect the native sides ‼
84. Benefits
85. Don’t reinvent the wheel • Map related - google_maps_flutter, geolocator, map_launcher • Phone number field - intl_phone_field, phone_number • Responsive UI - flutter_screenutil • QR code generation/scanning - qr_flutter • Shimmer effect - shimmer, • etc.
86. Testing • Unit tests
87. Testing • Unit tests
88. Testing • Unit tests
89. Testing • Unit tests • Widget tests
90. Testing • Unit tests • Widget tests
91. Testing • Unit tests • Widget tests • Integration tests
92. Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer Quentin Gallois Sr. iOS Engineer
93. Same codebase Volodymyr Pavliuk Sr. iOS Engineer Zeinab Abdelmawla Android Engineer Maksym Kozachenko Flutter Engineer Csongor Vogel Sr. Android Engineer Zakaria Ouhra Sr. iOS Engineer Quentin Gallois Sr. iOS Engineer
94. Same codebase = same language Volodymyr Pavliuk Zeinab Abdelmawla Maksym Kozachenko Csongor Vogel Zakaria Ouhra Quentin Gallois 🤝
95. Flutter saved us a lot of time • Everyone could speak the same language • We needed to test only one codebase • We could support 3 platforms Csongor Vogel gerfalcon GerfalconVogel EXPO
96. Thank you! Done.