flutter 如何将SVG图片设置为容器背景?

rkkpypqq  于 2023-05-08  发布在  Flutter
关注(0)|答案(5)|浏览(409)

我不知道如何使用svg图片设置容器的背景图像!我试着设置图像作为背景,但它不工作,该方法与资产图像或在线图像,但不成功的工作与svg图片,我使用svg.picture。我是菜鸟!

qxsslcnc

qxsslcnc1#

您可以使用flutter_svg包来显示svg图像。
我建议你使用Stack将svg图像放在后面,将你的小部件放在前面,而不是将它用作背景图像。
示例

Widget build(BuildContext context) {
  return Scaffold(
    body: Stack(
      children: <Widget>[
        SvgPicture.asset(
          'assets/background.svg',
          alignment: Alignment.center,
          width: 200,
          height: 200,
        ),
        Container(
          child:  << Your Widget >>,
        ),
      ],
    ),
  );
}
bttbmeg0

bttbmeg02#

您可以使用SVG作为Container's child,或者如果您只需要作为背景,则使用Stack

Column(
        children: [

          //with Stack
          Stack(
            alignment: Alignment.center,
            children: [
              SvgPicture.network("https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg",),
              Container(
                height: 200,width: 200,
                color: Colors.yellow.shade200,
                alignment: Alignment.center,
                child: const Text("Hello! World"),
              )
            ],
          ),

          //with Container
          Container(
            height: 250,
            margin: const EdgeInsets.all(15.0),
            padding: const EdgeInsets.all(15.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: Colors.yellow.shade200,
            ),
            child: SvgPicture.network("https://upload.wikimedia.org/wikipedia/commons/f/f7/Bananas.svg",),
          ),
        ],
      ),

ua4mk5z4

ua4mk5z43#

要在Flutter中使用SVG作为容器的背景,您可以使用DecoratedBox沿着SvgPicture.asset小部件。
下面是一个例子:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: SvgPicture.asset(
              'assets/images/background.svg',
              fit: BoxFit.cover,
            ).pictureProvider.toImage(100,100), //Example sizes
            fit: BoxFit.cover,
          ),
        ),
        child: Center(
          child: Text(
            'Hello, world!',
            style: TextStyle(
              fontSize: 32.0,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

我还没试过,不知道能不能用。如果你有任何错误,请告诉我!

9jyewag0

9jyewag04#

我正在努力解决您的问题:
验证码:

Container(
         decoration: BoxDecoration(
           image: DecorationImage(
             image: SvgPicture.asset(
               'assets/images/background.svg',
               fit: BoxFit.cover,
             ).pictureProvider,
             fit: BoxFit.cover,
           ),
         ),
         child: Text("");
       );
toiithl6

toiithl65#

请使用svg_provider包。您可能需要将flutter_svg version设置为^1.0.1才能使其工作。

return Container(
      height: double.infinity,
      width: double.infinity,
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: svg_provider.Svg(svgPath),
            fit: BoxFit.none),
      ),
    );

相关问题