使用 SVG 作为容器的背景图像答案

【问题标题】：Using a SVG as a background image for a Container使用 SVG 作为容器的背景图像
【发布时间】：2019-04-20 20:33:11
【问题描述】：

来自this question 我正在使用 Flutter 的 SVG 包 (flutter_svg) 来渲染 SVG image。

我想将 SVG 用作Container 背景，Text 在中间。

这是我目前的代码：

Container(
      decoration: BoxDecoration(
          image: DecorationImage(image: SvgPicture.asset(
            'assets/example.svg',
          ),),
      ),
      children: <Widget>[
        Text('Welcome to my Flutter App',
          style: Theme.of(context).textTheme.display1.copyWith(
            color: Colors.white,
            fontWeight: FontWeight.bold
          )
        ),
      ],
    )

我发现的问题是SvgPicture 不是ImageProvider，所以我无法添加BoxDecoration 来获取背景图像。

有没有办法将SvgPicture用作Container的盒子装饰或背景？

【问题讨论】：

标签： dart flutter

【解决方案1】：

如何使用 stack() 并在此之上构建所有内容。这就是我使用图像作为整个视口的背景的方式。

【讨论】：

如何使用堆栈布局来实现？找不到像这篇文章所说的那样做的方法。
简单的例子会更有用:)

【解决方案2】：

使用 SvgPicture 的确切方法是这样的：

Widget build(BuildContext context) {

  return Scaffold(
    body: Stack(
      children: <Widget>[
        SvgPicture.asset(
          'assets/images/splash/background.svg',
          alignment: Alignment.center,
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
        ),
        Container(
          child: Column(
            children: <Widget>[Expanded(child: _createLogo())],
          ),
        ),
      ],
    ),
  );
}

【讨论】：

【解决方案3】：

你也可以使用flutter_svg_provider

像这样：

import 'package:flutter_svg_provider/flutter_svg_provider.dart';

Container(
      decoration: BoxDecoration(
          image: DecorationImage(image: Svg(
            'assets/example.svg',
          ),),
      ),
    )

【讨论】：

不起作用！！参数类型“Svg”不能分配给参数类型“ImageProvider
flutter_svg_provider 的最新版本（截至目前为 0.1.9）确实支持这一点。这个答案是正确的。