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

user_11813353 0
Viewed 732

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

View of my app

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)
          )
        )
      )
flutter svg
1 Answers

Maybe you want to use an OverflowBox:

enter image description here

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