{"id":19823,"date":"2020-12-04T13:10:40","date_gmt":"2020-12-04T13:10:40","guid":{"rendered":"http:\/\/www.devopsschool.com\/blog\/?p=19823"},"modified":"2020-12-05T07:30:14","modified_gmt":"2020-12-05T07:30:14","slug":"crud-using-api-in-flutter-part-1","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/crud-using-api-in-flutter-part-1\/","title":{"rendered":"CRUD USING API IN Flutter (Part 1)"},"content":{"rendered":"\n

INTRODUCTION:<\/strong><\/p>\n\n\n\n

In general, the use of JSON is used to communicate data from client to server and from server to client. In this article we are going to create a Flutter application that can perform the following functions.
(I)Display data from the server
(II)Add data to server
(III)Edit data to server
(IV)Delete data from server
I think these four functions are common to all of us who have made data communication from client to server or we often know the four functions as CRUD. Our focus here is on the app side not the server side. For the server side, I have prepared a fake json server that we can test to learn. Here’s the fake json link.<\/p>\n\n\n\n

http:\/\/api.bengkelrobot.net:8001\/api\/profile<\/a><\/p>\n\n\n\n

\"Image<\/figure>\n\n\n\n
As for the endpoint list is as follows.\n\nGET<\/strong>\nhttp:\/\/api.bengkelrobot.net:8001\/<\/a>api\/profile\n\n\"Image<\/pre>\n\n\n\n
POST<\/strong><\/p>\n\n\n\n
http:\/\/api.bengkelrobot.net:8001\/api\/profile<\/a><\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
PUT<\/strong><\/p>\n\n\n\n
http:\/\/api.bengkelrobot.net:8001\/api\/profile\/:id<\/a><\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Project Creation:<\/strong>
Now please create a new project by name
flutter_crud_api_sample_app.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Then, we add the http dependency to the pubspec.yaml file<\/p>\n\n\n\n
dependencies<\/strong>:
flutter<\/strong>:
sdk<\/strong>: flutter<\/p>\n\n\n\n
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
<\/em>cupertino_icons<\/strong>: ^0.1.2<\/p>\n\n\n\n
http<\/strong>: ^0.12.0+2<\/p>\n\n\n\n
<\/p>\n\n\n\n
Craete Class Model:<\/strong>
Now we need to create a model class from our endpoint response.<\/p>\n\n\n\n
import <\/strong>‘dart:convert’;<\/p>\n\n\n\n
class <\/strong>Profile {
int id;
String name;
String email;
int age;<\/p>\n\n\n\n
Profile({this<\/strong>.id = 0, this<\/strong>.name, this<\/strong>.email, this<\/strong>.age});<\/p>\n\n\n\n
factory <\/strong>Profile.fromJson(Map<String, dynamic<\/strong>> map) {
return <\/strong>Profile(
id: map[“id”], name: map[“name”], email: map[“email”], age: map[“age”]);
}<\/p>\n\n\n\n
Map<String, dynamic<\/strong>> toJson() {
return <\/strong>{“id”: id, “name”: name, “email”: email, “age”: age};
}<\/p>\n\n\n\n
@override
String toString() {
return <\/strong>‘Profile{id: $id, name: $name, email: $email, age: $age}’;
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
List<Profile> profileFromJson(String jsonData) {
final <\/strong>data = json.decode(jsonData);
return <\/strong>List<Profile>.from(data.map((item) => Profile.fromJson(item)));
}<\/p>\n\n\n\n
String profileToJson(Profile data) {
final <\/strong>jsonData = data.toJson();
return <\/strong>json.encode(jsonData);
}<\/p>\n\n\n\n
<\/p>\n\n\n\n
In the model class, we create 4 fields, namely, id, name, email, and age. Then, we create a constructor with parameters according to the four fields earlier. Then, we create a Named Constructor in the following code.<\/p>\n\n\n\n
factory <\/strong>Profile.fromJson(Map<String, dynamic<\/strong>> map) {
return <\/strong>Profile(
id: map[“id”], name: map[“name”], email: map[“email”], age: map[“age”]);
}<\/p>\n\n\n\n
Where, we are using the keyword factory which functions so as not to create new objects when we call the Named Constructor. We use Named Constructor to convert from Map to Class Model.
Then, we also create a conversion method from Class Model to Map in the following code.<\/p>\n\n\n\n
Map<String, dynamic<\/strong>> toJson() {
return <\/strong>{“id”: id, “name”: name, “email”: email, “age”: age};
}<\/p>\n\n\n\n
Then, we also create a function to convert the response from the API to our model class in the following code.
And a function to convert from model class to JSON Format in the form of a String in the following code.<\/p>\n\n\n\n
List<Profile> profileFromJson(String jsonData) {
final <\/strong>data = json.decode(jsonData);
return <\/strong>List<Profile>.from(data.map((item) => Profile.fromJson(item)));
}<\/p>\n\n\n\n
<\/p>\n\n\n\n
And a function to convert from model class to JSON Format in the form of a String in the following code.\n\nString profileToJson(Profile data) {\nfinal <\/strong>jsonData = data.toJson();\nreturn <\/strong>json.encode(jsonData);\n}<\/pre>\n\n\n\n
Create API Service:<\/strong><\/p>\n\n\n\n
Now we need to create an API Service class that works to make a request to the endpoint<\/p>\n\n\n\n
import <\/strong>‘package:flutter_crud_api_sample_app\/src\/model\/profile.dart’;
import <\/strong>‘package:http\/http.dart’ show <\/strong>Client;<\/p>\n\n\n\n
class <\/strong>ApiService {<\/p>\n\n\n\n
final <\/strong>String baseUrl = “http:\/\/api.bengkelrobot.net:8001”;
Client client = Client();<\/p>\n\n\n\n
Future<List<Profile>> getProfiles() async <\/strong>{
final <\/strong>response = await <\/strong>client.get(“$baseUrl\/api\/profile”);
if <\/strong>(response.statusCode == 200) {
return <\/strong>profileFromJson(response.body);
} else <\/strong>{
return null<\/strong>;
}
}<\/p>\n\n\n\n
}<\/p>\n\n\n\n
In the code above, we create a getProfiles function which functions to make GET requests to the endpoint<\/p>\n\n\n\n
<\/p>\n\n\n\n
Test Class Model and API Service:<\/strong>
Now before we move on to creating the UI, it would be better if we first test whether the model class and API Service that we created are correct or not.<\/p>\n\n\n\n
@override
Widget build(BuildContext context) {
ApiService().getProfiles().then((value) => print(“value: $value”));
…
}
Create the above code inside the default widget that was created when we created the project for the first time. Now try running the program and see in the logs if we get the data from the API.<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
Display data from the server
Create a Home Screen:<\/strong><\/p>\n\n\n\n
class <\/strong>HomeScreen extends <\/strong>StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}<\/p>\n\n\n\n
class <\/strong>_HomeScreenState extends <\/strong>State<HomeScreen> {
ApiService apiService;<\/p>\n\n\n\n
@override
void <\/strong>initState() {
super<\/strong>.initState();
apiService = ApiService();
}<\/p>\n\n\n\n
@override
Widget build(BuildContext context) {
return <\/strong>SafeArea(
child: FutureBuilder(
future: apiService.getProfiles(),
builder: (BuildContext context, AsyncSnapshot<List<Profile>> snapshot) {
if <\/strong>(snapshot.hasError) {
return <\/strong>Center(
child: Text(
“Something wrong with message: ${snapshot.error.toString()}”),
);
} else if <\/strong>(snapshot.connectionState == ConnectionState.done) {
List<Profile> profiles = snapshot.data;
return <\/strong>_buildListView(profiles);
} else <\/strong>{
return <\/strong>Center(
child: CircularProgressIndicator(),
);
}
},
),
);
}<\/p>\n\n\n\n
Widget _buildListView(List<Profile> profiles) {
return <\/strong>Padding(
padding: const <\/strong>EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
child: ListView.builder(
itemBuilder: (context, index) {
Profile profile = profiles[index];
return <\/strong>Padding(
padding: const <\/strong>EdgeInsets.only(top: 8.0),
child: Card(
child: Padding(
padding: const <\/strong>EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
profile.name,
style: Theme.of<\/em>(context).textTheme.title,
),
Text(profile.email),
Text(profile.age.toString()),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FlatButton(
onPressed: () {
\/\/ TODO: do something in here
<\/em>},
child: Text(
“Delete”,
style: TextStyle(color: Colors.red<\/em>),
),
),
FlatButton(
onPressed: () {
\/\/ TODO: do something in here
<\/em>},
child: Text(
“Edit”,
style: TextStyle(color: Colors.blue<\/em>),
),
),
],
),
],
),
),
),
);
},
itemCount: profiles.length,
),
);
}
}<\/p>\n\n\n\n
\"Image<\/figure>\n\n\n\n
In the code above, we create a separate TextField widget (in the form of a method) which is intended to make it easier to read the code.
In form_add_screen.dart inside the onPressed callback we write code to post data to the API. So, to post data to the API we apply the following logic.
We first check whether all fields are valid or not.
Then, we take the values \u200b\u200bof each field.
Then, we wrap each data field into the profile.dart object
Then, we change the profile.dart object to a json form by using the profileToJson () method.
And here’s the code that does the job.<\/p>\n","protected":false},"excerpt":{"rendered":"
INTRODUCTION: In general, the use of JSON is used to communicate data from client to server and from server to client. In this article we are going to create a Flutter application that can perform the following functions.(I)Display data from the server(II)Add data to server(III)Edit data to server(IV)Delete data from serverI think these four functions…<\/p>\n","protected":false},"author":31,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_joinchat":[],"footnotes":""},"categories":[6331,2],"tags":[6519,6203],"class_list":["post-19823","post","type-post","status-publish","format-standard","hentry","category-flutter","category-uncategorised","tag-crud","tag-flutter"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19823","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/31"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=19823"}],"version-history":[{"count":1,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19823\/revisions"}],"predecessor-version":[{"id":19824,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/19823\/revisions\/19824"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=19823"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=19823"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=19823"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}