Flutter图像模糊处理插件blurry的使用

发布于 1周前 作者 bupafengyu 来自 Flutter

Flutter图像模糊处理插件blurry的使用

简介

blurry 是一个用于在Flutter中创建模糊对话框的插件。它提供了多种内置主题和自定义选项，可以满足不同的需求。

Blurry Dialog Example

特性

  • 显示简单的模糊对话框弹出窗口
  • 提供内置主题
  • 可以创建自定义对话框
  • 按钮点击处理回调
  • 自定义文本
  • 自定义屏障颜色和行为
  • 自定义弹出窗口大小
  • 支持从左到右、从右到左、居中布局
  • 支持阿拉伯语
  • 输入弹出窗口选项及键盘类型
  • 自定义输入样式和输入文本样式
  • 密码弹出窗口类型带查看密码的眼图标
  • 单项选择器类型

开始使用

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

dependencies:
  blurry: ^1.4.2

然后运行 flutter pub get 来安装依赖。

使用示例

参数说明

以下是一些常用的参数：

  • title: 对话框标题，必填
  • description: 对话框描述文本，必填
  • cancelButtonText: 取消按钮文本，默认为 ‘Cancel’
  • confirmButtonText: 确认按钮文本
  • themeColor: 对话框主题颜色
  • onConfirmButtonPressed: 确认按钮点击回调函数，必填
  • onCancelButtonPressed: 取消按钮点击回调函数
  • icon: 对话框图标
  • popupHeight: 弹出窗口高度
  • displayCancelButton: 是否显示取消按钮，默认为 true
  • dismissable: 是否可关闭，默认为 true
  • barrierColor: 屏障颜色

示例代码

信息风格模糊对话框

Blurry.info(
    title: 'Info blurry',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididuntut labore et dolore magna aliqua.',
    confirmButtonText: 'Confirm',
    titleTextStyle: const TextStyle(fontFamily: 'Zen'),
    popupHeight: 300,
    buttonTextStyle: const TextStyle(decoration: TextDecoration.underline, fontFamily: 'Zen'),
    descriptionTextStyle: const TextStyle(fontFamily: 'Zen'),
    onConfirmButtonPressed: () {},
).show(context);

成功风格模糊对话框

Blurry.success(
    title: 'Success blurry',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {},
    barrierColor: Colors.white.withOpacity(0.7),
    dismissable: false,
).show(context);

错误风格模糊对话框

Blurry.error(
    title: 'Error blurry',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {
        print('hello world');
    },
).show(context);

警告风格模糊对话框

Blurry.warning(
    title: 'Warning blurry',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {
        print('hello world');
    },
).show(context);

自定义风格模糊对话框

Blurry(
    icon: Icons.verified_user,
    themeColor: Colors.purple,
    title: 'Custom blurry',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {},
).show(context);

阿拉伯语模糊对话框（RTL布局）

Blurry.info(
    layoutType: LAYOUT_TYPE.rtl,
    title: 'المعلومات ضبابية',
    description: 'اربك تكست هو اول موقع يسمح لزواره الكرام بتحويل الكتابة العربي الى كتابة مفهومة',
    confirmButtonText: 'يتأكد',
    cancelButtonText: 'يلغي',
    titleTextStyle: const TextStyle(fontFamily: 'Zen'),
    popupHeight: 300,
    buttonTextStyle: const TextStyle(decoration: TextDecoration.underline, fontFamily: 'Zen'),
    descriptionTextStyle: const TextStyle(fontFamily: 'Zen'),
    onConfirmButtonPressed: () {},
).show(context);

输入类型示例

Blurry.input(
    title: 'Blurry Input',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {},
    inputLabel: 'Email',
    themeColor: Colors.red,
    icon: Icons.reduce_capacity_outlined,
    inputTextController: TextEditingController(),
).show(context);

数字输入示例

Blurry.input(
    title: 'Blurry Code Input',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {},
    inputLabel: 'Code',
    type: BLURRY_TYPE.info,
    inputTextController: TextEditingController(),
    textInputType: TextInputType.number,
).show(context);

密码输入示例

Blurry.password(
    title: 'Blurry Code Input',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    confirmButtonText: 'Confirm',
    onConfirmButtonPressed: () {},
    inputLabel: 'Password',
    type: BLURRY_TYPE.info,
    inputTextController: TextEditingController(),
).show(context);

单项选择器示例

Blurry.singleChoiceSelector(
    items: List.generate(
        5,
        (index) => Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            child: ListTile(
                title: Text('Name: User $index'),
                subtitle: Text('Age : ${index * 20}'),
            ),
        ),
    ),
    title: 'Blurry Single selector',
    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
    themeColor: Colors.pink,
    icon: Icons.account_circle_outlined,
    popupHeight: 300,
).show(context);

完整示例 Demo

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const BlurryDemo(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Blurry package demo'),
      ),
      body: Container(
        color: Colors.white,
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 200,
              child: ElevatedButton(
                onPressed: () {
                  Blurry.info(
                    layoutType: LayoutType.rtl,
                    title: 'المعلومات ضبابية',
                    description: 'اربك تكست هو اول موقع يسمح لزواره الكرام بتحويل الكتابة العربي الى كتابة مفهومة',
                    confirmButtonText: 'يتأكد',
                    cancelButtonText: 'يلغي',
                    titleTextStyle: const TextStyle(fontFamily: 'Zen'),
                    popupHeight: 300,
                    buttonTextStyle: const TextStyle(decoration: TextDecoration.underline, fontFamily: 'Zen'),
                    descriptionTextStyle: const TextStyle(fontFamily: 'Zen'),
                    onConfirmButtonPressed: () {},
                  ).show(context);
                },
                child: const Text('Info blurry dialog'),
              ),
            ),
            const SizedBox(height: 10),
            // 其他按钮和示例省略...
          ],
        ),
      ),
    );
  }
}

以上是 blurry 插件的基本用法和完整示例。希望这些示例能帮助您更好地理解和使用这个插件。


更多关于Flutter图像模糊处理插件blurry的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图像模糊处理插件blurry的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用blurry插件来对图像进行模糊处理的示例代码。blurry是一个轻量级的Flutter插件，用于对图像进行模糊处理。

首先，确保你已经在pubspec.yaml文件中添加了blurry依赖：

dependencies:
  flutter:
    sdk: flutter
  blurry: ^3.0.0  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用Blurry类来模糊处理图像。以下是一个完整的示例，展示了如何在Flutter中加载图像并应用模糊效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Blurry Image Example'),
        ),
        body: Center(
          child: BlurryImageExample(),
        ),
      ),
    );
  }
}

class BlurryImageExample extends StatefulWidget {
  @override
  _BlurryImageExampleState createState() => _BlurryImageExampleState();
}

class _BlurryImageExampleState extends State<BlurryImageExample> {
  final GlobalKey _imageKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.network(
          'https://example.com/your-image.jpg',  // 替换为你的图像URL
          key: _imageKey,
          width: 300,
          height: 300,
          fit: BoxFit.cover,
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () async {
            try {
              // 模糊处理图像
              await Blurry.blur(
                context: context,
                renderTarget: _imageKey.currentContext!.findRenderObject()!,
                sigmaX: 10.0,  // X轴方向的模糊程度
                sigmaY: 10.0,  // Y轴方向的模糊程度
              );
            } catch (e) {
              print('Blurry error: $e');
            }
          },
          child: Text('Blur Image'),
        ),
      ],
    );
  }
}

代码解释

  1. 依赖引入：

    • 在pubspec.yaml文件中添加blurry依赖。

  2. 构建应用：

    • 使用MaterialApp构建应用，并在home属性中指定一个Scaffold。
    • 在Scaffold的body中，使用Center居中显示一个自定义的BlurryImageExample组件。

  3. BlurryImageExample组件：

    • 使用StatefulWidget创建一个可以处理状态的组件。
    • 在_BlurryImageExampleState类中，定义一个GlobalKey来引用图像。
    • 使用Image.network加载网络图像，并指定key属性为之前定义的GlobalKey。
    • 添加一个ElevatedButton，点击按钮时调用Blurry.blur方法对图像进行模糊处理。

  4. 模糊处理：

    • Blurry.blur方法需要传递context、renderTarget（图像渲染对象的引用）、sigmaX（X轴方向的模糊程度）和sigmaY（Y轴方向的模糊程度）。
    • renderTarget通过_imageKey.currentContext!.findRenderObject()!获取。

注意事项

  • 确保图像URL有效，并且网络请求允许在你的应用中加载外部图像。
  • sigmaX和sigmaY的值越大，模糊效果越明显。
  • 在实际项目中，可能需要处理更多的错误情况，比如网络加载失败等。

希望这个示例能帮你成功地在Flutter应用中使用blurry插件进行图像模糊处理！

回到顶部