Flutter图片模糊处理插件 image_blur 的使用

image_blur 是一个用于在Flutter应用中为图片添加模糊效果的插件。该插件支持圆形和矩形形状的模糊效果，并且可以与本地和在线图片一起使用。

初始化缓存配置

在使用 image_blur 插件之前，需要先初始化缓存配置：

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

主要功能

以下是插件的主要功能示例：

矩形模糊预览

ImageBlur.imageHashPreview(
  imagePath: imageUrls[index],
  width: size.width,
  height: size.height,
);

简单模糊效果

ImageBlur(
  imageUrl: listimage[index],
);

圆形模糊预览

ImageBlur.imageHashPreviewCircular(
  size: 340,
  imagePath: "https://example.com/image.jpg",
)

圆形模糊效果

ImageBlur.imageCircularBlur(
  size: 340,
  imageNetwork: "https://example.com/image.jpg",
),

获取调色板颜色

ImageBlur.imageBlurGetPalletteColor(
  imageUrl: listimage[index],
)

开始使用

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  image_blur: ^1.0.82

然后，在 Dart 文件中导入包：

import 'package:image_blur/image_blur.dart';

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 image_blur 插件：

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});

  @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;
    List<String> imageUrls = [
      "https://img.freepik.com/free-photo/pier-lake-hallstatt-austria_181624-44201.jpg",
      // 添加更多图片URL
    ];

    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,
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

额外信息

如果您有任何问题、疑问或建议，请随时通过邮件联系我们：swan.dev1993@gmail.com。我们欢迎您的反馈，并将尽力解决任何问题或提供帮助。

有关此插件的更多信息，您可以访问我们的 GitHub 仓库，在那里您可以找到额外的资源、参与插件的开发并提交问题或错误报告。感谢您的贡献和反馈，我们将努力使这个插件对用户尽可能有用。

感谢您使用我们的插件，期待您的反馈！