Simply copy and paste the following command line in your terminal to create your first Strapi project.
npx create-strapi-app
my-project
In this tutorial, we 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.
Strapi is an open-source headless CMS based on Nodejs that lets developers design APIs fast and manage content efficiently. Some features it offers among others include:
Strapi is 100% open-source. It is hosted on GitHub with over 50K stars and a large community for support. Strapi also has a forum and Discord server where Strapi users can ask questions and get answers and discuss the newest features and releases of Strapi.
Strapi is highly customizable with feature-rich plugins. Recently they introduced workflows which enable you to easily create, visualize and manage review content stages hence improving the collaboration experience and giving you control over the entire content lifecycle. A complete list of features and enhancements is available in the Strapi changelog. Strapi also has a highly customizable Amin UI for building collections and APIs with a marketplace where developers can search, install and interact with plugins.
You need no server. Strapi comes bundled with its server. All we have to do is scaffold a Strapi project, run its server, and we are good to go. You don't need to write any server code. Strapi does all that.
Strapi hosts your Collection in RESTful and GraphQL endpoints, and these endpoints can be consumed by clients (Angular, Flutter, Desktop, cURL, etc.). With Strapi, you don't have to worry about server setup and coding. There will be no need to create models and controllers because Strapi has all that baked in and ready to use. From the Strapi admin UI, we can create our collections and single types. A collection maps to the endpoints:
/YOUR_COLLECTION_s
: Creates new content./YOUR_COLLECTION_s
: Gets all the contents./YOUR_COLLECTION_s/:ID
: Gets a single content based on its ID
./YOUR_COLLECTION_s/:ID
: Edits a content/YOUR_COLLECTION_s/:ID
: Deletes a content.We will be building a todo app in Flutter to demonstrate how we can communicate from a Flutter app to a Strapi backend to store, edit and delete our todo items.
To follow this tutorial, you need to have some binaries installed on your machine:
v4.3.9
and aboveYarn
: Very fast Node package manager. You can install via NPM: npm i yarn -g
.flutter CLI
: This command-line tool is used to manage a Flutter project. We can use it to create a Flutter project. Visit https://flutter.dev/docs/get-started/install to install the CLI for your machine.We will create the main folder where our Strapi project and Flutter project will reside.
mkdir todo-app
Move into the folder: cd todo-app
then create a Strapi project with the command below:
yarn create strapi-app todo-app-backend --quickstart
# OR
npx create-strapi-app todo-app-backend --quickstart
This command creates a Strapi project in todo-app
with necessary dependencies and starts the server by running yarn develop
.
The page http://localhost:1337/admin/auth/register/
will be opened in the browser for you to set up your Strapi administrator credentials.
Fill in your details and click on the "LET'S START" button. Strapi will create your account and will load the admin UI like below. From this page, we create our collections.
We are building a todo app so we will create a Todo model that looks exactly like the one below:
1
2
3
4
Todo {
name
done
}
The model above represents a todo item we will have in our app. The name
is the name or text of a todo, e.g., "Read 100 years of love." The done
is a boolean field that indicates whether a todo item has been done or not.
Now, let's create the collection.
On the admin UI, click on Content-Type Builder, then, click on the + Create new collection
type button. A modal will pop up; on the popup modal, type "todo" in the Display name
input box. The "todo" will be the name of our collection type.
Click on the "Continue"
button and on the following UI that appears on the exact modal, create the fields for the "todo" collection.
Select the "Text" field on the next display and type in "name."
Click on the "+ Add another field"
button, and on the next display, select "Boolean" and type in "done" on the next display that appears.
Click on the "Finish"
button, the modal will disappear, and we will see the "todo" collection on the page with the fields we just added.
Click on the "Save"
button on the top right. It will save our "todo"
collection. We will see that a "Todo"
is a content type on the sidebar menu of the dashboard.
We will add mock Todo data to our collection.
But before that, we will disable the Draft/Publish feature so that we can directly save and publish items easily(note that this is not recommended in a production environment.)
From the dashboard, we click on Content-type Builder -> Todo
and click on the edit icon
From the popup menu that appears we select the advanced advanced settings tab and uncheck the Draft&Publish
checkbox and click on Finish
Now click on Content Manager
on the left sidebar; under the todo collection type, click on the + Create new entry
button at the top-right of the page. A Create an entry
UI will appear.
You will see input boxes for all the fields in our Todo model. Add the data below:
1
2
- `name` -> Read 100 years of love
- `done` -> false
After adding them, save and go back to the todo page to add another entry
1
2
- `name` -> Find a new home
- `done` -> false
Feel free to add many items as you like.
Next, we will open access for all users, both unauthenticated and authenticated users.
Click on the Settings
item on the sidebar menu.
Go to the "USERS & PERMISSIONS PLUGIN"
section and click on "Roles," and then on Public
on the right section.
A Public
page is loaded in this section. Scroll down to the Todo
area under the Permission
section and check the Select all
box, and finally click on the Save
button on the top-right page, to make our endpoints accessible to the Public.
In the next step, we add GraphQL to our collection.
By default, Strapi provides our endpoints via REST, but here we want the endpoints to be accessed via GraphQL. To do that, we use the following command to install the GraphQL plugin for Strapi.
yarn strapi install graphql
Article updated by: Kevine Nzapdi
Strapi will install the dependency and rebuild the admin UI. Visiting http://localhost:1337/graphql in your browser, will load the GraphQL playground:
We can play with our GraphQL from the playground. On the playground, Strapi will create GraphQL mutations and queries for the todos
collection that looks like the one below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
input TodoInput {
name: String
done: Boolean
}
// Todo's type definition
type Todo {
name: String
done: Boolean
createdAt: DateTime
updatedAt: DateTime
}
type TodoEntity {
id: ID
attributes: Todo
}
type Query {
todo(id: ID): TodoEntityResponse
todos(
filters: TodoFiltersInput
pagination: PaginationArg = {}
sort: [String] = []
): TodoEntityResponseCollection
}
Note: To find all the queries and mutations created for your collections, click on the “SCHEMA” item on the middle right-side of the GraphQL Playground. A right-side bar will appear listing the queries and mutations schema for your collections.
All the queries and mutations will be done via http://localhost:1337/graphql. Now let's test some queries and mutations in the GraphQL playground.
To retrieve all the todos in our collection, we run the query:
1
2
3
4
5
6
7
8
9
10
11
12
# Write your query or mutation here
query {
todos {
data {
id
attributes {
name
done
}
}
}
}
To retrieve a single todo item from our collection we run the query:
1
2
3
4
5
6
7
8
9
10
11
query {
todo(id: 1) {
data {
id
attributes {
name
done
}
}
}
}
To create a new todo we run the below mutation:
1
2
3
4
5
6
7
8
9
10
11
mutation createTodo {
createTodo(data: { name: "Find a new house", done: false }) {
data {
id
attributes {
name
done
}
}
}
}
To update to todo item run the below mutation:
1
2
3
4
5
6
7
8
9
10
11
mutation updateTodo {
updateTodo(id: "1", data: { done: true }) {
data {
id
attributes {
name
done
}
}
}
}
To delete a todo run the mutation below:
1
2
3
4
5
6
7
8
9
10
11
mutation deleteTodo {
deleteTodo(id: 22) {
data {
id
attributes {
name
done
}
}
}
}
Now it’s time to build the Flutter app.
Make sure you have the Flutter and Dart SDK fully installed on your machine. If you are having issues with Flutter, run flutter doctor
to iron them out. Once everything is set up, run flutter --version
to make sure the Flutter CLI is available globally in your system.
Step out of the todo-app-backend
folder and run the command below:
flutter create todo_app_frontend
The command creates a Flutter project directory called todo_frontend
that contains a simple demo app that uses Material Components. So now we should have two folders(todo-app-backend
and todo_app_frontend
) in the todo-app
folder
Move into the todo_app_frontend
folder:
cd todo_app_frontend
Make sure your simulator/emulator is running. You can check if your emulator is running and active by running the command: flutter devices
.
Once everything is okay,we start the app with the command flutter run
.
We will see the app launched in our emulator. So the need step will consist of building the actual todo flutter app. We go back to the Flutter project. You will see a main.dart
file in the project. That is the main file in Flutter projects, and it is where the app is being bootstrapped from. Everything in Flutter is a widget.
Our app will have three widgets:
CreateTodo
: This widget is where we will create new todos.TodoList
: This widget will get the list of all the todos in our system.ViewTodo
: This widget is where we will view our todos, and edit and delete them.Our final app will look like this:
To build the app, we will use these dependencies:
graphql_flutter
: This is a GraphQL client for Flutter that gives us APIs to run queries and mutations conversationally.intl
: This library provides us with DateTime formatting capabilities.Open the pubspec.yaml
file, go to the dependencies
section and add graphql_flutter
and intl
.
1
2
3
4
5
dependencies:
flutter:
sdk: flutter
graphql_flutter: ^5.1.2
intl: ^0.18.1
Then run flutter pub get
in your terminal. Flutter will install the dependencies in your project.
Create a project structure like the screenshot below:
We have two folders in the lib directory. The first one API
hosts a file graphqlConfig.dart
that hold the GraphQL configurations while the screens
holds the different screens of our app.
We will flesh out the code in them. To connect to a GraphQL server, we will create a GraphQLClient
. This GraphQLClient
will contain a link and cache system.
According to comments on the GraphQLClient
source code: The link is a Link over which GraphQL documents will be resolved into a Response. The cache is the GraphQLCache to use for caching results and optimistic updates.
We will create a GraphQLConfiguration
class in the lib/api/graphQLConfig.dart
file, and this class will have a clientToQuery
method that will return an instance of GraphQLClient
.
Open lib/GraphQLConfig.dart
and paste the below code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import "package:flutter/material.dart";
import "package:graphql_flutter/graphql_flutter.dart";
class GraphQLConfiguration {
static HttpLink httpLink = HttpLink(
'http://10.0.2.2:1337/graphql',
);
static ValueNotifier<GraphQLClient> client = ValueNotifier(
GraphQLClient(
cache: GraphQLCache(),
link: httpLink,
),
);
static ValueNotifier<GraphQLClient> clientToQuery() {
return client;
}
}
static HttpLink httpLink = HttpLink(
'http://10.0.2.2:1337/graphql',
);
This particular block code above sets the link where the GraphQLClient
will resolve documents. You can notice that the link is http://10.0.2.2:1337/graphql
, instead of http://localhost:1337/graphql
. The emulator proxies HTTP requests made inside it. Since we are running the flutter app on an emulator, the proxy URL is 10.0.2.2
, and this URL will forward the HTTP request made to the URL to localhost
.
Our Strapi backend runs on localhost:1337
, we have to make an HTTP request to 10.0.2.2:1337. The emulator will proxy it to localhost:1337
.
The cache: GraphQLCache()
makes the GraphQLClient
use its internal cache. We create an instance of GraphQLClient
and store it in the client
. This is returned in the clientToQuery
static method.
Open the lib/main.dart
and paste the following code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:intl/intl.dart';
import 'package:todo_frontend/screens/createTodo.dart';
import 'package:todo_frontend/screens/viewTodo.dart';
import 'package:todo_frontend/api/graphqlConfig.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
Widget build(BuildContext context) {
return GraphQLProvider(
client: GraphQLConfiguration.clientToQuery(),
child: MaterialApp(
title: 'Todo App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const TodoList(),
));
}
}
Note that we imported all the packages that we will be using.
The main
function is the entry point where the execution starts. The runApp
function starts rendering the widgets in our app. Notice that we passed it MyApp
widget. This widget is the first widget to render its UI in our todo app.
Each widget overrides the build
method from either StatelessWidget
or StatefulWidget
to return widgets that will render the UI of our app.
A StatelessWidget
manages no local state. It is just like a functional component in Reactjs without useState
. A StatefulWidget
manages a local state. It is like a functional component in Reactjs with the useState
hook.
The MyApp
extends the StatelesWidget
because it will be managing no state. In its build method, we have a context argument that is of the BuildContext
instance. BuildContext
is a handle for the location of a widget in the widget tree.
The GraphQLClient
has Mutation
and Query
widgets. These widgets give us options from where we can make queries and mutations to our GraphQL server. Before making these queries and mutations, we must wrap the Query
and Mutation
widgets in the GraphQLProvider widget.
That's why in the build
method of the MyApp
, we wrapped the MaterialApp
widget in GraphQLProvider
. As a result, the TodoList
widget can now access the Query
and Mutation
widgets.
This widget makes a query to fetch all the todos in our Strapi backend, which happens when the widgets load. Then, it will render the todos in a list. Each todo list will have an onTap
event registered on them so that when pressed, a ViewTodo
widget screen is opened to view the item.
Also, in this widget, we will have a FloatingActionButton
, when clicked will open the CreateTodo
widget screen for us to add new todos.
Paste the code below to build the TodoList
screen after the MyApp
widget in main.dart
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
class TodoList extends StatefulWidget {
const TodoList({Key? key}) : super(key: key);
TodoListState createState() => TodoListState();
}
class TodoListState extends State<TodoList> {
String readTodos = """
query {
todos(sort:"createdAt:desc") {
data {
id
attributes {
name
done
createdAt
}
}
}
} """;
var colors = [
Colors.indigo,
Colors.green,
Colors.purple,
Colors.pinkAccent,
Colors.red,
Colors.black
];
Random random = Random();
List<Map<String, dynamic>> todos = [];
randomColors() {
int randomNumber = random.nextInt(colors.length);
return colors[randomNumber];
}
onChange(b) {
return true;
}
Widget build(BuildContext context) {
return Scaffold(
body: Query(
options: QueryOptions(
document: gql(readTodos),
pollInterval: const Duration(seconds: 0),
),
builder: (QueryResult result,
{VoidCallback? refetch, FetchMore? fetchMore}) {
if (result.hasException) {
return Text(result.exception.toString());
}
if (result.isLoading) {
return const Center(child: Text('Loading'));
}
Map<String, dynamic> todos = result.data?["todos"];
return Scaffold(
backgroundColor: Colors.white,
body: Column(children: [
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.fromLTRB(8, 50, 0, 9),
color: Colors.blue,
child: const Text(
"Todo",
style: TextStyle(
fontSize: 45,
fontWeight: FontWeight.bold,
color: Colors.white),
)),
const SizedBox(
height: 10,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: ListView.builder(
itemCount: todos["data"].length,
shrinkWrap: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ViewTodo(
id: todos["data"][index]["id"],
refresh: () {
refetch!();
}),
),
);
},
child: Container(
margin: const EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(7)),
color: randomColors(),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
0, 6, 0, 6),
// child: Text('To do'),
child: Text(
todos['data'][index]["attributes"]
["name"]
.toString(),
style: const TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
Text(
DateFormat("yMMMEd")
.format(DateTime.parse(todos['data']
[index]["attributes"]
["createdAt"]
.toString()))
.toString(),
style: const TextStyle(
color: Colors.white),
),
],
),
),
Checkbox(
value: todos["data"][index]["attributes"]
["done"],
onChanged: onChange,
checkColor: Colors.white,
activeColor: Colors.white,
)
],
),
));
},
),
),
]),
floatingActionButton: FloatingActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.green,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CreateTodo(refresh: () {
refetch!();
}),
),
);
},
tooltip: 'Add new todo',
child: const Icon(Icons.add),
),
);
}),
);
}
}
The TodoList
uses the createState
method to create its mutatable state at the TodoListState
, and this TodoListState
renders the UI widget for the TodoList
.
Widgets that extend the State
class are:
1
2
3
4
- The logic and internal state for a [StatefulWidget].
- The State is information that
- (1) can be read synchronously when the widget is built and
- (2) might change during the widget's lifetime. It is the responsibility of the widget implementer to ensure that the [State] is promptly notified when such state changes, using [State.setState].
Inside the TodoListState
widget, we start by defining the query to read the todos in the readTodos
String variable. We have an array of colors, and we used this to change the background color of our todos list widget randomly.
The todos
variables will hold the todos list fetched from our backend. The randomColors
is the method that will randomly return a background color for each todo widget.
Inside the build method, see that the Query
widget wraps the whole widget tree. This is done to reference the returned todos. We also have a vital function refetch
that we can use to refresh our todos list when a change occurs.
This Query
widget uses the document
method in its options
object to query for the todos list. It does this by calling the gql
method with the readTodos variable. The result of this query is returned in the builder
function's result
argument.
Inside the function, we retrieve the result and assign it to the todos
collection:
1
Map<String, dynamic> todos = result.data?["todos"];
Then we return our UI starting from the Scaffold(...)
widget. We use todos[``"``data``"``]
to render each result there in the ListView.builder
.
We then use GestureDetector
widget to which we is set an onTap
event.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
child: ListView.builder(
itemCount: todos["data"].length,
shrinkWrap: true,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ViewTodo(
id: todos["data"][index]["id"],
refresh: () {
refetch!();
}),
),
);
},
child: Container(
margin: const EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: const EdgeInsets.fromLTRB(10, 0, 10, 10),
decoration: BoxDecoration(
borderRadius:
const BorderRadius.all(Radius.circular(7)),
color: randomColors(),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
0, 6, 0, 6),
// child: Text('To do'),
child: Text(
todos['data'][index]["attributes"]
["name"]
.toString(),
style: const TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.bold)),
),
Text(
DateFormat("yMMMEd")
.format(DateTime.parse(todos['data']
[index]["attributes"]
["createdAt"]
.toString()))
.toString(),
style: const TextStyle(
color: Colors.white),
),
],
),
),
Checkbox(
value: todos["data"][index]["attributes"]
["done"],
onChanged: onChange,
checkColor: Colors.white,
activeColor: Colors.white,
)
],
),
));
},
),
From the code you can notice that when a Todo item in the list is pressed or tapped, the ViewTodo
widget screen is launched. We passed to it the id of the Todo and a refresh function. This refresh function calls the refetch
function returned by the Query
widget. This is done to refresh the TodoList
view from the ViewTodo
widget when a change to the Todo occur.
The FloatingActionButton
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
floatingActionButton: FloatingActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.green,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CreateTodo(refresh: () {
refetch!();
}),
),
);
},
tooltip: 'Add new todo',
child: const Icon(Icons.add),
),
It launches the CreateTodo
widget on clicked. Let's look at the ViewTodo
widget.
We will perform three actions on a Todo in this widget.
To build this screen paste the code below in lib/screens/ViewTodo.dart
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import 'package:todo_frontend/api/graphqlConfig.dart';
String readTodo = """
query(\$id: ID!) {
todo(id: \$id) {
data {
id
attributes {
name
done
}
}
}
}
""";
String updateTodo = """
mutation updateTodo(\$id: ID!, \$done: Boolean, \$name: String) {
updateTodo(id: \$id, data: { done: \$done, name: \$name}) {
data {
id
attributes {
name
done
}
}
}
}
""";
String deleteTodo = """
mutation deleteTodo(\$id: ID!) {
deleteTodo(id: \$id) {
data {
id
attributes {
name
done
}
}
}
}
""";
class ViewTodo extends StatefulWidget {
final id;
final refresh;
const ViewTodo({Key? key, this.id, this.refresh})
: super(key: key);
ViewTodoState createState() =>
ViewTodoState(id: this.id, refresh: this.refresh);
}
class ViewTodoState extends State<ViewTodo> {
late final id;
late final refresh;
ViewTodoState({Key? key, this.id, this.refresh});
var editMode = false;
var myController;
bool? done;
Widget build(BuildContext context) {
return GraphQLProvider(
client: GraphQLConfiguration.clientToQuery(),
child: Query(
options: QueryOptions(
document: gql(readTodo),
variables: {'id': id},
pollInterval: const Duration(seconds: 0)),
builder: (QueryResult result,
{VoidCallback? refetch, FetchMore? fetchMore}) {
if (result.hasException) {
return Text(result.exception.toString());
}
if (result.isLoading) {
return const Scaffold(body: Center(child: Text('Loading')));
}
// it can be either Map or List
var todo = result.data?["todo"];
done = todo\["data"\]["attributes"]["done"];
myController = TextEditingController(
text: todo\["data"\]["attributes"]["name"].toString());
return Scaffold(
appBar: AppBar(
elevation: 0,
automaticallyImplyLeading: false,
backgroundColor: Colors.blue,
flexibleSpace: SafeArea(
child: Container(
padding: const EdgeInsets.only(
right: 16, top: 4, bottom: 4, left: 0),
child: Row(children: <Widget>[
IconButton(
onPressed: () {
Navigator.pop(context);
},
icon: const Icon(
Icons.arrow_back,
color: Colors.white,
),
),
const SizedBox(
width: 20,
),
const Text(
"View Todo",
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Colors.white),
),
])))),
body: Container(
padding: const EdgeInsets.all(12),
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(9),
color: Colors.blue),
width: double.infinity,
height: 200,
child: editMode
? Column(
children: [
Container(
width: double.infinity,
padding:
const EdgeInsets.fromLTRB(0, 0, 0, 4),
child: const Text("Todo:",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 20,
))),
TextField(
controller: myController,
decoration: const InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
width: 1, color: Colors.white)),
hintText: 'Add todo'),
),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
padding: const EdgeInsets.fromLTRB(
0, 0, 0, 4),
child: const Text("Done:",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 20,
))),
StatefulBuilder(builder:
(BuildContext context,
StateSetter setState) {
return Checkbox(
value: done,
onChanged: (value) {
setState(() {
done = value;
});
},
);
}),
])
],
)
: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
children: [
Container(
padding:
const EdgeInsets.fromLTRB(0, 0, 0, 4),
child: const Text("Todo:",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
),
const SizedBox(
width: 15,
),
Container(
padding:
const EdgeInsets.fromLTRB(0, 0, 0, 4),
child: Text(
todo\["data"\]["attributes"]["name"]
.toString(),
textAlign: TextAlign.left,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold)))
],
),
const SizedBox(
height: 10,
),
Row(
children: [
const Text("Done:",
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.white,
fontSize: 20,
)),
const SizedBox(
width: 15,
),
Text(
todo\["data"\]["attributes"]["done"]
.toString(),
textAlign: TextAlign.left,
style: const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold))
],
),
],
),
),
floatingActionButton: !editMode
? Mutation(
options: MutationOptions(
document: gql(deleteTodo),
update:
(GraphQLDataProxy cache, QueryResult? result) {
return cache;
},
onCompleted: (dynamic resultData) {
refresh();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Done.')));
Navigator.pop(context);
},
),
builder:
(RunMutation runMutation, QueryResult? result) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
heroTag: null,
child: const Icon(Icons.delete),
onPressed: () {
runMutation({'id': id});
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(
content:
Text('Deleting todo...')));
},
),
const SizedBox(
height: 10,
),
FloatingActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.blue,
onPressed: () {
setState(() {
editMode = true;
});
},
tooltip: 'Edit todo',
child: const Icon(Icons.edit),
)
]);
})
: Mutation(
options: MutationOptions(
document: gql(updateTodo),
update:
(GraphQLDataProxy cache, QueryResult? result) {
return cache;
},
onCompleted: (dynamic resultData) {
refresh();
refetch!();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Done.')));
},
),
builder: (
RunMutation runMutation,
QueryResult? result,
) {
return Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Padding(
padding:
const EdgeInsets.fromLTRB(0, 0, 0, 5),
child: FloatingActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.red,
heroTag: null,
child: const Icon(Icons.cancel),
onPressed: () {
setState(() {
editMode = false;
});
},
)),
FloatingActionButton(
foregroundColor: Colors.white,
backgroundColor: Colors.green,
heroTag: null,
child: const Icon(Icons.save),
onPressed: () {
ScaffoldMessenger.of(context)
.showSnackBar(const SnackBar(
content:
Text('Updating todo...')));
runMutation({
'id': id,
'name': myController.text,
'done': done
});
setState(() {
editMode = false;
});
},
)
]);
}));
}));
}
}
We have three string variables set readTodo
, updateTodo
, and deleteTodo
.
readTodo
is a query data to return a todo by its id.updateTodo
is a mutation to update a todo using its id
with new done
and name
values.deleteTodo
is also a mutation that deletes a todo.Notice that the ViewTodo
is a stateful widget and manages its State in the ViewTodoState
widget. Every variable inside the ViewTodoState
widget is a state variable that can be updated during the widget's lifetime.
The constructor is set to accept the Todo's id and a refresh function. In the ViewTodoState
widget, see that we have an editMode
boolean variable. This variable sets the edit mode of the widget. We did this to toggle text fields we can use to edit this widget without the need for another widget screen.
The myController
is a text controller for a text field when editing the Todo in an edit mode. We use it to get the value typed in a TextField.
The bool? done;
is used to hold the done
field of the todo.
In the build
method, we enclosed the whole widget in the tree with the Query
widget. It calls the readTodo
on start-up and renders the name
and done
fields of the Todo in the UI.
We used a ternary operator to check when the editMode
is active and render text field and the checkbox to edit the Todo. If there is no edit mode, the todo details are rendered on Text widgets. Also, we are using the editMode
to render FloatingActionButtons
based on the current model.
If there is an edit mode, the save
and cancel
FloatingActionButtons
will show. The save
FloatingActionButton
will save the edited Todo. It will collect the name
value from TextField and collect the done
value from the State of the CheckBox. Then, it will call the runMutation
with the values.
There is an onCompleted
function of the Mutation
object enclosing the edit section of the save
and cancel
FloatingActionButton
.
1
2
3
4
5
6
onCompleted: (dynamic resultData) {
refresh();
refetch!();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Done.')));
},
We call the refresh
method to refresh the list of todos in the TodoList
and the refetch
method from the Query
widget to refresh this ViewTodo
widget because the current Todo has been modified.
If there is no edit mode, the edit
and delete
FlatActionButton are shown. The edit
FlatActionButton, when clicked, sets the editMode
State to true
. The delete
FlatActionButton, when clicked, sends the deleteTodo
to delete the current Todo.
In the onCompleted
function of the Mutation
widget that enclosed it, we called the refetch
method and popped the ViewTodo
widget off the screen because it was deleted and is no longer available.
1
2
3
4
5
6
onCompleted: (dynamic resultData) {
refresh();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('Done.')));
Navigator.pop(context);
},
Let's code the CreateTodo
screen.
This method is where we create new todos. This screen will have a TextField where we can type in the name of the Todo to create. It will have a MaterialButton
that will run a mutation when clicked.
Paste the below code to lib/screens/createTodo.dart
:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
import '../api/graphQLConfig.dart';
String addTodo = """
mutation createTodo(\$name: String, \$done: Boolean) {
createTodo(data: { name: \$name, done: \$done}) {
data {
id
attributes {
name
done
}
}
}
}
""";
class CreateTodo extends StatelessWidget {
final myController = TextEditingController();
final refresh;
CreateTodo({Key? key, this.refresh}) : super(key: key);
Widget build(BuildContext context) {
return GraphQLProvider(
client: GraphQLConfiguration.clientToQuery(),
child: Mutation(
options: MutationOptions(
document: gql(addTodo),
update: (GraphQLDataProxy cache, QueryResult? result) {
return cache;
},
onCompleted: (dynamic resultData) {
refresh!();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('New todo added.')));
Navigator.pop(context);
},
),
builder: (
RunMutation runMutation,
QueryResult? result,
) {
return Scaffold(
appBar: AppBar(
title: const Text("Create Todo"),
),
body: Column(children: [
Container(
alignment: Alignment.centerLeft,
padding: const EdgeInsets.fromLTRB(10, 50, 10, 9),
child: TextField(
controller: myController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Add todo'),
)),
Row(children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(10),
child: MaterialButton(
onPressed: () {
runMutation({
'name': myController.text,
'done': false
});
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Adding new todo...')));
},
color: Colors.blue,
padding: const EdgeInsets.all(17),
child: const Text(
"Add",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
fontSize: 20),
),
)))
])
]));
}));;
}
}
Notice that we have a createTodo
mutation set. This mutation string will create a new todo in our Strapi.
The CreateTodo
is a stateless widget, and it manages no state. The constructor accepts the refresh function passed to it and stores in it the refresh
variable.
myController
is a TextEditingController
used to manipulate TextFields. We wrap its widget tree in GraphQLProvider
and Mutation
widgets. The document
function will run the gql(createTodo)
function call when the runMutation
argument in its builder
function is called.
In the UI, a TextField is rendered. This is where the new todo name is typed. The myController
is set to the TextField. This will enable us to use the myController
to get the value of the TextField.
The MaterialButton
has an onPressed
event registered to it. Its handler will be called when the button is pressed. This will retrieve the value in the TextField using the myController
.
It will call the runMutation
function passing in the value in the TextField. This will run the createTodo
mutation creating a new todo in our Strapi backend.
The onCompleted
function will be called when the mutation completes:
1
2
3
4
5
6
onCompleted: (dynamic resultData) {
refresh!();
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('New todo added.')));
Navigator.pop(context);
},
The refresh
function passed to the CreateTodo
widget from the TodoList
widget is called, so the todos list in the TodoList
widget is updated to display our newly added todo item.
Now let’s test our application to ensure that everything is working. If you run the application, you should be able to add, update, edit and delete a Todo as in the demo below
From this tutorial, we learn how to create a Strapi project, build collections using its admin dashboard and set up Graphql endpoints.
We created a simple Todo app in Flutter to show how we can consume the Strapi GraphQL endpoints from a mobile app.
Strapi is straightforward, to begin with, and provides an easy-to-understand doc. It can connect with any client, mobile, web, or desktop. Feel free to check out other quick guides Strapi Integrations to get started.
You can find the full working code of the Flutter application this To-Do App with Strapi GraphQL Plugin and Flutter repository