Flutter背景图案应用插件background_patterns的使用

Flutter背景图案应用插件background_patterns的使用

预览

特性

特性

• 在任何小部件中实现一个带图案的容器
• 形状可以是包默认的形状（方形、三角形、六边形）
• 形状可以是一个自定义形状，其中需要提供自定义路径
• 可以在一个容器中组合多种形状
• 可以设置形状大小、深度和透视
• 可以设置容器的透视和形状之间的间距

安装

在您的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  background_patterns: <最新版本>

在您的库中添加以下导入：

import 'package:background_patterns/background_patterns.dart';

开始使用

最小化使用

return PatternContainer(
  shapes: [SquareConfig()],
  shapeColor: Colors.black);

配置使用

return PatternContainer(
  shapeSize: 40,
  perspective: 0.8,
  shapeDepth: 0.5,
  containerDepth: 0.2,
  alignShapesVertical: true,
  shapes: [
    PolygonConfig(),
    PolygonConfig(isOutlined: true),
    StarConfig(),
    StarConfig(isOutlined: true, innerCirclePoints: 7, innerRadius: 30, innerOuterRadiusRatio: 2, angleOffsetToCenter: 40)
  ],
  shapeColor: Colors.green);

自定义形状

List<Offset> customStarPath = [];

double shapeSize = 120;

// 构建一个星形
customStarPath.add(Offset(shapeSize / 2, 0));
customStarPath.add(Offset(shapeSize, shapeSize));
customStarPath.add(Offset(0, shapeSize / 3));
customStarPath.add(Offset(shapeSize, shapeSize / 3));
customStarPath.add(Offset(0, shapeSize));
customStarPath.add(Offset(shapeSize / 2, 0));

return PatternContainer(
  customPath: customStarPath,
  shapes: const [Shape.customOutlined],
  shapeColor: Colors.black);

完整示例

以下是一个完整的示例代码，展示了如何配置和使用 background_patterns 插件。

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

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

class ExampleBackgroundPatterns extends StatelessWidget {
  const ExampleBackgroundPatterns({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ConfigureBackgroundPattern(),
      ),
    );
  }
}

class ConfigureBackgroundPattern extends StatefulWidget {
  const ConfigureBackgroundPattern({super.key});

  [@override](/user/override)
  ConfigureBackgroundPatternState createState() => ConfigureBackgroundPatternState();
}

class ConfigureBackgroundPatternState extends State<ConfigureBackgroundPattern> {
  double _shapeSize = 80;
  double _margin = 20;
  double _shapeDepth = 0.0;
  double _containerDepth = 0.0;
  double _perspective = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return PatternContainer(
      padding: const EdgeInsets.all(10),
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.black12,
        borderRadius: BorderRadius.circular(50),
      ),
      clipBehaviour: Clip.antiAlias,
      shapeSize: _shapeSize,
      perspective: _perspective,
      shapeDepth: _shapeDepth,
      containerDepth: _containerDepth,
      alignShapesVertical: true,
      shapes: [
        PolygonConfig(),
        PolygonConfig(isOutlined: true),
        SquareConfig(isOutlined: true),
        StarConfig(),
        StarConfig(isOutlined: true, innerCirclePoints: 7, innerRadius: 24, innerOuterRadiusRatio: 2, angleOffsetToCenter: 40)
      ],
      shapeSpacing: _margin,
      shapeColor: Colors.black12,
      child: Padding(
        padding: const EdgeInsets.all(40),
        child: Column(
          children: [
            const Text('形状大小'),
            Slider(
              value: _shapeSize,
              min: 5,
              max: 200,
              divisions: 8,
              label: _shapeSize.toString(),
              onChanged: (double value) {
                setState(() {
                  _shapeSize = value;
                });
              },
            ),
            const Text('形状之间间距'),
            Slider(
              value: _margin,
              min: 0,
              max: 80,
              divisions: 8,
              label: _margin.toString(),
              onChanged: (double value) {
                setState(() {
                  _margin = value;
                });
              },
            ),
            const Text('形状深度'),
            Slider(
              value: _shapeDepth,
              max: 1,
              divisions: 8,
              label: _shapeDepth.toString(),
              onChanged: (double value) {
                setState(() {
                  _shapeDepth = value;
                });
              },
            ),
            const Text('形状透视'),
            Slider(
              activeColor: Colors.blue.withAlpha(50),
              inactiveColor: Colors.blue.withAlpha(50),
              thumbColor: Colors.blue,
              value: _perspective,
              min: -1,
              max: 1,
              divisions: 8,
              label: _perspective.toString(),
              onChanged: (double value) {
                setState(() {
                  _perspective = value;
                });
              },
            ),
            const Text('容器深度'),
            Slider(
              value: _containerDepth,
              max: 1,
              divisions: 8,
              label: _containerDepth.toString(),
              onChanged: (double value) {
                setState(() {
                  _containerDepth = value;
                });
              },
            )
          ],
        ),
      ),
    );
  }
}