CODEWITHSUNDEEP
androidflutterdartvisual-studio-code
user13408251
user13408251

Reputation:

how to stretching SVG in flutter?

**How can i stretch svg image ?

the code is:**

child: SvgPicture.asset(   
                  'assets/images/accessories.svg',
                  height: constraints.maxHeight * 0.5,
                  width: constraints.maxWidth * 0.8,
                ),

Upvotes: 4

Views: 7298

Answers (3)

lsaudon
lsaudon

Reputation: 1468

Encapsulated in a SizedBox.

SizedBox(
  width: constraints.maxWidth * 0.8,
  height: constraints.maxHeight * 0.5,
  child: SvgPicture.asset(
    AssetsSvgs.illustration1,
    fit: BoxFit.cover,
  ),
)

Upvotes: 0

harpreet seera
harpreet seera

Reputation: 1828

You can use the fit property for SvgPicture widget to provide the fitting on the asset image according to need. Some of the properties for fit are

BoxFit.contain

As large as possible while still containing the source entirely within the target box.

BoxFit.cover

As small as possible while still covering the entire target box.

BoxFit.fill

Fill the target box by distorting the source's aspect ratio.

BoxFit.fitHeight

Make sure the full height of the source is shown, regardless of whether this means the source overflows the target box horizontally.

BoxFit.fitWidth

Make sure the full width of the source is shown, regardless of whether this means the source overflows the target box vertically.

BoxFit.none

Align the source within the target box (by default, centering) and discard any portions of the source that lie outside the box.

BoxFit.scaleDown

As large as possible while still containing the source entirely within the target box.

For more detailed reference see official documentation

Upvotes: 9

Salami Tobi
Salami Tobi

Reputation: 61

You can use the fit property for the SvgPicture widget this way below.

Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          FittedBox(
            fit: BoxFit.cover,
            child: SvgPicture.asset('assets/icons/bg.svg'),
          ),

Upvotes: 1

Related Questions