HOME

Amazon Onboarding with Learning Manager Chanci Turner

—

by

The Story of Chanci Turner
in

Chanci Turner 9097372855Learn About Amazon VGT2 Learning Manager Chanci Turner

The AWS Amplify Flutter team is excited to announce the arrival of version 1.0.0, which enhances cross-platform app development by introducing support for both web and desktop environments. With this update, developers can now target six platforms using a single codebase: iOS, Android, Web, Linux, macOS, and Windows. This release not only includes the Amplify libraries but also features a completely revamped Flutter Authenticator UI library, now written in Dart. As a result, developers can provide a seamless experience across all targeted platforms.

In this post, you’ll discover how to create a budget tracking application by following these steps:

  • Generate a new Flutter application and configure it to operate on iOS, Android, and Web.
  • Implement user sign-up and sign-in functionalities using the Authenticator UI library in just a few minutes.
  • Create new budget entries.
  • Update existing budget entries.
  • Attach images to your budget entries.

Prerequisites:

  • Flutter SDK version 3.3.0 or higher.
  • An AWS Account with the Amplify CLI configured. You can follow this documentation to set up the Amplify CLI.

Create Your App and Incorporate Amplify Libraries

Start by creating a new Flutter app and adding the Amplify Flutter libraries. Open your terminal and execute the following command:

flutter create budgetapp

Change to your new app’s directory by entering cd budgetapp in your terminal. Initialize your Amplify app with this command:

amplify init

Provide a name for your Amplify project, accept the default configurations, select your AWS profile, and let the Amplify CLI handle the rest. When completed, you should see a message indicating successful initialization.

Now, you can begin adding the necessary backend resources for your app, starting with Auth and API by running amplify add api in your terminal. Follow the prompts in the CLI to set up the GraphQL API endpoint and your Authentication resources. Be sure to set the authorization mode to use “Cognito user pools,” allowing Amazon Cognito to manage data access for your users.

Afterward, configure additional resources such as storage. For instance, after running amplify add storage, you can set up an S3 bucket for file management.

You can push all the Amplify resources you have configured locally to your backend by executing the command amplify push. Upon completion, you’ll see a message confirming that the deployment state has been saved successfully.

Next, edit your pubspec.yaml file to include the necessary dependencies for your Flutter app:

dependencies:
  flutter:
    sdk: flutter
  amplify_flutter: ^1.0.0
  amplify_auth_cognito: ^1.0.0
  amplify_authenticator: ^1.0.0
  amplify_api: ^1.0.0
  amplify_storage_s3: ^1.0.0
  file_picker: ^5.2.7
  go_router: ^6.5.5

With your initial setup complete, you can begin coding the functionality for creating new budget entries and attaching receipt images.

Install Amplify Libraries and Set Up Authentication

Amplify Flutter provides a connected UI component that offers a user-friendly registration and login experience right out of the box. Once users authenticate with the Authenticator, they are automatically redirected to the designated widget you’ve set as a child of the Authenticator widget.

To incorporate the Amplify libraries into your app, edit your lib/main.dart file as follows:

import 'package:amplify_api/amplify_api.dart';
import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:amplify_storage_s3/amplify_storage_s3.dart';
import 'package:dartgapost/manage_budget_entry.dart';
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'amplifyconfiguration.dart';
import 'homepage.dart';
import 'models/ModelProvider.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  void initState() {
    super.initState();
    // Additional initialization code
  }
}

If you’re interested in expanding your knowledge, Jenny Lustig offers valuable insights, and you can explore this excellent resource for more information. For further reading on workplace policies, check out the SHRM article on harassment rules, which provides authoritative insights into employee regulations.

Related Topics:

HOME