Flutter模糊效果插件blur_container的使用

Flutter模糊效果插件blur_container的使用

blur_container 是一个适用于 Android 和 iOS 的 Flutter 插件，它提供了一个可以对容器应用模糊效果的 Widget。通过这个插件，你可以在应用程序中轻松实现模糊背景的效果。

示例图片

完整示例 Demo

以下是一个完整的示例代码，展示了如何使用 blur_container 插件来创建一个带有模糊效果的容器。这个示例将一个图像作为背景，并在图像上方添加一个模糊的容器，容器内显示文本 “Hello World”。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Blur Container Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: BlurContainerExample(),
    );
  }
}

class BlurContainerExample extends StatefulWidget {
  const BlurContainerExample({Key? key}) : super(key: key);

  @override
  State<BlurContainerExample> createState() => _BlurContainerExampleState();
}

class _BlurContainerExampleState extends State<BlurContainerExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景图像
          Image.asset(
            "assets/images/image1.jpg",  // 替换为你自己的图片路径
            fit: BoxFit.cover,
            height: double.infinity,
            width: double.infinity,
            alignment: Alignment.center,
          ),
          // 中心位置的模糊容器
          Center(
            child: BlurContainerWidget(
              width: MediaQuery.of(context).size.width * 0.80,  // 容器宽度为屏幕宽度的80%
              height: 150,  // 容器高度为150像素
              borderRadius: BorderRadius.circular(10),  // 圆角半径为10像素
              child: const Center(
                child: Text(
                  'Hello World',  // 显示的文本
                  style: TextStyle(
                    color: Color.fromARGB(255, 255, 255, 255),  // 文本颜色为白色
                    letterSpacing: 4,  // 字母间距为4
                    fontSize: 45,  // 字体大小为45
                    fontWeight: FontWeight.w100,  // 字体粗细为100
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

代码说明

1. 导入必要的包：

   • import 'package:blur_container/blur_container.dart';：导入 blur_container 插件。
   • import 'package:flutter/material.dart';：导入 Flutter 的 Material Design 包。

2. 主应用程序入口：

   • void main() { runApp(MyApp()); }：启动应用程序。

3. MyApp 类：

   • 这是一个无状态的小部件，用于配置应用程序的主题和主页。

4. BlurContainerExample 类：

   • 这是一个有状态的小部件，包含模糊容器的实现。
   • Stack 小部件用于叠加多个子小部件，这里我们叠加了背景图像和模糊容器。
   • Image.asset 用于显示背景图像，fit: BoxFit.cover 确保图像覆盖整个屏幕。
   • BlurContainerWidget 是 blur_container 插件提供的模糊容器小部件，它接受 width、height、borderRadius 和 child 等参数。
   • Center 小部件用于将文本居中显示在模糊容器内。
   • Text 小部件用于显示 “Hello World” 文本，设置了字体样式、颜色、字母间距等属性。

使用步骤

1. 添加依赖： 在 pubspec.yaml 文件中添加 blur_container 依赖：

   dependencies:
     flutter:
       sdk: flutter
     blur_container: ^latest_version  # 替换为最新版本号
   

2. 获取依赖： 在终端中运行 flutter pub get 来安装依赖。

3. 准备资源： 确保你有一个名为 image1.jpg 的图像文件放在 assets/images/ 目录下，并在 pubspec.yaml 中配置资源路径：

   flutter:
     assets:
       - assets/images/image1.jpg