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';
      ....
      }

`

Share:
4,282
La Desmond
Author by

La Desmond

Updated on December 17, 2022

Comments

  • La Desmond
    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