Flutter背景模糊插件blurbackground的使用

Flutter背景模糊插件blurbackground的使用

功能 #

此插件可以帮助你在Flutter应用中轻松添加背景模糊效果。

开始使用 #

首先，将此包导入到你的Flutter项目中：

dependencies:
  blurbackground: ^1.0.0

然后在项目的根目录下运行 flutter pub get 来获取新的依赖。

使用方法 #

要使用背景模糊插件，可以使用 `BlurBackground` 组件。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('背景模糊插件示例'),
        ),
        body: Center(
          child: BlurBackground(
            blurX: 10.0,
            blurY: 10.0,
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.white,
              child: Center(
                child: Text(
                  '这是一个带有模糊背景的容器',
                  style: TextStyle(fontSize: 18),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter背景模糊插件blurbackground的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在 Flutter 中，如果你想实现背景模糊效果，可以使用 blurbackground 插件或者直接使用 Flutter 自带的 BackdropFilter 和 ImageFilter.blur 来实现。以下是使用 blurbackground 插件和原生 Flutter 实现背景模糊的示例。

1. 使用 blurbackground 插件

首先，你需要在 pubspec.yaml 文件中添加 blurbackground 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  blurbackground: ^1.0.0

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

接下来，你可以在代码中使用 BlurBackground 组件来实现背景模糊效果。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: BlurBackground(
          child: Center(
            child: Container(
              width: 200,
              height: 200,
              color: Colors.white.withOpacity(0.5),
              child: Center(
                child: Text(
                  'Blur Background',
                  style: TextStyle(color: Colors.black, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

2. 使用 Flutter 自带的 BackdropFilter

如果你不想使用第三方插件，可以使用 Flutter 自带的 BackdropFilter 和 ImageFilter.blur 来实现背景模糊效果。以下是一个示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 背景图片
            Image.network(
              'https://picsum.photos/250?image=9',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            // 模糊背景
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0),
              child: Container(
                color: Colors.black.withOpacity(0.1),
              ),
            ),
            // 前景内容
            Center(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.white.withOpacity(0.5),
                child: Center(
                  child: Text(
                    'Blur Background',
                    style: TextStyle(color: Colors.black, fontSize: 24),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

3. 使用 Blur Widget（自定义实现）

你也可以自定义一个 Blur Widget 来封装背景模糊的逻辑：

import 'package:flutter/material.dart';

class Blur extends StatelessWidget {
  final double sigmaX;
  final double sigmaY;
  final Widget child;

  Blur({required this.child, this.sigmaX = 5.0, this.sigmaY = 5.0});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: sigmaX, sigmaY: sigmaY),
      child: child,
    );
  }
}

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 背景图片
            Image.network(
              'https://picsum.photos/250?image=9',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            // 使用自定义的 Blur Widget
            Blur(
              child: Container(
                color: Colors.black.withOpacity(0.1),
              ),
            ),
            // 前景内容
            Center(
              child: Container(
                width: 200,
                height: 200,
                color: Colors.white.withOpacity(0.5),
                child: Center(
                  child: Text(
                    'Blur Background',
                    style: TextStyle(color: Colors.black, fontSize: 24),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部