How to draw SVG image that is bigger than parent widget in Flutter

Question

I'm trying to render SVG image that is bigger than ViewBox. To do this I'm using flutter_svg 0.19.0. For some reasons, the the image scales only to border of parent widget. However, if I specified smaller size than ViewBox, then image scales down correctly.

Creating SVG widget:

 void setNewImage(String path) {
    setState(() {
      svg = SvgPicture.asset(
        path,
        alignment: Alignment.center,
        allowDrawingOutsideViewBox: true,
        width: 3000.0,
        height: 5000.0,
        clipBehavior: Clip.none,
      );
    });
  } 

Parent Widget:

Scaffold(
      resizeToAvoidBottomPadding: false,
      //avoid resize when keyboard is visible
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: ClipRRect(
        child: Container(
          color: Colors.transparent,
          child: svg
          )
        )
      )

Have you any idea how can I deal with this problem? Using SizedBox, Container with specified width and height also not works.

---

Edit: I found the solution by inserting svg Widget into Transform.scale() widget.

Scaffold(
      resizeToAvoidBottomPadding: false,
      //avoid resize when keyboard is visible
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: ClipRRect(
        child: Container(
          color: Colors.transparent,
          child: Transform.scale(
                     scale: 2,
                     alignment: Alignment.topLeft,
                     child: svg)
          )
        )
      )

Solution

Maybe you want to use an OverflowBox:

Container(
  width: 80,
  height: 80,
  child: OverflowBox(
    alignment: Alignment.centerLeft,
    maxWidth: 120,
    child: Container(
      padding: EdgeInsets.all(12.0),
      decoration: BoxDecoration(
        color: Colors.amber,
        border: Border.all(color: Colors.brown, width: 3.0),
      ),
      child: SvgPicture.asset(
        'images/hello.svg',
        alignment: Alignment.center,
      ),
    ),
  ),
),

Full source code:

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
          width: 100,
          height: double.infinity,
          decoration: BoxDecoration(
            color: Colors.amber.shade200,
            border: Border(
              right: BorderSide(color: Colors.black45, width: 2.0),
            ),
          ),
          child: Column(
            children: [
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
              const SizedBox(height: 24.0),
              Container(
                width: 80,
                height: 80,
                child: OverflowBox(
                  alignment: Alignment.centerLeft,
                  maxWidth: 120,
                  child: Container(
                    padding: EdgeInsets.all(12.0),
                    decoration: BoxDecoration(
                      color: Colors.amber,
                      border: Border.all(color: Colors.brown, width: 3.0),
                    ),
                    child: SvgPicture.asset(
                      'images/hello.svg',
                      alignment: Alignment.center,
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 24.0),
              SvgPicture.asset(
                'images/hello.svg',
                alignment: Alignment.center,
                allowDrawingOutsideViewBox: true,
                width: 80.0,
              ),
            ],
          )),
    );
  }
}

Comments

[Ravn]

My menu bar is fine (left side), I would to find way to scale image in my map view (right side, the biggest part).

[Thierry]

Sorry for the misunderstanding. Do you have a Minute, Complete, Reproducible sample?

[Ravn]

sure, look on my github

[Thierry]

I think this is not a public repository.

[Ravn]

Sorry, I didn't notice that this is a private repository. In the meantime, I think I've found a solution to my problem. I have put the entire svg widget into Transform.scale () and it works fine. Thanks for your commitment.

[Thierry]

Great! Add your answer and accept it to help others and close this question lifecycle.