Retrive data from laravel API to flutter app - laravel-5

Question

I have created a connection between my flutter app and laravel api, but i don't know why i can't get some data (image) from the back-end to be display on the app. I'm running the laravel api on a local server and flutter app on an android emulator.
Here's my code...
From Laravel api - CategoriesResource.php
<?php
namespace App\Http\Resources;
use Illuminate\Http\Resources\Json\JsonResource;
class CategoriesResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* #param \Illuminate\Http\Request $request
* #return array
*/
public function toArray($request)
{
return [
'categoryName' => $this->categoryName,
'category_image' => 'http://127.0.0.1:8000/api/v1/public/category_images/'.$this->category_image
];
}
}
My flutter code ...
import 'package:flutter/material.dart';
import 'package:restaurant_app/models/category.dart';
class HomeCategoriesGet extends StatefulWidget {
final List<Category> categoryList;
final int categoryId;
final String categoryName;
final String categoryImage;
#override
HomeCategoriesGet(
{this.categoryList,
this.categoryId,
this.categoryName,
this.categoryImage});
_HomeCategoriesGetState createState() => _HomeCategoriesGetState();
}
class _HomeCategoriesGetState extends State<HomeCategoriesGet> {
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: this.widget.categoryList.length,
itemBuilder: (context, index) {
return Card(
child: Column(
children: <Widget>[
Image.network(
// This is where i am trying to get the image
this.widget.categoryList[index].catImage,
width: 190.0,
height: 160.0,
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(this.widget.categoryList[index].name),
),
],
),
);
},
);
}
}
Error
════════════════════════════ Exception caught by image resource service ════════════════════════════
The following SocketException was thrown resolving an image codec:
OS Error: Connection refused, errno = 111, address = 127.0.0.1, port = 48849
When the exception was thrown, this was the stack
#0 NetworkImage._loadAsync
package:flutter/…/painting/_network_image_io.dart:84
<asynchronous suspension>
#1 NetworkImage.load
package:flutter/…/painting/_network_image_io.dart:48
#2 ImageProvider.resolve.<anonymous closure>.<anonymous closure>.<anonymous closure>
package:flutter/…/painting/image_provider.dart:316
#3 ImageCache.putIfAbsent
package:flutter/…/painting/image_cache.dart:160
...
Image provider: NetworkImage("http://127.0.0.1:8000/api/v1/public/category_images/starters_1578944124.jpeg", scale: 1.0)
Image key: NetworkImage("http://127.0.0.1:8000/api/v1/public/category_images/starters_1578944124.jpeg", scale: 1.0)
Please here's my Repository.dart file
import 'package:http/http.dart' as http;
// Create connection with Back-end (laravel)
class Repository {
// connection with emulator
String _baseUrl = 'http://10.0.2.2:8000/api';
httpGet(String api) async {
return await http.get(_baseUrl + "/" + api);
}
httpGetById(String api, id) async {
return await http.get(_baseUrl + "/" + api + "/" + id.toString());
}
}
Please help me solve this. Thanks

Answer 1

To solve this:
first run php artisan serve --host 0.0.0.0
Then get your local IP by typing the following command on the terminal :
for Windows : ipcofing
Linux or Mac : ifconfig
In my case it's: IPv4 Address . . . . . . . . . . : 192.168.1.122
Finally:
`
class Repository {
// connection with emulator
String _baseUrl = 'http://192.168.1.122:8000/api';
....
}
`

Answer 2

remove the /api in the baseUrl variable