Getx in Flutter is not updating ui for api request - json

Question

I was updating UI of my Data table by assigning fetch result of an api and assigning it to Getx List. this works fine but when trying to delete, create and update data the ui is not responding. according to my code i was calling the get controller and assigning the value is by using initState() . so this only call it once initially. when i try to delete the whole page will reload even the widgets outside the data table. but those widgets display the data from the same api result. I'll post my code now.
user model
import 'role_model.dart';
import 'dart:convert';
List<User> usersFromJsonFromModel(String str) =>
List<User>.from(json.decode(str).map((json) => User.fromJson(json)));
String usersToJsonFromModel(List<User> data) =>
json.encode(List<dynamic>.from(data.map((e) => e.toJson())));
class User {
int? id;
String? name;
String? username;
String? email;
String? emailVerifiedAt;
String? twoFactorConfirmedAt;
String? currentTeamId;
String? profilePhotoPath;
String? warehouseId;
String? createdAt;
String? updatedAt;
String? profilePhotoUrl;
List<Roles>? roles;
User(
{this.id,
this.name,
this.username,
this.email,
this.emailVerifiedAt,
this.twoFactorConfirmedAt,
this.currentTeamId,
this.profilePhotoPath,
this.warehouseId,
this.createdAt,
this.updatedAt,
this.profilePhotoUrl,
this.roles});
User.fromJson(Map<String, dynamic> json) {
id = json['id'];
name = json['name'];
username = json['username'];
email = json['email'];
emailVerifiedAt = json['email_verified_at'];
twoFactorConfirmedAt = json['two_factor_confirmed_at'];
currentTeamId = json['current_team_id'];
profilePhotoPath = json['profile_photo_path'];
warehouseId = json['warehouse_id'];
createdAt = json['created_at'];
updatedAt = json['updated_at'];
profilePhotoUrl = json['profile_photo_url'];
if (json['roles'] != null) {
roles = <Roles>[];
json['roles'].forEach((v) {
roles!.add(Roles.fromJson(v));
});
}
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = Map<String, dynamic>();
data['id'] = id;
data['name'] = name;
data['username'] = username;
data['email'] = email;
data['email_verified_at'] = emailVerifiedAt;
data['two_factor_confirmed_at'] = twoFactorConfirmedAt;
data['current_team_id'] = currentTeamId;
data['profile_photo_path'] = profilePhotoPath;
data['warehouse_id'] = warehouseId;
data['created_at'] = createdAt;
data['updated_at'] = updatedAt;
data['profile_photo_url'] = profilePhotoUrl;
if (roles != null) {
data['roles'] = roles!.map((v) => v.toJson()).toList();
}
return data;
}
}
API call
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:store_mgt_project/controller/user_controller.dart';
import 'package:store_mgt_project/utils/const.dart';
import '../users_model.dart';
Future<List<User>> fetchUsers() async {
Uri url = Uri.parse("${BASE_URL}user");
final response = await http.get(url, headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer $TOKEN',
});
var userview = <User>[];
if (response.statusCode == 200) {
var jsonres = json.decode(response.body);
for (var res in jsonres) {
userview.add(User.fromJson(res));
}
}
return userview;
}
Future createUser(String name, String username, String email, String password,
String roles) async {
final UserController userController = Get.put(UserController());
Uri url = Uri.parse("${BASE_URL}user");
var userview = <User>[];
var jsonres;
final response = await http
.post(url,
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer $TOKEN',
},
body: jsonEncode(<String, dynamic>{
'name': name,
'email': email,
'username': username,
'password': password,
'roles': roles.toString()
}))
.then((value) => {
if (value.statusCode == 200)
{
userController.setuserPress(true),
Get.back(),
userController.setuserPress(false)
}
else if (value.statusCode == 422)
{
Get.snackbar("Cannot create $name",
"username or email is already been taken",
duration: const Duration(seconds: 2),
colorText: Colors.black,
backgroundColor: Colors.white),
}
else
{
throw Get.snackbar("failed", "failed to create user $name",
duration: const Duration(seconds: 2),
colorText: Colors.black,
backgroundColor: Colors.white),
}
});
}
Future updateUser(var id, String name, String username, String email,
String password, String roles) async {
final UserController userController = Get.put(UserController());
Uri url = Uri.parse("${BASE_URL}user/$id");
final response = await http
.patch(
url,
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer $TOKEN',
},
body: jsonEncode(<String, String>{
'name': name,
'email': email,
'username': username,
// 'password': password,
'roles': roles
}),
)
.then((value) => {
if (value.statusCode == 200)
{
userController.setuserPress(true),
Get.back(),
userController.setuserPress(false)
}
else
{
throw Get.snackbar("failed", "failed to update user $name",
duration: const Duration(seconds: 2),
colorText: Colors.black,
backgroundColor: Colors.white),
}
});
}
Future deleteUser(var id) async {
final UserController userController = Get.put(UserController());
Uri url = Uri.parse("${BASE_URL}user/$id");
final response = await http.delete(url, headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
'Authorization': 'Bearer $TOKEN',
}).then((value) => {
userController.setuserPress(true),
//usersToJsonFromModel(jsonDecode(value.body)),
userController.setuserDelete(jsonDecode(value.body)),
Get.snackbar(
"Deleted $id", "You've deleted id of ${jsonDecode(value.body)}",
duration: const Duration(seconds: 30),
colorText: Colors.black,
backgroundColor: Colors.white),
});
}
userController page
import 'package:get/get.dart';
import 'package:store_mgt_project/models/api/user_api.dart';
import 'package:store_mgt_project/models/users_model.dart';
class UserController extends GetxController {
final _userPress = false.obs;
get userPress => _userPress.value;
set userPress(value) => _userPress.value = value;
List<User> _user = <User>[].obs;
List<User> _userDisplay = <User>[].obs;
get user => _user;
set user(value) => _user = value;
get userDisplay => _userDisplay;
set userDisplay(value) => _userDisplay = value;
setuserPress(bool value) {
userPress = value;
update();
}
setuser(List<User> value) {
user = value;
update();
}
setuserDelete(User value) {
_user.remove(value);
_user.join();
refresh();
}
setuserDisplay(List<User> value) {
userDisplay = value;
update();
}
}
finally homepage
DataTableSource dataSource(List<User> userList) =>
MyTable(datasList: userList, context: context);
final UserController userController = Get.put(UserController());
#override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
fetchUsers().then((value) => {
setState(() {
userController.setuser(value);
userController.setuserDisplay(userController.user);
})
});
});
}
...
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.02),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Obx(() {
return userController.userPress
? const Center(child: CircularProgressIndicator())
: StreamBuilder(
stream: fetchUsers().asStream(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Container(
height: height * 0.15,
width: width / 1.5,
decoration: BoxDecoration(
color: const Color.fromRGBO(30, 119, 66, 1),
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: width * 0.015),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${snapshot.data.length}",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: height * 0.05),
),
SizedBox(
height: height * 0.008,
),
Text(
"Total Users",
style: TextStyle(
color: Colors.white,
fontSize: height * 0.02,
fontWeight: FontWeight.w600),
)
],
),
),
);
} else {
return CircularProgressIndicator();
}
});
}),
SizedBox(
height: height * 0.02,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(color: Colors.grey)),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: width * 0.01),
child: Obx(() {
return userController.userPress
? const Center(child: CircularProgressIndicator())
: PaginatedDataTable(
sortColumnIndex: sortColumnIndex,
sortAscending: isAscending,
columns: const [
DataColumn(
label: Text("Id"),
),
DataColumn(label: Text("Name")),
DataColumn(
label: Text("Username"),
),
DataColumn(label: Text("Email")),
DataColumn(label: Text("Roles")),
DataColumn(label: Text("Actions")),
],
header: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
SizedBox(
width: width * 0.6,
child: TextField(
decoration:
InputDecoration(hintText: "search"),
onChanged: (text) {
text = text.toLowerCase();
setState(() {
userController.userDisplay =
userController.user
.where((element) {
var _name =
element.name!.toLowerCase();
var _username =
element.username!.toLowerCase();
return _name.contains(text) ||
_username.contains(text);
}).toList();
});
},
),
),
MaterialButton(
onPressed: () {
showMaterialModalBottomSheet(
context: context,
builder: (context) => SizedBox(
height: height * 0.9,
child: BottomSheetWidget(),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight:
Radius.circular(15))));
},
color: const Color.fromRGBO(30, 119, 66, 1),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(10)),
child: Text(
"Add User",
style: TextStyle(
color: Colors.white,
fontSize: width * 0.03),
),
)
],
),
source: dataSource(userController.userDisplay));
})),
)
],
),
));
...
class MyTable extends DataTableSource {
MyTable({required this.datasList, required this.context});
final List<User> datasList;
BuildContext context;
final UserController userController = Get.put(UserController());
Widget Button(String title, Color color, String id, bool delete, String? name,
String? email, String? username, String? role) {
return MaterialButton(
onPressed: () async {
final height = MediaQuery.of(context).size.height;
delete
? await deleteUser(id)
: await showMaterialModalBottomSheet(
context: context,
builder: (context) => SizedBox(
height: height * 0.9,
child: BottomSheetEditWidget(
name: name,
email: email,
username: username,
role: role,
id: id,
),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15))));
userController.setuserPress(false);
},
child: Text(
title,
style: const TextStyle(color: Colors.white),
),
color: color,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
);
}
#override
DataRow? getRow(int index) {
return DataRow.byIndex(index: index, cells: [
DataCell(Text("${index + 1}".toString())),
DataCell(
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 100),
child: Text(
datasList[index].name.toString(),
overflow: TextOverflow.ellipsis,
),
),
),
DataCell(ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 100),
child: Text(
datasList[index].username.toString(),
overflow: TextOverflow.ellipsis,
))),
DataCell(ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 100),
child: Text(
datasList[index].email.toString(),
overflow: TextOverflow.ellipsis,
))),
DataCell(ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 100),
child: Text(
datasList[index].roles![0].name.toString(),
overflow: TextOverflow.ellipsis,
))),
DataCell(Row(
children: [
Button(
"Edit",
Colors.lightBlue,
datasList[index].id.toString(),
false,
datasList[index].name,
datasList[index].email,
datasList[index].username,
datasList[index].roles![0].name),
const SizedBox(
width: 5,
),
Button(
"Delete",
Colors.red,
datasList[index].id.toString(),
true,
datasList[index].name,
datasList[index].email,
datasList[index].username,
datasList[index].roles![0].name),
],
)),
]);
}
#override
bool get isRowCountApproximate => false;
#override
int get rowCount => datasList.length;
#override
int get selectedRowCount => 0;
}
so how can i use crud operation and update ui at the same time?
[update of the new approach]
Obx(() {
return userController.userPress
? const Center(child: CircularProgressIndicator())
: StreamBuilder(
stream: fetchUsers().asStream(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
return Container(
height: height * 0.15,
width: width / 1.5,
decoration: BoxDecoration(
color: const Color.fromRGBO(30, 119, 66, 1),
borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: width * 0.015),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${snapshot.data.length}",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
fontSize: height * 0.05),
),
SizedBox(
height: height * 0.008,
),
Text(
"Total Users",
style: TextStyle(
color: Colors.white,
fontSize: height * 0.02,
fontWeight: FontWeight.w600),
)
],
),
),
);
} else {
return CircularProgressIndicator();
}
});
}),

Answer 1

You can use Obx for this.
For this example I'll use the UserPress variable to explain to you. And you create an appropriate variable to do the action...
In your Ui you only needed put an obx in place that you want update:
Obx(() =>
(userController.userPress)
?
return MaterialButton(
onPressed: () async {
final height = MediaQuery.of(context).size.height;
delete
? await deleteUser(id)
: await showMaterialModalBottomSheet(
context: context,
builder: (context) => SizedBox(
height: height * 0.9,
child: BottomSheetEditWidget(
name: name,
email: email,
username: username,
role: role,
id: id,
),
),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15))));
userController.setuserPress(false);
}
: return MaterialButton(
onPressed: null,
),
),
In this example, if userPress = true the button can be clicked.
If userPress = false, the button don't be clicked.