image_blur_web 0.0.1

image_blur_web: ^0.0.1 copied to clipboard

ImageBlurWeb #

A Flutter widget that displays an image with a blur effect on the thumbnail image and transitions to the full-resolution image with a fade animation. This widget is perfect for improving the user experience when loading images, especially on the web.

Features #

• Display a blurred thumbnail while the full image is being loaded.
• Smooth fade transition from the thumbnail to the full-resolution image.
• Fully customizable with support for:
  • Image alignment, fitting, and repeating.
  • Customizable border radius and box shadows.
  • Custom loading indicators and error widgets.
  • Custom hover effects for web platforms.
• Supports semantic labels for accessibility.
• Optional background color and tap gestures.
• High performance and flexibility, ideal for web and mobile platforms.

https://github.com/user-attachments/assets/ea201dfb-d788-4263-9e24-9302d85430d4

Getting started #

• Installation Add the dependency to your pubspec.yaml:

dependencies:
  image_blur_web: latest_version

Run the following command to fetch the package:

flutter pub get

Import the package into your Dart file:

import 'package:image_blur_web/image_blur_web.dart';

Usage #

• Here’s an example of how to use the ImageBlurWeb widget:

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

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image Blur Web Example')),
      body: Center(
        child: ImageBlurWeb(
          placeholder: AssetImage('assets/placeholder.jpg'),
          thumbnail: AssetImage('assets/thumbnail.jpg'),
          image: NetworkImage('https://example.com/full-image.jpg'),
          width: 300,
          height: 200,
          blur: 15, // Blur intensity for the thumbnail
          fadeDuration: Duration(seconds: 1), // Smooth fade duration
          borderRadius: BorderRadius.circular(12), // Rounded corners
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 10,
              offset: Offset(2, 4),
            ),
          ],
          backgroundColor: Colors.grey[200], // Background color
          onTap: () {
            print('Image tapped!');
          },
          enableHover: true, // Enable hover effects for web
        ),
      ),
    );
  }
}

Parameters #

Notes #

Hover effects are only visible on platforms that support pointer devices (e.g., web or desktop). If errorWidget is not provided, no widget will be displayed when an error occurs while loading the image.

Example #

• Full Example Here’s a full example with all parameters:

ImageBlurWeb(
  placeholder: AssetImage('assets/placeholder.jpg'),
  thumbnail: AssetImage('assets/thumbnail.jpg'),
  image: NetworkImage('https://example.com/full-image.jpg'),
  width: 400,
  height: 250,
  fit: BoxFit.cover,
  blur: 10,
  fadeDuration: Duration(milliseconds: 1200),
  alignment: Alignment.topCenter,
  repeat: ImageRepeat.noRepeat,
  matchTextDirection: false,
  excludeFromSemantics: true,
  imageSemanticLabel: "Example Image",
  errorWidget: (context, error) => Icon(Icons.error, size: 50),
  loadingBuilder: (context, child, loadingProgress) {
    if (loadingProgress == null) return child;
    return Center(child: CircularProgressIndicator());
  },
  borderRadius: BorderRadius.circular(16),
  boxShadow: [
    BoxShadow(
      color: Colors.black45,
      blurRadius: 8,
      offset: Offset(2, 4),
    ),
  ],
  backgroundColor: Colors.grey.withOpacity(0.1),
  onTap: () {
    print('Image clicked!');
  },
  enableHover: true,
);