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

Question

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

Answer 1

使用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 2

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

Answer 3

您也可以使用flutter_svg_provider

赞：

import 'package:flutter_svg_provider/flutter_svg_provider.dart';

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