FC2 Getting started with Flutter and AWS Amplify

This deck was first presented at the Female Coders Collective in Perth WA and is an introduction on Flutter and how to use AWS Amplify to build a backing data store for Flutter Apps

Transcript

1. © 2021, Amazon Web Services, Inc. or its Affiliates. Getting started with Flutter Derek Bingham Senior Developer Advocate
2. © 2021, Amazon Web Services, Inc. or its Affiliates. Agenda + Flutter AWS Amplify
3. © 2021, Amazon Web Services, Inc. or its Affiliates. Why Flutter ?
4. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.
5. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.
6. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.
7. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.
8. © 2021, Amazon Web Services, Inc. or its Affiliates. What is Flutter ? • A cross platform SDK for • Android • IOS • Web • Desktop • Uses ‘Dart’ • Widgets are everything • First released in 2017 More Info: www.flutter.dev
9. © 2021, Amazon Web Services, Inc. or its Affiliates. What about Dart ? • OO Statically typed language • Similar to C# and Java ( C-Style Syntax ) • Supports Just in Time (JIT) and Ahead of Time (AOT) compilation • Compiles into JS for Web + Native for Mobile and Desktop More Info: www.dart.dev
10. © 2021, Amazon Web Services, Inc. or its Affiliates. Learning Dart dartpad.dartland.org Learn : Functions – Types – Classes - Libraries
11. © 2021, Amazon Web Services, Inc. or its Affiliates. Existing Options React Native Swift / Kotlin
12. © 2021, Amazon Web Services, Inc. or its Affiliates. What does Flutter do ?
13. © 2021, Amazon Web Services, Inc. or its Affiliates. In Flutter EVERYTHING is a Widget
14. © 2021, Amazon Web Services, Inc. or its Affiliates. What are Widgets • Building Blocks of the Flutter UI • The App IS a widget • Make advanced widgets by combining basic widgets • Can represent • UI • Layout • Screens
15. © 2021, Amazon Web Services, Inc. or its Affiliates. Using Widgets
16. © 2021, Amazon Web Services, Inc. or its Affiliates. Widget Types Stateless Stateful • Immutable • Zero State • build() only called on initialisation • Has state • State can change widget behaviour • Any state change calls build() • Mount state using BuildContext
17. © 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Getting started
18. © 2021, Amazon Web Services, Inc. or its Affiliates. The Humble Shopping List DisplayList AddItems BuyItems
19. © 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Building the UI
20. © 2021, Amazon Web Services, Inc. or its Affiliates. Nice UI, but…
21. © 2021, Amazon Web Services, Inc. or its Affiliates. Why AWS Amplify ?
22. © 2021, Amazon Web Services, Inc. or its Affiliates. DEVELOP with AWS Amplify: Full-stack developer experience across 10 feature categories DEVELOP CLI Admin UI NEW! Libraries & UI Components Feature Categories
23. © 2021, Amazon Web Services, Inc. or its Affiliates. Amplify DataStore : Data Flow
24. © 2021, Amazon Web Services, Inc. or its Affiliates. Amplify DataStore : Data Flow Subscriptions Queries/mutations Observes Writes Sync Engine
25. © 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Saving and Sharing Lists
26. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates. • Well-Designed • Learn Once, Write Anywhere • From Device-centric to App-centric development • Flutter’s ‘Hot Reload’ feature is a game-changer • Extremely Fast • Flutter functions on native binaries, graphics, and rendering libraries that are based on C/C++ TLDR; Flutter is …
27. © 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates. Next Steps… https://flutter.dev/docs/get-started/ https://docs.amplify.aws/start https://github.com/deekob/amplify_flutter_shoppinglist
28. © 2021, Amazon Web Services, Inc. or its Affiliates. Thank you! Derek Bingham Senior Developer Advocate