Skip to content

Commit

Permalink
Update the flutter mobile support doc.
Browse files Browse the repository at this point in the history
  • Loading branch information
salihgueler committed Apr 18, 2024
1 parent f632341 commit 9e1d7ab
Showing 1 changed file with 57 additions and 31 deletions.
88 changes: 57 additions & 31 deletions src/pages/gen2/start/mobile-support/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -524,7 +524,7 @@ Running this command will scaffold a lightweight Amplify project in your current
Amplify gen2 provides a new way to develop applications. Now you are able to run your application with a sandbox environment and generate the configuration files for your application. To run your application with a sandbox environment, you can run the following command:

```bash
npx amplify sandbox --config-format=dart --config-out-dir=lib
npx amplify sandbox --config-format dart --config-out-dir lib
```

### Adding Authentication
Expand Down Expand Up @@ -631,31 +631,33 @@ After the Amplify creation process, you can see a resource.ts file in the amplif
The default code will create a Todo model with content and isDone property. The authorization rules below specify that owners, authenticated via your Auth resource can "create", "read", "update", and "delete" their own records.

```typescript
import { type ClientSchema, a, defineData } from '@aws-amplify/backend';
import { type ClientSchema, a, defineData } from "@aws-amplify/backend";
const schema = a.schema({
Todo: a
.model({
content: a.string(),
isDone: a.boolean()
isDone: a.boolean(),
createdAt: a.datetime(),
updatedAt: a.datetime(),
})
.authorization([a.allow.owner()])
.authorization([a.allow.owner()]),
});
export type Schema = ClientSchema<typeof schema>;
export const data = defineData({
schema,
authorizationModes: {
defaultAuthorizationMode: 'userPool'
}
defaultAuthorizationMode: "userPool",
},
});
```

To generate the model classes out of GraphQL schema, you can run the following command:

```bash
npx amplify generate graphql-client-code --format=modelgen --model-target=dart --out=lib/models
npx amplify generate graphql-client-code --format modelgen --model-target dart --out lib/models
```

This will generate dart models under lib/models folder.
Expand Down Expand Up @@ -720,6 +722,7 @@ class _TodoScreenState extends State<TodoScreen> {
} else {
safePrint('Creating Todo successful.');
}
_refreshTodos();
},
),
body: const Placeholder(),
Expand All @@ -730,9 +733,31 @@ class _TodoScreenState extends State<TodoScreen> {

This will create a random Todo every time a user clicks on the floating action button. You can see the `ModelMutations.create` method is used to create a new Todo.

And update the `Text('TODO Application')` line in your **main.dart** file to use the `TodoScreen` widget.
And update the `MyApp` widget in your **main.dart** file like the following:

```dart
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Authenticator(
child: MaterialApp(
builder: Authenticator.builder(),
home: const Scaffold(
body: Column(
children: [
SignOutButton(),
Expanded(child: TodoScreen()),
],
),
),
),
);
}
}
```

Next add a `_todos` list to add the results from the API and call the refresh function:
Next add a `_todos` list in `_TodoScreenState` to add the results from the API and call the refresh function:

```dart
List<Todo> _todos = [];
Expand All @@ -744,6 +769,29 @@ void initState() {
}
```


and create a new function called `_refreshTodos`:

```dart
Future<void> _refreshTodos() async {
try {
final request = ModelQueries.list(Todo.classType);
final response = await Amplify.API.query(request: request).response;
final todos = response.data?.items;
if (response.hasErrors) {
safePrint('errors: ${response.errors}');
return;
}
setState(() {
_todos = todos!.whereType<Todo>().toList();
});
} on ApiException catch (e) {
safePrint('Query failed: $e');
}
}
```

and update the body with the following code:

```dart
Expand Down Expand Up @@ -773,28 +821,6 @@ body: _todos.isEmpty == true
),
```

and create a new function called `_refreshTodos`:

```dart
Future<void> _refreshTodos() async {
try {
final request = ModelQueries.list(Todo.classType);
final response = await Amplify.API.query(request: request).response;
final todos = response.data?.items;
if (response.hasErrors) {
safePrint('errors: ${response.errors}');
return;
}
setState(() {
_todos = todos!.whereType<Todo>().toList();
});
} on ApiException catch (e) {
safePrint('Query failed: $e');
}
}
```

Now let's add a update and delete functionality.

For update, add the following code to the `onChanged` method of the `CheckboxListTile.adaptive` widget:
Expand Down

0 comments on commit 9e1d7ab

Please sign in to comment.