Retrive data from laravel API to flutter app
4,282
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';
....
}
`
Author by
La Desmond
Updated on December 17, 2022Comments
-
La Desmond over 1 year
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