A Flutter Todo App using AWS Amplify & GetX

#flutter #aws #codenewbie #github

AWSAmplify DataStore enables the developers to add offline capabilities to their apps with just a few lines of code. It provides an on-device data storage service to read, write and observe data (online & offline mode) and sync it to a cloud database (DynamoDB).

Amplify use GraphQL for the data modeling, and it creates the models in the native language of your framework (JS, Java, Swift, Dart, etc.). This post will use the DataStore to create a Todo App where the user can create, update & delete tasks.

GetX is a micro-framework that combines State Management, Dependency Injection, Route Management, and other valuable utilities (e.g., internationalization, theming, validation, etc.). It is one of the most popular state management packages.

Mike Rydstrom 💙

@rydmike

💙#Flutter States Ranking #11 💙
Like based popularity of @FlutterDev state management, reactive programming and dependency injection packages.
Get remains number 1, followed by Provider and Bloc.
Riverpod continues to climb. In the fresh section, Binder got a popularity boost.

17:33 PM - 04 May 2021

We used the Admin UI to create the backend and enable authentication

Create the Flutter App and run the command below to pull the Amplify backend


amplify pull --appId <Your_appId> --envName staging

Follow the instructions describedhere to add GraphQL API. Once completed, you will get the following in your App.

We will need two models (Users & ToDo), update the file amplify/backend/{api_name}/schema.graphql as below


type Todo @model {
  id: ID!
  name: String!
  createdAt: AWSTimestamp
  updatedAt: AWSTimestamp
  isDone: Boolean
  userId: String
}

type Users @model {
  id: ID!
  username: String
  email: AWSEmail
  isVerified: Boolean
  createdAt: AWSTimestamp
}

The schema is ready; run the Amplify CLI command below to generate the models.


amplify codegen models

The models will be created as below

We will use three GetxControllers:

AuthController: This will handle the authentication operations by integrating with AuthService, which will use Amplify to authenticate the user. Once the user is signed in, we will create a user datastore record using DataStoreService. here we will also determine what page to display to the user based on the auth status

....

handleAuthChanged(isSignedIn) {
    if (!isSignedIn) {
      Get.offAllNamed("/signin");
    } else {
      Get.offAllNamed("/home");
    }
  }

...

Check my previous post to learn more about Amplify Authentication

Authentication Flow with Flutter & AWS Amplify

Offline Programmer ・ Apr 15 ・ 7 min read

#flutter #aws #tutorial #codenewbie

UserController: We will use it to get the user record from the DataStore.

....

  Future<void> getCurrUser() async {
    AuthUser authUser = await _authService.getCurrentUser();
    currentUser.value = await _datastoreService.getUser(authUser.userId);
    print(currentUser.value);
  }

...

TodoController: This is for creating\deleting\updating the tasks from the DataStore.

....

  Future<void> getTodos() async {
    AuthUser _authUser = await _authService.getCurrentUser();
    List<Todo> _list = await _datastoreService.getTodos(_authUser.userId);
    todoList.addAllIf(_list != null, _list);
  }

  Future<void> addTodo() async {
    AuthUser _authUser = await _authService.getCurrentUser();
    Todo todo = new Todo(
        name: todoTitleController.text.toString(),
        isDone: false,
        createdAt: TemporalTimestamp.now(),
        updatedAt: TemporalTimestamp.now(),
        userId: _authUser.userId);
    await _datastoreService.saveTodo(todo);
    todoList.add(todo);
  }

  Future<void> removeTodo(Todo todo) async {
    await _datastoreService.removeTodo(todo);
    todoList.remove(todo);
  }

  Future<void> setToDoDone(Todo todo, bool newValue) async {
    await _datastoreService.setToDoDone(todo, newValue);
    todoList[todoList.indexWhere((element) => element.id == todo.id)] =
        todo.copyWith(isDone: newValue);
  }

...

In the HomePage, the user will be able to create and manage the Todo tasks. Here we will use the power of GetX and its reactive state manager to enable the following features:

Displaying the user email

....

appBar: AppBar(
          title: GetX<UserController>(
            initState: (_) async {
              await Get.find<UserController>().getCurrUser();
            },
            builder: (_) {
              return Text(controller.user?.email ?? '',
                  style: TextStyle(fontSize: 12));
            },
          ),

...

Displaying the todo tasks

....

    Obx(
        () => Expanded(
            child: ListView.builder(
                itemCount: _todocontroller.todoList.length,
                itemBuilder: (_, index) {
                    return TodoCard(todo: _todocontroller.todoList[index]);
                },
                ),
            ),
        ),

...

We will use a Get.dialog to add a new Todo task

....

        floatingActionButton: FloatingActionButton(
          onPressed: () {
            Get.dialog(AlertDialog(
              title: Text('Add Todo here'),
              content: TextFormField(
                controller: _todocontroller.todoTitleController,
                decoration: InputDecoration(hintText: "Title"),
              ),
              actions: [
                TextButton(
                  child: Text('OK'),
                  onPressed: () async {
                    if (_todocontroller.todoTitleController.text != "") {
                      await _todocontroller.addTodo();
                      _todocontroller.todoTitleController.clear();
                    }
                    Get.back();
                  },
                ),
              ],
            ));
          },
          child: Icon(Icons.add),
        ),

...

We will show a checkbox for each task; the user can tab it to flag it as done. Dismissing the task will delete it from the DataStore.

....

  @override
  Widget build(BuildContext context) {
    TodoController _todocontroller = Get.find();
    return _buildContent(_todocontroller);
  }

  Dismissible _buildContent(TodoController _todocontroller) {
    return Dismissible(
      direction: DismissDirection.startToEnd,
      onDismissed: (DismissDirection direction) {
        if (direction == DismissDirection.startToEnd) {
          _todocontroller.removeTodo(todo);
        }
      },
      background: Container(
        alignment: Alignment.centerLeft,
        color: Colors.red,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Icon(
            Icons.delete,
            color: Colors.white,
          ),
        ),
      ),
      key: ValueKey(todo.id),
      child: _buildCard(_todocontroller),
    );
  }

  Card _buildCard(TodoController _todocontroller) {
    return Card(
      margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
      child: ListTile(
        leading: Checkbox(
          value: todo.isDone,
          onChanged: (newValue) {
            _todocontroller.setToDoDone(todo, newValue);
          },
        ),
        title: Text(
          todo.name,
          style: TextStyle(
            color: Colors.black,
            fontSize: 15,
            fontWeight: FontWeight.bold,
          ),
        ),
        subtitle: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              DateFormat.yMMMMEEEEd().format(
                  DateTime.fromMillisecondsSinceEpoch(
                      todo.createdAt.toSeconds() * 1000)),
              style: TextStyle(
                color: Colors.grey,
                fontSize: 10,
              ),
            ),
          ],
        ),
      ),
    );
  }

...