Tweet
Tweet

Slide 1

Slide 1 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Muhammed Salih Güler (he/him) Senior Developer Advocate AWS Amplify Building Full Stack Flutter Applications with AWS Amplify

Slide 2

Slide 2 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 4

Slide 3

Slide 3 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. What is Flutter? 5

Slide 4

Slide 4 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. 6 What is Flutter? Flutter is Google’s portable UI toolkit for creating: • beautiful • natively compiled applications for mobile, web, and desktop from a single codebase.

Slide 5

Slide 5 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. What makes Flutter different? Dart Dart is a modern, concise, object- oriented programming language Native Performance Flutter projects compiles into native code. It is also hosted on a native app. It draws each pixel to the screen by itself. Open Source Flutter is an open source project mainly funded by Google with contributors from all around the world. Community Flutter community is a vibrant and growing community. Check out flutter.dev/community for more information. 7

Slide 6

Slide 6 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. How Flutter works 8 Dart Code Widgets Rendering Platform Channels Flutter Code Platform Services Canvas Events Location Audio Bluetooth Sensors Camera many more!

Slide 7

Slide 7 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 9

Slide 8

Slide 8 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 10

Slide 9

Slide 9 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 11

Slide 10

Slide 10 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. What is AWS Amplify? 12

Slide 11

Slide 11 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. 13 Agility Time to market Rapid innovation No one-way doors Great experience Multidevice Modern look/feel Differentiated features Production-ready Low latency Secure Reliable and scalable Technical needs Fullstack development Features that use device + cloud Integrated development Less boilerplate Best practices built in Web Native-like experience Support for hybrid client/server rendering (e.g., Next.js) Cross-platform One codebase Support for Flutter, React Native, Apple cross-platform

Slide 12

Slide 12 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 14 We built Amplify to make it easy for frontend developers to build full-stack apps

Slide 13

Slide 13 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. 15 Build AWS backend Amplify Studio Amplify CLI Build app UI (web) Amplify Studio Host an app (web) Amplify Hosting FULLSTACK DEVELOPMENT WEB Connect to backend Amplify Libraries UI Components CROSS-PLATFORM & MOBILE

Slide 14

Slide 14 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Amplify Libraries 16

Slide 15

Slide 15 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 17 The Amplify open-source client libraries provide cloud powered operations enabling developers to easily interact with their backends

Slide 16

Slide 16 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Supported Platforms 18 This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY-SA This Photo by Unknown Author is licensed under CC BY- NC-ND

Slide 17

Slide 17 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Amplify UI Components 19

Slide 18

Slide 18 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 20 Amplify UI is a collection of accessible, themeable, performant components that can connect directly to the cloud.

Slide 19

Slide 19 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Amplify Flutter 21

Slide 20

Slide 20 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Amplify Flutter Libraries Analytics Authentication GraphQL API Rest API Storage UI Components Authenticator 22

Slide 21

Slide 21 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Cloning Flutter Project 23

Slide 22

Slide 22 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. 24

Slide 23

Slide 23 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. 25

Slide 24

Slide 24 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 26

Slide 25

Slide 25 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Amplify CLI 27

Slide 26

Slide 26 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 28 The Amplify Command Line Interface (CLI) is a unified toolchain to create, integrate, and manage the AWS cloud services for your app.

Slide 27

Slide 27 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 29

Slide 28

Slide 28 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Installing Amplify CLI - cURL 30

Slide 29

Slide 29 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Installing Amplify CLI - cURL 31

Slide 30

Slide 30 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Installing Amplify CLI - npm 32

Slide 31

Slide 31 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 33

Slide 32

Slide 32 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 34

Slide 33

Slide 33 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 35

Slide 34

Slide 34 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 36

Slide 35

Slide 35 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 37

Slide 36

Slide 36 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 38

Slide 37

Slide 37 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 39

Slide 38

Slide 38 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 40

Slide 39

Slide 39 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 41

Slide 40

Slide 40 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 42

Slide 41

Slide 41 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 43

Slide 42

Slide 42 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring Amplify CLI 44

Slide 43

Slide 43 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 45

Slide 44

Slide 44 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Initializing an Amplify Project 46

Slide 45

Slide 45 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Initializing Project 47

Slide 46

Slide 46 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Initializing Amplify Project 48

Slide 47

Slide 47 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Initializing Amplify Project 49

Slide 48

Slide 48 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Initializing Amplify Project 50

Slide 49

Slide 49 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Initializing Amplify Project 51

Slide 50

Slide 50 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 52

Slide 51

Slide 51 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Adding Amplify Libraries 53

Slide 52

Slide 52 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Authentication Library 54

Slide 53

Slide 53 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Authentication Library 55

Slide 54

Slide 54 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Authentication Library 56

Slide 55

Slide 55 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding GraphQL API Library 57

Slide 56

Slide 56 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding GraphQL API Library 58

Slide 57

Slide 57 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Storage Library 59

Slide 58

Slide 58 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Storage Library 60

Slide 59

Slide 59 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Storage Library 61

Slide 60

Slide 60 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Storage Library 62

Slide 61

Slide 61 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Storage Library 63

Slide 62

Slide 62 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 64

Slide 63

Slide 63 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 65

Slide 64

Slide 64 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 66

Slide 65

Slide 65 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 67

Slide 66

Slide 66 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Updating GraphQL Schema 68

Slide 67

Slide 67 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Updating GraphQL Schema 69

Slide 68

Slide 68 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Pushing changes to cloud 70

Slide 69

Slide 69 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 71

Slide 70

Slide 70 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding libraries to pubspec.yaml 72

Slide 71

Slide 71 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring libraries on app start 73

Slide 72

Slide 72 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Configuring libraries on app start 74

Slide 73

Slide 73 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 75

Slide 74

Slide 74 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Adding Authentication Flow 76

Slide 75

Slide 75 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 77

Slide 76

Slide 76 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Saving data to GraphQL API 78

Slide 77

Slide 77 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Saving data to GraphQL API 79

Slide 78

Slide 78 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Query data from GraphQL API 80

Slide 79

Slide 79 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Uploading file to Storage 81

Slide 80

Slide 80 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. Uploading file to Storage 82

Slide 81

Slide 81 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 83

Slide 82

Slide 82 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 84

Slide 83

Slide 83 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 85

Slide 84

Slide 84 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 86

Slide 85

Slide 85 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 87

Slide 86

Slide 86 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 88

Slide 87

Slide 87 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. 89

Slide 88

Slide 88 text

BUILDING FULL STACK FLUTTER APPLICATIONS © 2023, Amazon Web Services, Inc. or its affiliates. © 2023, Amazon Web Services, Inc. or its affiliates. Thank you! Muhammed Salih Güler @salihgueler [email protected]