DEV Community

kyorohiro (kiyohiro kawamura)
kyorohiro (kiyohiro kawamura)

Posted on

1

SVG & viewBox at Flutter for Web

There was no problem on Android or iOS, but I could not display SVG with Flutter for Web well...

Screen Shot 2020-08-26 at 18.38.11.png

Then, I created a SVG Widget for flutter web.
Widget that displays SVG corresponding to viewBox tag

Maybe an existing cool plugin will work
Only use now..


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


class TwitterIcon extends StatelessWidget {

  final double w;
  final double h;
  final double viewBoxX;
  final double viewBoxY;
  final double viewBoxW;
  final double viewBoxH;
  double devicePixelRatio = 1.0;

  TwitterIcon(this.w, this.h, this.viewBoxX, this.viewBoxY,this.viewBoxW, this.viewBoxH) :super() {

  }

  final paths = [
    ["M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z", Colors.blue],
  ];

  @override
  Widget build(BuildContext context) {
    this.devicePixelRatio =  MediaQuery.of(context).devicePixelRatio;
    return Container(
        width: w,
        height: h,
        child: CustomPaint(
          painter: TwitterIconPainter(this) ,
        ),
        color: Colors.blueGrey,
    );
  }

}

class TwitterIconPainter extends CustomPainter {
  final bool showPath;
  final TwitterIcon parenrt;
  TwitterIconPainter(this.parenrt,{this.showPath = true});

  @override
  void paint(Canvas canvas, Size size) {
    //print("paint 00 ${paths}");
    // device ratio
    var drm = Matrix4.identity();
    //drm.scale(this.parenrt.devicePixelRatio, this.parenrt.devicePixelRatio);

    var viewboxWH = Matrix4.identity();
    double widthScale = this.parenrt.w/this.parenrt.viewBoxW;
    double heightScale = this.parenrt.h/this.parenrt.viewBoxH;
    drm.scale(widthScale, heightScale);

    canvas.transform(drm.multiplied(viewboxWH).storage);

    //
    canvas.clipRect(Rect.fromLTRB(0.0, 0.0, this.parenrt.viewBoxW, this.parenrt.viewBoxH));

    // viewbox x,y
    var viewboxXY = Matrix4.translationValues(-1*this.parenrt.viewBoxX, -1*this.parenrt.viewBoxY, 0.0);
    canvas.transform(viewboxXY.storage);

    for(var e in this.parenrt.paths){
      //print("print ${e}");
      Path path = parseSvgPath(e[0]);
      Color color = e[1];
      var paint = Paint()
        ..color = color
        ..strokeWidth = 4.0;
      canvas.drawPath(path, paint);
      if (showPath) {
        var border = Paint()
          ..color = Colors.black
          ..strokeWidth = 1.0
          ..style = PaintingStyle.stroke;
        canvas.drawPath(path, border);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Enter fullscreen mode Exit fullscreen mode

Sentry mobile image

Improving mobile performance, from slow screens to app start time

Based on our experience working with thousands of mobile developer teams, we developed a mobile monitoring maturity curve.

Read more

Top comments (0)

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay