samedi 18 janvier 2020

Retrive data from laravel API to flutter app

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



from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2RtWVJn
via IFTTT

Aucun commentaire:

Enregistrer un commentaire