How to Build a To-Do App with Strapi GraphQL Plugin and Flutter

This article will set up a GraphQL endpoint in a Strapi backend along with Flutter, a powerful open-source UI development kit for Android, iOS, Linux, Mac, Windows, Google Fuchsia, and the web to build a Todo app.


This is a companion discussion topic for the original entry at https://strapi.io/blog/build-a-to-do-app-with-strapi-graph-ql-plugin-and-flutter

Hi Chidume, Thank you for your great tutorial!

The Strapi back-end is working perfectly! But I have some pain getting the Flutter front-end working. It seems to be the null safety and the graphql_flutter 5.0.0!?!?

Hopefully you are willing to help upgrading the code?

Kind regards,
Robert

I don’t think it’s from the version. Are you running the Flutter app in an emulator? If yes, you have to set the emulator proxy to http://10.0.2.2:1337. If the problem persists you can send me a screenshot or a video.

Thank you for your quick response!

Even when I connect my phone I’m getting the following errors

Launching lib/main.dart on Mi 9 SE in debug mode...
Running Gradle task 'assembleDebug'...
lib/screens/ViewTodo.dart:76:37: Error: Operator '[]' cannot be called on 'Map<String, dynamic>?' because it is potentially null.
 - 'Map' is from 'dart:core'.
              var todo = result.data["todo"];
                                    ^
lib/screens/ViewTodo.dart:263:36: Error: The getter 'scache' isn't defined for the class 'ViewTodoState'.
 - 'ViewTodoState' is from 'package:todo_strapi/screens/ViewTodo.dart' ('lib/screens/ViewTodo.dart').
Try correcting the name to the name of an existing getter, or defining a getter or field named 'scache'.
                            return scache;
                                   ^^^^^^


FAILURE: Build failed with an exception.

* Where:
Script '/Users/Robert/development/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 1005

* What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.
> Process 'command '/Users/Robert/development/flutter/bin/flutter'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 19s
Exception: Gradle task assembleDebug failed with exit code 1

Interesting. Can I see your full code link?

Because I installed as a new project I used the latest version graphql_flutter: ^5.0.0 in the pub spec.yaml file.
The rest of the code is the same as you provided.

environment:
  sdk: '>=2.12.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  intl:
  graphql_flutter: ^5.0.0
  http:

I will need to see your code so to cross-check. Upload them to GitHub and send me the link. I will take it from there.