Tweet
Tweet

Slide 1

Slide 1 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Getting started with Flutter Derek Bingham Senior Developer Advocate

Slide 2

Slide 2 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Agenda + Flutter AWS Amplify

Slide 3

Slide 3 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Why Flutter ?

Slide 4

Slide 4 text

© 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.

Slide 5

Slide 5 text

© 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.

Slide 6

Slide 6 text

© 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.

Slide 7

Slide 7 text

© 2021, Amazon Web Services, Inc. or its Affiliates. © 2021, Amazon Web Services, Inc. or its Affiliates.

Slide 8

Slide 8 text

© 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

Slide 9

Slide 9 text

© 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

Slide 10

Slide 10 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Learning Dart dartpad.dartland.org Learn : Functions – Types – Classes - Libraries

Slide 11

Slide 11 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Existing Options React Native Swift / Kotlin

Slide 12

Slide 12 text

© 2021, Amazon Web Services, Inc. or its Affiliates. What does Flutter do ?

Slide 13

Slide 13 text

© 2021, Amazon Web Services, Inc. or its Affiliates. In Flutter EVERYTHING is a Widget

Slide 14

Slide 14 text

© 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

Slide 15

Slide 15 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Using Widgets

Slide 16

Slide 16 text

© 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

Slide 17

Slide 17 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Getting started

Slide 18

Slide 18 text

© 2021, Amazon Web Services, Inc. or its Affiliates. The Humble Shopping List DisplayList AddItems BuyItems

Slide 19

Slide 19 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Building the UI

Slide 20

Slide 20 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Nice UI, but…

Slide 21

Slide 21 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Why AWS Amplify ?

Slide 22

Slide 22 text

© 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

Slide 23

Slide 23 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify DataStore : Data Flow

Slide 24

Slide 24 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Amplify DataStore : Data Flow Subscriptions Queries/mutations Observes Writes Sync Engine

Slide 25

Slide 25 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Demo – Saving and Sharing Lists

Slide 26

Slide 26 text

© 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 …

Slide 27

Slide 27 text

© 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

Slide 28

Slide 28 text

© 2021, Amazon Web Services, Inc. or its Affiliates. Thank you! Derek Bingham Senior Developer Advocate