From 337a62a1d94b8d09f9bbb95ff3783610f383f03d Mon Sep 17 00:00:00 2001 From: salihgueler Date: Thu, 30 May 2024 23:57:02 +0400 Subject: [PATCH 1/4] Add the platform setuo page --- src/directory/directory.mjs | 3 + .../in-app-messaging/index.mdx | 1 - .../[platform]/start/platform-setup/index.mdx | 59 +++++++++++++++++++ .../[platform]/start/quickstart/index.mdx | 19 ++++-- 4 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 src/pages/[platform]/start/platform-setup/index.mdx diff --git a/src/directory/directory.mjs b/src/directory/directory.mjs index bb42f929cb0..46305298423 100644 --- a/src/directory/directory.mjs +++ b/src/directory/directory.mjs @@ -43,6 +43,9 @@ export const directory = { }, { path: 'src/pages/[platform]/start/migrate-to-gen2/index.mdx' + }, + { + path: 'src/pages/[platform]/start/platform-setup/index.mdx' } ] }, diff --git a/src/pages/[platform]/build-a-backend/add-aws-services/in-app-messaging/index.mdx b/src/pages/[platform]/build-a-backend/add-aws-services/in-app-messaging/index.mdx index ef635b20787..cee37852385 100644 --- a/src/pages/[platform]/build-a-backend/add-aws-services/in-app-messaging/index.mdx +++ b/src/pages/[platform]/build-a-backend/add-aws-services/in-app-messaging/index.mdx @@ -7,7 +7,6 @@ export const meta = { route: "/[platform]/build-a-backend/add-aws-services/in-app-messaging", platforms: [ 'angular', - 'flutter', 'javascript', 'nextjs', 'react', diff --git a/src/pages/[platform]/start/platform-setup/index.mdx b/src/pages/[platform]/start/platform-setup/index.mdx new file mode 100644 index 00000000000..09987d6b6dd --- /dev/null +++ b/src/pages/[platform]/start/platform-setup/index.mdx @@ -0,0 +1,59 @@ +import { getCustomStaticPath } from '@/utils/getCustomStaticPath'; + +export const meta = { + title: 'Platform setup', + description: 'Instructions for platform-specific configurations needed for amplify-flutter', + platforms: [ + 'flutter', + ] +}; + +export const getStaticPaths = async () => { + return getCustomStaticPath(meta.platforms); +}; + +export function getStaticProps(context) { + return { + props: { + platform: context.params.platform, + meta + } + }; +} + + +### iOS +From your project root, navigate to the `ios/` directory and modify the `Podfile` using a text editor of your choice and update the target iOS platform to 11.0 or higher. + +```bash +platform :ios, '11.0' +``` + + + +When preparing your application for deployment, you should also update your iOS Deployment Target to at least 11.0. See the [Flutter docs](https://docs.flutter.dev/deployment/ios) to learn more about building your iOS app for release. + + + +### Android +From your project root, navigate to the `android/app/` directory and modify `build.gradle` using a text editor of your choice and update the target Android SDK version to 21 or higher: + +```bash +minSdkVersion 21 +``` + + + +If you are using Flutter 2.10 or above, you will need to ensure that your app supports an [up-to-date Kotlin version](https://docs.flutter.dev/release/breaking-changes/kotlin-version). +This will typically be version 1.5.31 or higher. +
+You can do this by updating the Kotlin version in your app's `android/build.gradle` file: + +```yaml +buildscript { + ext.kotlin_version = '1.5.31' + ... +} +``` + + diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 8ff0f7f8d02..841a75073a7 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -1263,17 +1263,26 @@ You can follow the [official documentation](https://flutter.dev/docs/get-started Once you have installed Flutter, you can create a new Flutter project using the following command: + +In this Quickstart guide, you will be building the application on Web. However, if you want to run the application on other platforms, be sure to make the required installations for them by following the [guide here](). + + ```bash title="Terminal" showLineNumbers={false} flutter create my_amplify_app ``` ## Create Backend -The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory. +The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory. First go to the base project directory with the following command: ```bash title="Terminal" showLineNumbers={false} -npm create amplify@latest -? Where should we create your project? (.) # press enter +cd my_amplify_app +``` + +After that, run the following to create an Amplify project: + +```bash title="Terminal" showLineNumbers={false} +npm create amplify@latest -y ``` Running this command will scaffold Amplify backend files in your current project with the following files added: @@ -1316,7 +1325,7 @@ npx ampx sandbox --outputs-format dart --outputs-out-dir lib --outputs-version 0 ## Adding Authentication -The initial scaffolding already has a pre-configured auth backend defined in the `amplify/auth/resource`.ts file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. +The initial scaffolding already has a pre-configured auth backend defined in the `amplify/auth/resource.ts` file. We've configured it to support email and password login but you can extend it to support a variety of login mechanisms, including Google, Amazon, Sign In With Apple, and Facebook. The fastest way to get your login experience up and running is to use our Authenticator UI component available in the Amplify UI library. @@ -1364,7 +1373,7 @@ Future main() async { Future _configureAmplify() async { try { await Amplify.addPlugin(AmplifyAuthCognito()); - await Amplify.configure(outputs); + await Amplify.configure(amplifyConfig); safePrint('Successfully configured'); } on Exception catch (e) { safePrint('Error configuring Amplify: $e'); From 23e4955e16231f48bf424fdec26890e965b603a7 Mon Sep 17 00:00:00 2001 From: salihgueler Date: Fri, 31 May 2024 00:25:51 +0400 Subject: [PATCH 2/4] Fix the rest of the Flutter guide. --- .../[platform]/start/quickstart/index.mdx | 90 ++++++++++++------- 1 file changed, 57 insertions(+), 33 deletions(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 841a75073a7..cc01730bcee 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -1264,7 +1264,7 @@ You can follow the [official documentation](https://flutter.dev/docs/get-started Once you have installed Flutter, you can create a new Flutter project using the following command: -In this Quickstart guide, you will be building the application on Web. However, if you want to run the application on other platforms, be sure to make the required installations for them by following the [guide here](). +n this Quickstart guide, you will build the application for Web. However, if you want to run the application on other platforms, be sure to follow the required setup [guide here](/[platform]/start/platform-setup/). ```bash title="Terminal" showLineNumbers={false} @@ -1466,10 +1466,14 @@ Future _configureAmplify() async { await Amplify.addPlugins( [ AmplifyAuthCognito(), - AmplifyAPI(modelProvider: ModelProvider.instance), + AmplifyAPI( + options: APIPluginOptions( + modelProvider: ModelProvider.instance, + ), + ), ], ); - await Amplify.configure(outputs); + await Amplify.configure(amplifyConfig); safePrint('Successfully configured'); } on Exception catch (e) { safePrint('Error configuring Amplify: $e'); @@ -1477,7 +1481,7 @@ Future _configureAmplify() async { } ``` -Next create a new widget called `TodoScreen` and add the following code: +Next create a new widget called `TodoScreen` and add the following code to the end of the **main.dart** file: ```dart title="main.dart" @@ -1499,8 +1503,6 @@ class _TodoScreenState extends State { id: uuid(), content: "Random Todo ${DateTime.now().toIso8601String()}", isDone: false, - createdAt: TemporalDateTime(DateTime.now()), - updatedAt: TemporalDateTime(DateTime.now()), ); final request = ModelMutations.create(newTodo); final response = await Amplify.API.mutate(request: request).response; @@ -1509,7 +1511,6 @@ class _TodoScreenState extends State { } else { safePrint('Creating Todo successful.'); } - _refreshTodos(); }, ), body: const Placeholder(), @@ -1581,36 +1582,59 @@ Future _refreshTodos() async { } ``` -and update the body with the following code: +and update the `build` function like the following: ```dart title="main.dart" -body: _todos.isEmpty == true - ? const Center( - child: Text( - "The list is empty.\nAdd some items by clicking the floating action button.", - textAlign: TextAlign.center, - ), - ) - : ListView.builder( - itemCount: _todos.length, - itemBuilder: (context, index) { - final todo = _todos[index]; - return Dismissible( - key: UniqueKey(), - confirmDismiss: (direction) async { - return false; - }, - child: CheckboxListTile.adaptive( - value: todo.isDone, - title: Text(todo.content!), - onChanged: (isChecked) async { }, +@override +Widget build(BuildContext context) { + return Scaffold( + floatingActionButton: FloatingActionButton.extended( + label: const Text('Add Random Todo'), + onPressed: () async { + final newTodo = Todo( + id: uuid(), + content: "Random Todo ${DateTime.now().toIso8601String()}", + isDone: false, + ); + final request = ModelMutations.create(newTodo); + final response = await Amplify.API.mutate(request: request).response; + if (response.hasErrors) { + safePrint('Creating Todo failed.'); + } else { + safePrint('Creating Todo successful.'); + } + _refreshTodos(); + }, + ), + body: _todos.isEmpty == true + ? const Center( + child: Text( + "The list is empty.\nAdd some items by clicking the floating action button.", + textAlign: TextAlign.center, ), - ); - }, - ), + ) + : ListView.builder( + itemCount: _todos.length, + itemBuilder: (context, index) { + final todo = _todos[index]; + return Dismissible( + key: UniqueKey(), + confirmDismiss: (direction) async { + return false; + }, + child: CheckboxListTile.adaptive( + value: todo.isDone, + title: Text(todo.content!), + onChanged: (isChecked) async {}, + ), + ); + }, + ), + ); +} ``` -Now let's add a update and delete functionality. +Now let's add the update and delete functionality. For update, add the following code to the `onChanged` method of the `CheckboxListTile.adaptive` widget: @@ -1656,7 +1680,7 @@ You can terminate the sandbox environment now to clean up the project. ### Publishing changes to cloud -For publishing the changes to cloud, you need to create a remote git repository. For a detailed guide, you can follow the link [here](/[platform]/start/quickstart/#publishing-changes-to-cloud). +For publishing the changes to cloud, you need to create a remote git repository. For a detailed guide, you can follow the link [here](/[platform]/deploy-and-host/fullstack-branching/branch-deployments). From 2aebf6530f90c6844a95e017c2faab171458f4fe Mon Sep 17 00:00:00 2001 From: Rene Brandel <4989523+renebrandel@users.noreply.github.com> Date: Thu, 30 May 2024 13:32:13 -0700 Subject: [PATCH 3/4] Update src/pages/[platform]/start/quickstart/index.mdx --- src/pages/[platform]/start/quickstart/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index cc01730bcee..6aa1f000900 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -1273,7 +1273,7 @@ flutter create my_amplify_app ## Create Backend -The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory. First go to the base project directory with the following command: +The easiest way to get started with AWS Amplify is through npm with `create-amplify` command. You can run it from your base project directory. First, go to the base project directory with the following command: ```bash title="Terminal" showLineNumbers={false} cd my_amplify_app From 3b6319ef9d8d9c976ff3a2757384285b51ea2057 Mon Sep 17 00:00:00 2001 From: Rene Brandel <4989523+renebrandel@users.noreply.github.com> Date: Thu, 30 May 2024 13:32:33 -0700 Subject: [PATCH 4/4] Update src/pages/[platform]/start/quickstart/index.mdx --- src/pages/[platform]/start/quickstart/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/[platform]/start/quickstart/index.mdx b/src/pages/[platform]/start/quickstart/index.mdx index 6aa1f000900..70d0a1433db 100644 --- a/src/pages/[platform]/start/quickstart/index.mdx +++ b/src/pages/[platform]/start/quickstart/index.mdx @@ -1264,7 +1264,7 @@ You can follow the [official documentation](https://flutter.dev/docs/get-started Once you have installed Flutter, you can create a new Flutter project using the following command: -n this Quickstart guide, you will build the application for Web. However, if you want to run the application on other platforms, be sure to follow the required setup [guide here](/[platform]/start/platform-setup/). +In this Quickstart guide, you will build the application for web. However, if you want to run the application on other platforms, be sure to follow the required setup [guide here](/[platform]/start/platform-setup/). ```bash title="Terminal" showLineNumbers={false}