image_blur

Description:

image blur

This Flutter package provides the ability to add shimmer and blur effects to your images. You can apply these effects in circular and rectangular shapes, and use them with both local and online images.

Initialize the cache configuration #
void main() async {
await ImageBlur.init();
runApp(const MyApp());
}
copied to clipboard
Features #
ImageBlur.imageHashPreview(
imagePath: imageUrls[index],
width: size.width,
height: size.height,
);
copied to clipboard

ImageBlur(
imageUrl: listimage[index],
);
copied to clipboard

ImageBlur.imageHashPreviewCircular(
size: 340,
imagePath:
"https://img.freepik.com/free-vector/abstract-speaker-background_1048-2038.jpg?w=740&t=st=1708002577~exp=1708003177~hmac=75e6d3504cc3a4c077d56bcb181983b2ff88d51d5457a7dd10c039c3fec813d2",
)
copied to clipboard

ImageBlur.imageCircularBlur(
size: 340,
imageNetwork:
"https://img.freepik.com/free-photo/nature-tranquil-beauty-reflected-calm-water-generative-ai_188544-12798.jpg?size=626&ext=jpg&ga=GA1.1.8332681.1703272078&semt=ais",
),
copied to clipboard

ImageBlur.blurIsWeb(
placeholder: "assets/placeholder.jpg",
fit: BoxFit.cover,
thumbnail: url,
image: url,
width: size.width * 0.3,
height: size.height * 0.4,
),
copied to clipboard

new

Use only one image
ImageBlur.imageBlurGetPalletteColor(
imageUrl: listimage[index],
)
copied to clipboard

new

Use only one image
ImageBlur.imageHashGetPaletteColor(
imageUrl: listimage[index],
onPaletteReceived: (paletteGeneratorFuture) async {
// Create a timeout future with a specified duration (e.g., 5 seconds)
Future<PaletteGenerator?> createTimeoutFuture(
Duration duration) {
final completer = Completer<PaletteGenerator?>();
Future.delayed(
duration, () => completer.complete(null));
return completer.future;
}

final timeoutFuture =
createTimeoutFuture(const Duration(seconds: 5));
// Use Future.wait to wait for either paletteGeneratorFuture to complete
// or the timeoutFuture to elapse
final results = await Future.wait<PaletteGenerator?>(
[
paletteGeneratorFuture
as Future<PaletteGenerator?>,
timeoutFuture,
],
eagerError: true,
);

if (results[0] != null &&
results[0] is PaletteGenerator) {
// paletteGeneratorFuture completed first, process the palette
final paletteGenerator =
results[0] as PaletteGenerator;
if (paletteGenerator.lightVibrantColor != null) {
final dominantColor =
paletteGenerator.lightVibrantColor!.color;
setState(() {
_draggableWidgetController.backgroundColor =
dominantColor;
});
} else {
debugPrint(
"Palette generation failed or lightVibrantColor is null");
}
} else {
// Timeout occurred or paletteGeneratorFuture is null, handle loading failure
_draggableWidgetController.loding();
}
return null;
},
duration: const Duration(seconds: 1),
width: size.width,
height: size.height,
fit: Platform.isWindows &&
Platform.isMacOS &&
Platform.isLinux &&
kIsWeb
? BoxFit.fitHeight
: BoxFit.cover,
imagePath: widget.imagePath,
errorBuilder: (context, error, stackTrace) {
_draggableWidgetController.loding();
return Icon(
Icons.image_not_supported_outlined,
color: Theme.of(context).primaryColor,
);
},
)
copied to clipboard

Getting started #
dependencies:
image_blur: ^1.0.82
copied to clipboard
How to use #
import 'package:image_blur/image_blur.dart';

copied to clipboard
Complete example #

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

void main() async{
await ImageBlur.init(removeCacheTime: 10);
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Demo App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: const Color.fromRGBO(55, 151, 239, 1),
primary: const Color.fromRGBO(55, 151, 239, 1),
),
useMaterial3: true,
),
home: const Search(),
);
}
}

class Search extends StatelessWidget {
const Search({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
body: SizedBox(
width: size.width,
height: size.height,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: size.width * 0.95,
child: SearchBar(
hintText: 'Search',
shape: MaterialStatePropertyAll(BeveledRectangleBorder(
borderRadius: BorderRadius.circular(5.0))),
hintStyle: const MaterialStatePropertyAll(
TextStyle(color: Colors.grey)),
elevation: MaterialStateProperty.all(1.0),
leading: const Padding(
padding: EdgeInsets.only(left: 10.0),
child: Icon(
Icons.search,
color: Colors.grey,
),
),
),
),
],
),
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 5.0, horizontal: 5.0),
child: GridView.builder(
physics: const BouncingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
crossAxisCount: 3,),
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: BorderRadius.circular(12.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12.0),
),
child: ImageBlur(
imageUrls: imageUrls[index],
width: size.width,
height: size.height,
),
),
);
},
)
),
),
],
),
),
),
);
}
}

copied to clipboard
Additional information #
If you have any issues, questions, or suggestions related to this package, please feel free to contact us at [email protected]. We welcome your feedback and will do our best to address any problems or provide assistance.
For more information about this package, you can also visit our GitHub repository where you can find additional resources, contribute to the package's development, and file issues or bug reports. We appreciate your contributions and feedback, and we aim to make this package as useful as possible for our users.
Thank you for using our package, and we look forward to hearing from you!