是否可以在 Flutter 中重复 SVG 格式的图像（图案）？

Question

final kBackgroundImage = Image.asset(
  'assets/images/bg.png',
  repeat: ImageRepeat.repeat,
  height: double.infinity,
  width: double.infinity,
);

要使用 SVG 背景图像执行类似的操作吗？

Answer 1

您可以使用 flutter_svg_provider 包来实现所需的结果。但请记住，在撰写此答案时，该插件尚未得到积极维护。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_svg_provider/flutter_svg_provider.dart' as svg_provider;

const svgPath = 'assets/sample_bg.svg';
void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const RepeatativeSvgBackgroundExample());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text('Svg Repeatative Background')),
        body: _HomePage(),
      ),
    );
  }
}

class _HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      width: double.infinity,
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: svg_provider.Svg(svgPath, size: Size.square(40)),
            repeat: ImageRepeat.repeat,
            fit: BoxFit.none),
      ),
    );
  }
}

pubspec.yaml

name: temp
description: A new Flutter project.

publish_to: "none"

version: 1.0.0+1

environment:
  sdk: ">=2.19.3 <3.0.0"

dependencies:
  cupertino_icons: ^1.0.2
  flutter:
    sdk: flutter
  flutter_svg: ^1.0.1
  flutter_svg_provider: ^1.0.3

dev_dependencies:
  flutter_lints: ^2.0.0

flutter:
  assets:
    - assets/sample_bg.svg

  uses-material-design: true

您可以将sample_bg.svg 替换为您的svg。

输出：