Flutter 毛玻璃效果：玩转高斯模糊，内外边距，背景色，背景渐进色，背景图，透明度，圆角，边框

2023-12-18 04:38:16

Flutter 毛玻璃效果：为你的组件注入朦胧美

需求：组件动态化，实现高斯模糊效果

随着 Flutter 的蓬勃发展，开发者越来越需要将组件动态化，即通过 json 数据生成组件。为了满足这一需求，Flutter 引入了高斯模糊效果，让你可以轻松地实现组件动态化，赋予你的应用更多灵活性。

高斯模糊效果的实现

实现高斯模糊效果非常简单。只需在你的组件中添加以下代码：

import 'package:flutter/material.dart';

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

  const BlurredBox({
    Key? key,
    required this.child,
    this.sigmaX = 10.0,
    this.sigmaY = 10.0,
  }) : super(key: key);

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

使用这个组件，你可以轻松地为你的组件添加毛玻璃效果。

内外边距、背景色、背景渐进色、背景图、透明度、圆角和边框

除了高斯模糊效果，Flutter 还提供了内外边距、背景色、背景渐进色、背景图、透明度、圆角和边框等属性，让你可以轻松地自定义组件的外观。

import 'package:flutter/material.dart';

class CustomBox extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry padding;
  final Color backgroundColor;
  final Gradient? backgroundGradient;
  final ImageProvider? backgroundImage;
  final double opacity;
  final BorderRadiusGeometry borderRadius;
  final BorderSide? border;

  const CustomBox({
    Key? key,
    required this.child,
    this.padding = EdgeInsets.zero,
    this.backgroundColor = Colors.transparent,
    this.backgroundGradient,
    this.backgroundImage,
    this.opacity = 1.0,
    this.borderRadius = BorderRadius.zero,
    this.border,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: padding,
      decoration: BoxDecoration(
        color: backgroundColor,
        gradient: backgroundGradient,
        image: backgroundImage != null ? DecorationImage(image: backgroundImage, fit: BoxFit.cover) : null,
        borderRadius: borderRadius,
        border: border,
      ),
      child: Opacity(
        opacity: opacity,
        child: child,
      ),
    );
  }
}