foto_loader #

foto_loader is a Flutter package that provides an easy-to-use widget for loading images from a network with a shimmering placeholder and error handling.

Features #

• Network Image Loading: Efficiently load and cache images from a network URL.
• Shimmer Effect: Display a smooth shimmer animation while the image is loading.
• Error Handling: Show a customizable error icon if the image fails to load.
• Highly Customizable: Configure image dimensions, shimmer effect properties, padding, decoration, and more.

Installation #

Add foto_loader to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  foto_loader: ^1.0.0

Then, run flutter pub get to install the package.

Usage #

Import the Package #

import 'package:foto_loader/foto_loader.dart';

Basic Usage #

FotoLoader(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
)

Customizing the Shimmer Effect #

FotoLoader(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  shimmerWidth: 180,
  shimmerHeight: 180,
  baseColor: Colors.grey[300],
  highlightColor: Colors.grey[100],
)

Adding Padding and Decoration #

FotoLoader(
  'https://example.com/image.jpg',
  width: 200,
  height: 200,
  padding: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 4.0,
      ),
    ],
  ),
)

Error Handling #

If the image fails to load, an error icon will be displayed:

FotoLoader(
  'https://invalid-url.com/image.jpg',
  width: 200,
  height: 200,
)

Parameters #

• url: (String) — The URL of the image to be loaded.
• width: (double?) — The width of the image.
• height: (double?) — The height of the image.
• shimmerWidth: (double?) — The width of the shimmer placeholder.
• shimmerHeight: (double?) — The height of the shimmer placeholder.
• fit: (BoxFit?) — How the image should be inscribed into the box (default is BoxFit.cover).
• radius: (double?) — The border radius of the image.
• decoration: (Decoration?) — Decoration to apply to the container holding the image.
• padding: (EdgeInsetsGeometry?) — Padding around the image.
• baseColor: (Color?) — The base color of the shimmer effect.
• highlightColor: (Color?) — The highlight color of the shimmer effect.

Example #

Below is a full example of how to use the foto_loader package in a Flutter application:

import 'package:flutter/material.dart';
import 'package:foto_loader/foto_loader.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Foto Loader Example'),
        ),
        body: Center(
          child: FotoLoader(
            'https://example.com/image.jpg',
            width: 200,
            height: 200,
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(8.0),
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 4.0,
                ),
              ],
            ),
            baseColor: Colors.grey[300],
            highlightColor: Colors.grey[100],
          ),
        ),
      ),
    );
  }
}

License #

This project is licensed under the MIT License. See the LICENSE file for details.