Serverlabs Flutter Talk

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

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.

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

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!

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

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

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

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

Inc. or its affiliates. Amplify Flutter Libraries Analytics Authentication GraphQL API Rest API Storage UI Components Authenticator 22

Inc. or its affiliates. 24

Inc. or its affiliates. 25

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.

Inc. or its affiliates. Installing Amplify CLI - cURL 30

Inc. or its affiliates. Installing Amplify CLI - cURL 31

Inc. or its affiliates. Installing Amplify CLI - npm 32

Inc. or its affiliates. Configuring Amplify CLI 33

Inc. or its affiliates. Initializing Project 47

Inc. or its affiliates. Initializing Amplify Project 48

Inc. or its affiliates. Adding Authentication Library 54

Inc. or its affiliates. Adding GraphQL API Library 57

Inc. or its affiliates. Adding GraphQL API Library 58

Inc. or its affiliates. Adding Storage Library 59

Inc. or its affiliates. Updating GraphQL Schema 68

Inc. or its affiliates. Updating GraphQL Schema 69

Inc. or its affiliates. Pushing changes to cloud 70

Inc. or its affiliates. Adding libraries to pubspec.yaml 72

Inc. or its affiliates. Configuring libraries on app start 73

Inc. or its affiliates. Configuring libraries on app start 74

Inc. or its affiliates. Adding Authentication Flow 76

Inc. or its affiliates. Saving data to GraphQL API 78

Inc. or its affiliates. Saving data to GraphQL API 79

Inc. or its affiliates. Query data from GraphQL API 80

Inc. or its affiliates. Uploading file to Storage 81

Inc. or its affiliates. Uploading file to Storage 82

Serverlabs Flutter Talk

Serverlabs Flutter Talk

More Decks by Muhammed Salih Güler

Other Decks in Technology

Featured

Transcript