Question 125047 in CSS Question posted in
Some basic documentation can be found here.

Css – how to set svg picture as background of container in flutter?

I cannot figure out how to set background image of container using svg picture !
I tried setting image as background but it didnt work
that method works with asset images or online images but is not successfully working with svg pictures
i am using svg.picture .
I am noobie !

Tags:

5

Answers


  1. 0

    To use an SVG as the background of a container in Flutter, you can use the DecoratedBox along with the SvgPicture.asset widget.

    Here is an example:

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

    I haven’t test it, I’m not sure if it works. If you get any error just tell me!

    Login or Signup to reply.
  2. 0

    I’m trying to Solve your Problem:

    Code:

     Container(
         decoration: BoxDecoration(
           image: DecorationImage(
             image: SvgPicture.asset(
               'assets/images/background.svg',
               fit: BoxFit.cover,
             ).pictureProvider,
             fit: BoxFit.cover,
           ),
         ),
         child: Text("");
       );
    Login or Signup to reply.
  3. 0

    You can use the flutter_svg package to display the svg image.

    Instead of using it as background image, i suggest you to use Stack to stack the svg image in the back and your widget in the front.

    Example

    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 >>,
        ),
      ],
    ),
  );
}
    Login or Signup to reply.
  4. 0

    You can use SVG as Container's child or If you need just for background then use 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",),
          ),
        ],
      ),

    enter image description here

    Login or Signup to reply.
  5. 0

    Please use svg_provider package for the same. You might have to set flutter_svg version to ^1.0.1 to make it work.

    return Container(
      height: double.infinity,
      width: double.infinity,
      decoration: const BoxDecoration(
        image: DecorationImage(
            image: svg_provider.Svg(svgPath),
            fit: BoxFit.none),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search