Cant fetch images from laravel to flutter using http package

To fetch images from Laravel to Flutter using the http package, follow the steps below:

First, make sure that your Laravel server is serving the images with the correct MIME type. Laravel by default serves images with the image/jpeg MIME type for JPG images, image/png for PNG images, and image/gif for GIF images. You can check this by visiting an image URL directly in your browser. If the image does not load, check the Laravel documentation on serving images for proper configuration.
In your Flutter project, add the http package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

Run flutter pub get to install the package.
Create a function to fetch the image using the http package:

import 'dart:convert';
import 'dart:io';

Future<File> downloadImage(String url) async {
  final response = await http.get(Uri.parse(url));
  if (response.statusCode == 200) {
    final bytes = response.bodyBytes;
    final tempDir = Directory.systemTemp;
    final file = File('${tempDir.path}/image.jpg')..writeAsBytesSync(bytes);
    return file;
  } else {
    throw Exception('Failed to load image');
  }
}

Use the downloadImage function to download the image and display it in your Flutter app:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Fetcher',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Image Fetcher'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<File> _imageFile;

  @override
  void initState() {
    super.initState();
    _imageFile = downloadImage('http://your-laravel-image-url.com/image.jpg');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            SizedBox(height: 20),
            Text('Loading image...'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final file = await _imageFile;
                final image = FileImage(file);
                showModalBottomSheet(
                  context: context,
                  builder: (BuildContext context) {
                    return ImageSlideshow(
                      images: [ImageProvider.file(file)],
                      paging: false,
                    );
                  },
                );
              },
              child: Text('View Image'),
            ),
          ],
        ),
      ),
    );
  }
}

Replace 'http://your-laravel-image-url.com/image.jpg' with the URL of the image you want to fetch from your Laravel server. The downloadImage function downloads the image and saves it as a temporary file in the system temp directory. The MyHomePage widget displays a progress indicator and a button to view the image when it has finished loading. When the button is pressed, a modal bottom sheet is displayed with the image using the ImageSlideshow package.

Make sure that the Laravel image URL is accessible from the Flutter app, and that there are no CORS issues preventing the image from being loaded. If you encounter any issues, check the Laravel and Flutter documentation for further information.