Using a SVG as a background image for a Container

Question

From this question I am using Flutter's SVG package (flutter_svg) to render a SVG image.

I want to use the SVG as a Container background with Text in the middle.

This is the code I have so far:

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
          )
        ),
      ],
    )

The problem I am finding is that SvgPicture is not an ImageProvider so I can't add the BoxDecoration to get a background image.

Is there a way to then use SvgPicture as a Container's box decoration or background?

score 38 · Answer 1 · edited Jun 21 '21 at 06:18

The exact way to use an SvgPicture is like this:

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

score 21 · Accepted Answer · answered Dec 18 '18 at 11:24

21

how about using a stack() and build everything on top of that. That is how I have done it with just an image as a background for the full viewport.

answered Dec 18 '18 at 11:24

carlosx2

1,672
16
23

3

how this can be achieved using a stack layout? cannot find the way to do as this post says. – Luis Parada Jan 30 '19 at 20:25
8

Simple example would be more useful :) – manikanta Sep 12 '21 at 17:35

score 9 · Answer 3 · answered Nov 11 '20 at 10:25

9

You can also use flutter_svg_provider

Like this :

import 'package:flutter_svg_provider/flutter_svg_provider.dart';

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

answered Nov 11 '20 at 10:25

Isaac Pitwa

372
2
6

4

Doesn't work!! The argument type 'Svg' can't be assigned to the parameter type 'ImageProvider – Amon C May 07 '21 at 16:35
8

The latest version of flutter_svg_provider (0.1.9 as of now) does support this. This answer is correct. – alex smith Jul 21 '21 at 06:29
3

well tested, it works in 2022 – nashihu Apr 12 '22 at 06:14
I have upvoted for this post because it work properly . – Jeslin Jacob Jun 22 '22 at 10:58
1

It's not working 2022, believe me. I tried and gave some kind of error like : "'Svg' isn't a function. (Documentation) Try correcting the name to match an existing function, or define a method or function named 'Svg'." – Davencode Oct 21 '22 at 13:04
1

@Davencode It's because you are using flutter_svg instead of flutter_svg_provider package – Thiago Viana Oct 22 '22 at 15:13
@ThiagoViana ok, I'll try it and I tell you if it works in this post. In any case I find out another solution. – Davencode Oct 23 '22 at 17:26

score 0 · Answer 4 · answered Apr 27 '23 at 08:43

This worked for me

   import 'dart:ui' as ui;

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: _getSvgImageProvider('assets/background.svg'),
          fit: BoxFit.cover,
        ),
      ),
      child: Center(
        child: Text('Hello World'),
      ),
    );
  }

  ImageProvider _getSvgImageProvider(String assetName) {
    final svgString = DefaultAssetBundle.of(context).loadString(assetName);
    final DrawableRoot svgDrawableRoot = SvgParser.parse(svgString);
    final ui.Picture picture = svgDrawableRoot.toPicture();
    final ui.Image image = picture.toImage(
      svgDrawableRoot.viewport.viewBox.width.toInt(),
      svgDrawableRoot.viewport.viewBox.height.toInt(),
    );
    final provider = MemoryImage(
      Uint8List.view(image.toByteData(format: ui.ImageByteFormat.png).buffer),
    );
    return provider;
  }
}

Using a SVG as a background image for a Container

4 Answers4