Black Screen after deleting the record - laravel

Question

I am using Laravel as the Backend API and Flutter for the Client. Category Add and Category Update features are working without any issue. However, when i delete a category, the category gets deleted from the database but returns the user to a black page. I am finding difficult to find the error.
lib\screens\categories.dart
import 'package:flutter/material.dart';
import 'package:demo_app/models/category.dart';
import 'package:demo_app/widgets/category_edit.dart';
import 'package:demo_app/providers/category_provider.dart';
import 'package:provider/provider.dart';
// import '../widgets/category_add.dart';
import 'package:demo_app/widgets/category_add.dart';
// import 'package:http/http.dart' as http;
class Categories extends StatefulWidget {
const Categories({super.key});
#override
State<Categories> createState() => _CategoriesState();
}
class _CategoriesState extends State<Categories> {
#override
Widget build(BuildContext context) {
final provider = Provider.of<CategoryProvider>(context);
List<Category> categories = provider.categories;
return Scaffold(
appBar: AppBar(
title: const Text('Categories'),
),
body: ListView.builder(
itemCount: categories.length,
itemBuilder: (context, index) {
Category category = categories[index];
return ListTile(
title: Text(category.name),
trailing:
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: const Icon(Icons.edit),
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return CategoryEdit(category, provider.updateCategory);
});
},
),
IconButton(
icon: const Icon(Icons.delete),
onPressed: () => showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('confirmation'),
content: const Text('Are you sure you want to delete?'),
actions: [
TextButton(
onPressed: () => deleteCategory(provider.deleteCategory, category),
child: const Text('Confirm')
),
TextButton(
onPressed: () => Navigator.pop(context),
child: const Text('Cancel')
),
]
);
}
),
),
],
),
);
},
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (BuildContext context) {
return CategoryAdd(provider.addCategory);
});
},
child: const Icon(Icons.add)
),
);
}
Future deleteCategory(Function callback, Category category) async{
await callback(category);
if (!mounted) return;
Navigator.pop(context);
}
}
lib\providers\category_provider.dart
import 'package:demo_app/models/category.dart';
import 'package:demo_app/providers/auth_provider.dart';
import 'package:demo_app/services/api.dart';
import 'package:flutter/material.dart';
class CategoryProvider extends ChangeNotifier{
List<Category> categories = [];
late ApiService apiService;
late AuthProvider authProvider;
CategoryProvider(this.authProvider){
apiService = ApiService(authProvider.token);
init();
}
Future init() async{
categories = await apiService.fetchCategories();
notifyListeners();
}
Future<void> addCategory(String name) async{
try{
Category addedCategory = await apiService.addCategory(name);
categories.add(addedCategory);
notifyListeners();
} catch(e){
await authProvider.logOut();
// ignore: avoid_print
// print(e);
}
}
Future<void> updateCategory(Category category) async{
try{
Category updatedCategory = await apiService.updateCategory(category);
int index = categories.indexOf(category);
categories[index] = updatedCategory;
notifyListeners();
} catch(e){
await authProvider.logOut();
}
}
Future<void> deleteCategory(Category category) async{
try{
await apiService.deleteCategory(category.id);
categories.remove(category);
notifyListeners();
} catch(e){
await authProvider.logOut();
}
}
}
lib\services\api.dart
// import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:demo_app/models/category.dart';
import 'package:demo_app/models/transaction.dart';
// import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class ApiService{
late String token;
ApiService(this.token);
final String baseUrl = 'http://flutter-api.test/api/';
Future<List<Category>> fetchCategories() async {
http.Response response =
await http.get(Uri.parse('${baseUrl}categories'),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
List categories = jsonDecode(response.body);
return categories.map((category) => Category.fromJson(category)).toList();
}
Future <Category> addCategory(String name) async {
String uri = '${baseUrl}categories';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({'name': name}));
if(response.statusCode != 201){
throw Exception('Error happened on create');
}
return Category.fromJson(jsonDecode(response.body));
}
Future <Category> updateCategory(Category category) async {
// String uri = '${baseUrl}categories/$category.id';
String uri = '${baseUrl}categories/${category.id}';
http.Response response = await http.put(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({'name': category.name}));
if(response.statusCode != 200){
throw Exception('Error happened on update');
}
return Category.fromJson(jsonDecode(response.body));
}
Future<void> deleteCategory(id) async {
String uri = '${baseUrl}categories/$id';
http.Response response = await http.delete(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
if(response.statusCode != 204){
// // ignore: avoid_print
// ignore: avoid_print
print(response.statusCode);
// ignore: avoid_print
print(response.body.toString());
throw Exception('Error happened on delete');
}
}
Future<List<Transaction>> fetchTransactions() async {
http.Response response = await http.get(
Uri.parse('${baseUrl}transactions'),
headers: {
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
List transactions = jsonDecode(response.body);
return transactions.map((transaction) => Transaction.fromJson(transaction)).toList();
}
Future<Transaction> addTransaction(String amount, String category, String description, String date) async {
String uri = '${baseUrl}transactions';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({
'amount': amount,
'category_id': category,
'description': description,
'transaction_date': date
}));
if (response.statusCode != 201) {
throw Exception('Error happened on create');
}
return Transaction.fromJson(jsonDecode(response.body));
}
Future<Transaction> updateTransaction(Transaction transaction) async {
String uri = '${baseUrl}transactions/${transaction.id}';
http.Response response = await http.put(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({
'amount': transaction.amount,
'category_id': transaction.categoryId,
'description': transaction.description,
'transaction_date': transaction.transactionDate
}));
if (response.statusCode != 200) {
throw Exception('Error happened on update');
}
return Transaction.fromJson(jsonDecode(response.body));
}
Future<void> deleteTransaction(id) async {
String uri = '${baseUrl}transactions/$id';
http.Response response = await http.delete(
Uri.parse(uri),
headers: {
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
if (response.statusCode != 204) {
throw Exception('Error happened on delete');
}
}
Future<String> register(String name, String email, String password, String passwordConfirm, String deviceName) async {
// ignore: prefer_interpolation_to_compose_strings
String uri = baseUrl + 'auth/register';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
},
body: jsonEncode({
'name': name,
'email': email,
'password': password,
'password_confirmation': passwordConfirm,
'device_name': deviceName
})
);
if(response.statusCode == 422){
Map<String, dynamic> body = jsonDecode(response.body);
Map<String, dynamic> errors = body['errors'];
String errorMessage = '';
errors.forEach((key, value){
value.forEach((element){
errorMessage += element + '\n';
});
});
throw Exception(errorMessage);
}
// if(response.statusCode == 422){
// throw Exception('Error happened on registration');
// }
return response.body;
}
Future<String> login(String email, String password, String deviceName) async {
// ignore: prefer_interpolation_to_compose_strings
String uri = baseUrl + 'auth/login';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
},
body: jsonEncode({
'email': email,
'password': password,
'device_name': deviceName
})
);
if(response.statusCode == 422){
Map<String, dynamic> body = jsonDecode(response.body);
Map<String, dynamic> errors = body['errors'];
String errorMessage = '';
errors.forEach((key, value){
value.forEach((element){
errorMessage += element + '\n';
});
});
throw Exception(errorMessage);
}
// if(response.statusCode == 422){
// throw Exception('Error happened on registration');
// }
return response.body;
}
}
lib\providers\auth_provider.dart
import 'package:demo_app/services/api.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
class AuthProvider extends ChangeNotifier{
bool isAuthenticated = false;
late String token;
late ApiService apiService;
AuthProvider() {
init();
}
Future<void> init() async {
token = await getToken();
if (token.isNotEmpty) {
isAuthenticated = true;
}
apiService = ApiService(token);
notifyListeners();
}
Future<void> register(String name, String email, String password, String passwordConfirm, String deviceName) async{
token = await apiService.register(name, email, password, passwordConfirm, deviceName);
isAuthenticated = true;
setToken();
notifyListeners();
}
Future<void> logIn(String email, String password, String deviceName) async{
token = await apiService.login(email, password, deviceName);
isAuthenticated = true;
setToken();
notifyListeners();
}
Future<void> logOut() async{
token = '';
isAuthenticated = false;
setToken();
notifyListeners();
}
Future<void> setToken() async{
final pref = await SharedPreferences.getInstance();
pref.setString('token', token);
}
Future<String> getToken() async {
final pref = await SharedPreferences.getInstance();
final token = pref.getString("token") ?? "";
return token;
}
}
lib\main.dart
import 'package:demo_app/providers/auth_provider.dart';
import 'package:demo_app/providers/transaction_provider.dart';
import 'package:demo_app/screens/home.dart';
import 'package:demo_app/screens/login.dart';
import 'package:demo_app/screens/register.dart';
import 'package:demo_app/screens/categories.dart';
// import 'package:demo_app/screens/transactions.dart';
import 'package:flutter/material.dart';
import 'package:demo_app/providers/category_provider.dart';
import 'package:provider/provider.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget{
const MyApp({super.key});
#override
Widget build(BuildContext context){
return ChangeNotifierProvider(
create: (context) => AuthProvider(),
child: Consumer<AuthProvider>(builder: (context, authProvider, child){
return MultiProvider(
providers: [
ChangeNotifierProvider<CategoryProvider>(
create: (context) => CategoryProvider(authProvider)),
ChangeNotifierProvider<TransactionProvider>(
create: (context) => TransactionProvider(authProvider)),
],
child: MaterialApp(
title:'Welcome to Flutter',
routes: {
'/': (context) {
final authProvider = Provider.of<AuthProvider>(context);
if(authProvider.isAuthenticated){
return const Home();
}else{
return const Login();
}
},
'/login': (context) => const Login(),
'/register': (context) => const Register(),
'/categories': (context) => const Categories(),
}));
}
)
);
}
}

Answer 1

lib\screens\categories.dart
Future deleteCategory(Function callback, Category category, BuildContext context) async{
await callback(category);
if (!mounted) return;
Navigator.pop(context);
}
Solved the issue
I changed the headers in the lib\services\api.dart too
lib\services\api.dart
looks like this
// import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:demo_app/models/category.dart';
import 'package:demo_app/models/transaction.dart';
// import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
class ApiService{
late String token;
ApiService(this.token);
final String baseUrl = 'http://flutter-api.test/api/';
Future<List<Category>> fetchCategories() async {
http.Response response =
await http.get(Uri.parse('${baseUrl}categories'),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
List categories = jsonDecode(response.body);
return categories.map((category) => Category.fromJson(category)).toList();
}
Future <Category> addCategory(String name) async {
String uri = '${baseUrl}categories';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({'name': name}));
if(response.statusCode != 201){
throw Exception('Error happened on create');
}
return Category.fromJson(jsonDecode(response.body));
}
Future <Category> updateCategory(Category category) async {
String uri = '${baseUrl}categories/${category.id}';
http.Response response = await http.put(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({'name': category.name}));
if(response.statusCode != 200){
throw Exception('Error happened on update');
}
return Category.fromJson(jsonDecode(response.body));
}
Future<void> deleteCategory(id) async {
String uri = '${baseUrl}categories/$id';
http.Response response = await http.delete(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
if(response.statusCode != 204){
// // ignore: avoid_print
// ignore: avoid_print
print(response.statusCode);
// ignore: avoid_print
print(response.body.toString());
throw Exception('Error happened on delete');
}
}
Future<List<Transaction>> fetchTransactions() async {
http.Response response = await http.get(
Uri.parse('${baseUrl}transactions'),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
List transactions = jsonDecode(response.body);
return transactions.map((transaction) => Transaction.fromJson(transaction)).toList();
}
Future<Transaction> addTransaction(String amount, String category, String description, String date) async {
String uri = '${baseUrl}transactions';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({
'amount': amount,
'category_id': category,
'description': description,
'transaction_date': date
}));
if (response.statusCode != 201) {
throw Exception('Error happened on create');
}
return Transaction.fromJson(jsonDecode(response.body));
}
Future<Transaction> updateTransaction(Transaction transaction) async {
String uri = '${baseUrl}transactions/${transaction.id}';
http.Response response = await http.put(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
body: jsonEncode({
'amount': transaction.amount,
'category_id': transaction.categoryId,
'description': transaction.description,
'transaction_date': transaction.transactionDate
}));
if (response.statusCode != 200) {
throw Exception('Error happened on update');
}
return Transaction.fromJson(jsonDecode(response.body));
}
Future<void> deleteTransaction(id) async {
String uri = '${baseUrl}transactions/$id';
http.Response response = await http.delete(
Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
HttpHeaders.authorizationHeader: 'Bearer $token'
},
);
if (response.statusCode != 204) {
throw Exception('Error happened on delete');
}
}
Future<String> register(String name, String email, String password, String passwordConfirm, String deviceName) async {
// ignore: prefer_interpolation_to_compose_strings
String uri = baseUrl + 'auth/register';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
},
body: jsonEncode({
'name': name,
'email': email,
'password': password,
'password_confirmation': passwordConfirm,
'device_name': deviceName
})
);
if(response.statusCode == 422){
Map<String, dynamic> body = jsonDecode(response.body);
Map<String, dynamic> errors = body['errors'];
String errorMessage = '';
errors.forEach((key, value){
value.forEach((element){
errorMessage += element + '\n';
});
});
throw Exception(errorMessage);
}
// if(response.statusCode == 422){
// throw Exception('Error happened on registration');
// }
return response.body;
}
Future<String> login(String email, String password, String deviceName) async {
// ignore: prefer_interpolation_to_compose_strings
String uri = baseUrl + 'auth/login';
http.Response response = await http.post(Uri.parse(uri),
headers: {
HttpHeaders.contentTypeHeader: 'application/json',
HttpHeaders.acceptHeader: 'application/json',
},
body: jsonEncode({
'email': email,
'password': password,
'device_name': deviceName
})
);
if(response.statusCode == 422){
Map<String, dynamic> body = jsonDecode(response.body);
Map<String, dynamic> errors = body['errors'];
String errorMessage = '';
errors.forEach((key, value){
value.forEach((element){
errorMessage += element + '\n';
});
});
throw Exception(errorMessage);
}
// if(response.statusCode == 422){
// throw Exception('Error happened on registration');
// }
return response.body;
}
}