Zebra Technologies Corporation · NASDAQ:ZBRA
Zebra Technologies — Technical Presentation (2023)
21 slides from Zebra Technologies's technical presentation, 2023
Slide 1: Common UX across Android, iOS and Web with Flutter
Common UX across Android, iOS and Web with Flutter Luke Walton Front End Developer 1
Slide 2: Innovation Design
Innovation Design • Award winning products and Customer Design Research Physical Product Design solutions from concept to production. • 7 studios globally • 61 designers, researchers and developers Human Factors Engineering User Experience Design ZEBRA TECHNOLOGIES 2
Slide 3: State of cross-platform
State of cross-platform ZEBRA TECHNOLOGIES 3
Slide 4: Cross platform history
Cross platform history Wrap a WebView with APIs Compile to native ZEBRA TECHNOLOGIES 4
Slide 5: React Native or Flutter?
React Native or Flutter? • JavaScript • Dart – Dynamically typed – Statically typed • Native components • Rich core libraries – npm / React Native Directory – pub.dev • Popularity • Growing community Developer experience… ZEBRA TECHNOLOGIES 5
Slide 6: ZSB Series Printer: The solution: Flutter
ZSB Series Printer New experience for Zebra • Great UX • Cross platform • Native features • Developer experience The solution: Flutter 🎉 ZEBRA TECHNOLOGIES 6
Slide 7: ZSB Series Printer
ZSB Series Printer Our findings Good 👍 Less good 👎 • Flutter • Accessibility • Performance • Responsiveness • User Experience • UI customization • Developer experience • State management ZEBRA TECHNOLOGIES 7
Slide 8: Zebra Workcloud
Zebra Workcloud ~70k lines to ~35k lines • Accessibility • Responsiveness • UI customization • State management Workcloud Chat Workcloud Scheduling Employee Self-Service ZEBRA TECHNOLOGIES 8
Slide 9: Flutter 101
Flutter 101 ZEBRA TECHNOLOGIES 9
Slide 10: What does Flutter look like?
What does Flutter look like? Declarative UI ZEBRA TECHNOLOGIES 10
Slide 11: Core components
Core components Material and Cupertino • Foundation • UI Components – Adaptive Constructors ZEBRA TECHNOLOGIES Material (Android) Cupertino (iOS) 11
Slide 12: Accessibility
Accessibility ZEBRA TECHNOLOGIES 12
Slide 13: Accessibility
Accessibility Make experience great for all users Hearing Physical Visual Cognitive Age Situational Cultural ZEBRA TECHNOLOGIES 13
Slide 14: Achieving AA and AAA
Accessibility Achieving AA and AAA • Responsiveness – Screen size – Font scale • Localization • Color contrast AbleNet Blue2 switch • Alternative I/O – Switches – Screen readers Android TalkBack Apple VoiceOver ZEBRA TECHNOLOGIES 14
Slide 15: Simple semantics
Accessibility Simple semantics • Eliminating vision barriers – Content, Actions, State IconButton( Semantics( icon: const Icon(RflxIcons.edit), child: GestureDetector( tooltip: ‘Edit entries’ child: ProfileImage(), ) ), label: ‘$user’s profile picture’, Built-in button: true, hint: ‘open profile pag
Slide 16: Next steps
Next steps ZEBRA TECHNOLOGIES 16
Slide 17: Conclusion
Conclusion • Flutter makes great apps – Android, iOS, Web, Windows, MacOS, Linux • Good performance • Great user and developer experience • Continuous improvements • Almost total feature parity with native ZEBRA TECHNOLOGIES 17
Slide 18: ZDS-Flutter
ZDS-Flutter pub.dev/packages/zds_flutter • Current design components • Production tested ZEBRA TECHNOLOGIES 18
Slide 19: ZDS-Flutter
ZDS-Flutter pub.dev/packages/zds_flutter • Current design components • Production tested ZEBRA TECHNOLOGIES 19
Slide 20: Zeta
Zeta pub.dev/packages/zeta_flutter • Cross-platform, curated design system. – Flutter, Web components • Early alpha release ZEBRA TECHNOLOGIES 20
Slide 21: Thank You
Thank You github.com/thelukewalton/devcon23 ZEBRA and the stylized Zebra head are trademarks of Zebra Technologies Corp., registered in many jurisdictions worldwide. All other trademarks are the property of their respective owners. ©2023 Zebra Technologies Corp. and/or its affiliates. All rights res