Keynote - Flutter 3.7 (By: Sakina Abbas) - Flutter Forward Extended 2023

Talk by Sakina Abbas (https://www.linkedin.com/in/sakina-abbas/) at Flutter Forward Extended 2023 by GDG Lahore.

Transcript

1. Keynote Lahore
2. Flutter 3.7 updates look like this: – i.e. too many exciting things to cover!
3. Flutter 3.7 updates look like this: – i.e. too many exciting things to cover! And we have to do this: – i.e. deliver the highlights in short time
4. Hi, I’m Sakina Abbas! Co-Founder & CEO, Reactree GDE Flutter, Dart 7+ years in Mobile Application Development Core Member of Flutter Karachi Pakistan Women in Tech Speaker for Google Developers Space, Singapore Mentor in various Google programs
5. UI/UX - and all things Widgets! Flutter Web - what’s new? Impeller - the new rendering engine! DevTools updates Dart 3α + + + + + What will you learn today?
6. - Migration of the following widgets: Improved Material 3 support
7. - Migration of the following widgets: - Badge Improved Material 3 support
8. - Migration of the following widgets: - Badge - BottomAppBar Improved Material 3 support
9. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton Improved Material 3 support
10. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu Improved Material 3 support
11. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer Improved Material 3 support
12. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer Improved Material 3 support
13. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer - TextFields & InputDecorators - NEW widgets Improved Material 3 support
14. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer - TextFields & InputDecorators - NEW widgets - Menu bars & Cascading Menus Improved Material 3 support
15. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer - TextFields & InputDecorators - NEW widgets - Menu bars & Cascading Menus Improved Material 3 support
16. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer - TextFields & InputDecorators - NEW widgets - Menu bars & Cascading Menus Improved Material 3 support Demo Time!
17. - Migration of the following widgets: - Badge - BottomAppBar - SegmentedButton - DropdownMenu - Drawer & NavigationDrawer - TextFields & InputDecorators - NEW widgets - Menu bars & Cascading Menus Improved Material 3 support Demo Time! Code::
18. Cupertino widgets - what’s new?
19. - CupertinoListTile - CupertinoListSection Cupertino widgets - what’s new?
20. - CupertinoListTile - CupertinoListSection Cupertino widgets - what’s new?
21. - We had AnimatedList Scrolling - what’s new?
22. - We had AnimatedList - We now have AnimatedGrid & SliverAnimatedGrid Scrolling - what’s new?
23. - We had AnimatedList - We now have AnimatedGrid & SliverAnimatedGrid - Polished trackpad interactions Scrolling - what’s new?
24. - We had AnimatedList - We now have AnimatedGrid & SliverAnimatedGrid - Polished trackpad interactions - Added new scrolling physics specific to MacOS Scrolling - what’s new?
25. - We had AnimatedList - We now have AnimatedGrid & SliverAnimatedGrid - Polished trackpad interactions - Added new scrolling physics specific to MacOS - itemBuilder > indexedWidgetBuilder > NullableIndexedWidgetBuilder Scrolling - what’s new?
26. - We had AnimatedList - We now have AnimatedGrid & SliverAnimatedGrid - Polished trackpad interactions - Added new scrolling physics specific to MacOS - itemBuilder > indexedWidgetBuilder > NullableIndexedWidgetBuilder - Performance improvements > smooth scrolling Scrolling - what’s new?
27. - Other UI/UX updates
28. - SelectionArea supports keyboard selections now Other UI/UX updates
29. - SelectionArea supports keyboard selections now - Text magnifier enabled by default for android & iOS Other UI/UX updates
30. - SelectionArea supports keyboard selections now - Text magnifier enabled by default for android & iOS - contextMenuBuilder now added to TextField etc for Custom Context Menus Other UI/UX updates
31. - YOU. CAN. NOW. EMBED. A. FLUTTER. APP. IN. NATIVE. WEB. - just like a <div> Flutter Web - Element Embedding
32. - YOU. CAN. NOW. EMBED. A. FLUTTER. APP. IN. NATIVE. WEB. - just like a <div> - CSS styles can be applied - State can be changed with JavaScript Flutter Web - Element Embedding
33. - YOU. CAN. NOW. EMBED. A. FLUTTER. APP. IN. NATIVE. WEB. - just like a <div> - CSS styles can be applied - State can be changed with JavaScript Flutter Web - Element Embedding Demo Time!
34. - Web assembly: High performance, low latency of web apps Flutter Web - support for web assembly & RISC-V
35. - Web assembly: High performance, low latency of web apps - RISC-V: Devices built on RISC-V architecture now supported e.g. servers, embedded devices, etc. Flutter Web - support for web assembly & RISC-V
36. - Simply put: Flutter currently uses Skia for rendering Impeller is a new and improved rendering runtime for Flutter Impeller - the new rendering engine! stable for iOS as of now
37. - Simply put: Flutter currently uses Skia for rendering Impeller is a new and improved rendering runtime for Flutter - Skia > shader files are compiled at runtime - resulting in janks Impeller - the new rendering engine! stable for iOS as of now
38. - Simply put: Flutter currently uses Skia for rendering Impeller is a new and improved rendering runtime for Flutter - Skia > shader files are compiled at runtime - resulting in janks - Impeller > precompiles smaller & simpler set of shaders - Predictable performance - Effective use of concurrency - Effective use of modern graphics API; Vulkan, Metal Impeller - the new rendering engine! stable for iOS as of now
39. - Simply put: Flutter currently uses Skia for rendering Impeller is a new and improved rendering runtime for Flutter - Skia > shader files are compiled at runtime - resulting in janks - Impeller > precompiles smaller & simpler set of shaders - Predictable performance - Effective use of concurrency - Effective use of modern graphics API; Vulkan, Metal Impeller - the new rendering engine! stable for iOS as of now Demo Time!
40. - Simply put: Flutter currently uses Skia for rendering Impeller is a new and improved rendering runtime for Flutter - Skia > shader files are compiled at runtime - resulting in janks - Impeller > precompiles smaller & simpler set of shaders - Predictable performance - Effective use of concurrency - Effective use of modern graphics API; Vulkan, Metal Impeller - the new rendering engine! stable for iOS as of now Demo Time! Read More::
41. - Frame Analysis Helpful insights and suggestions DevTools updates
42. - Frame Analysis Helpful insights and suggestions - New & improved Memory debugging tool - 3 new feature tabs: profile, trace, diff - Analyse current memory allocation by class & memory type - Compare memory snapshots (t1 vs t2) - Investigate code paths allocating memory DevTools updates
43. Introducing Dart 3α
44. - Supports 100% sound null safety Introducing Dart 3α
45. - Supports 100% sound null safety - Class Modifiers 🌚 Introducing Dart 3α
46. - Supports 100% sound null safety - Class Modifiers 🌚 - Base > extended, but not implemented - interface > implemented, but not extended - final > not extended, not implemented - sealed > for exhaustive type checking - mixin Introducing Dart 3α
47. - Supports 100% sound null safety - Class Modifiers 🌚 - Base > extended, but not implemented - interface > implemented, but not extended - final > not extended, not implemented - sealed > for exhaustive type checking - mixin - Records & Patterns - Records > return composite data - Patterns > fetch composite data Introducing Dart 3α (double x, double y) geoLocation(String name){ if (name == 'Lahore') { return (31.5222, 74.3612) ; } else { ... } } void main(List<String> arguments) { final (lat, long) = geoLocation( 'Lahore'); print('Current location: $lat, $long'); }
48. - Direct platform library interop - Call platform libraries directly from dart - FFIgen & JNIgen - Support for Web Assembly & RISC-V Introducing Dart 3α
49. Sakina Abbas sakina@reactree.com https://pk.linkedin.com/in/sakina-abbas www.reactree.com Contact Questions?