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

Question

从这个问题，我使用 Flutter 的 SVG 包 ( flutter_svg) 来渲染SVG 图像。

我想使用 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用作容器的盒子装饰或背景？

Answer 1

如何使用 stack() 并在其上构建所有内容。这就是我只用一张图像作为完整视口背景的方法。

Answer 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())],
          ),
        ),
      ],
    ),
  );
}

Answer 3

您还可以使用flutter_svg_provider

像这样 ：

import 'package:flutter_svg_provider/flutter_svg_provider.dart';

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