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

Blogs
1

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
2

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

4

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.

5

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
6

Interesting. Can I see your full code link?

7

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:
8

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.

9

You’ll need a Mac computer with the newest version of XCode to create iOS apps. The graphical interface you’ll use to create iOS apps is called XCode. For iOS app development, Xcode offers the iOS SDK, tools, compilers, and frameworks you’ll need to design, create, write code, and debug an app.

10

I have to say Strapi continue to amaze me , its incredible and its fast.
This morning i was thinking how to create a React native app with it and then i found this with Flutter.
This is really great.
Staying in topic…can i interface Strapi with an existing Flutter project i already have?
Node, GraphQl, my Flutter Project ?
And , can i put there Drawer and bottom bar menu in it ?
Thanks

11

In general I can also recommend the following article on How to Create a Flutter Plugin from Scratch