Menu
I'm using path_drawing package to get a path from an SVG in Flutter. After extracting path from SVG Data, it returns it to ClipPath widget which uses that path to clip the Container. After that, I increase the width and height of the Container which doesn't increase the size of SVG. How do I alter the size of SVG?
import 'package:flutter/material.dart';
import 'package:path_drawing/path_drawing.dart';
void main() => runApp(MaterialApp(
home: MyApp(),
));
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
//Container enclosed in ClipPath which uses Practice Clip as a clipper
child: ClipPath(
clipper: PracticeClip(),
child: Container(
//Container color
color: Colors.red,
//width and height of container
width: 100.0,
height: 100.0,
)),
),
);
}
}
class PracticeClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
//parseSvgPathData comes from a package
//Library link: https://pub.dev/packages/path_drawing (Library link)
//parseSvgPathData returns a Path object
//extracting path from SVG data
path = parseSvgPathData(
"M12.007.48C5.391.485.005 5.831 0 12.399v.03l2.042 1.191.028-.019a5.821 5.821 0 0 1 3.308-1.02c.371 0 .734.034 1.086.1l-.036-.006a5.69 5.69 0 0 1 2.874 1.431l-.004-.003.35.326.198-.434c.192-.42.414-.814.66-1.173.099-.144.208-.29.332-.446l.205-.257-.252-.211a8.33 8.33 0 0 0-3.836-1.807l-.052-.008a8.566 8.566 0 0 0-4.081.251l.061-.016c.971-4.257 4.714-7.224 9.133-7.227a9.31 9.31 0 0 1 6.601 2.713 9.197 9.197 0 0 1 2.508 4.499 8.386 8.386 0 0 0-2.498-.379h-.154c-.356.006-.7.033-1.037.078l.045-.005-.042.006a8.104 8.104 0 0 0-.39.06c-.057.01-.114.022-.17.033a8.103 8.103 0 0 0-.392.089l-.138.035a9.21 9.21 0 0 0-.483.144l-.029.01c-.355.12-.709.268-1.051.439l-.027.014c-.152.076-.305.16-.469.256l-.036.022a8.217 8.217 0 0 0-2.108 1.801l-.011.013-.075.092a8.346 8.346 0 0 0-.378.503c-.088.13-.177.269-.288.452l-.06.104a8.986 8.986 0 0 0-.234.432l-.016.029c-.17.341-.317.698-.44 1.063l-.017.053a8.053 8.053 0 0 0-.411 2.717v-.007l.001.112c.006.158.013.295.023.431l-.002-.037a11.677 11.677 0 0 0 .042.412l.005.042.013.103c.018.127.038.252.062.378.241 1.266.845 2.532 1.745 3.66l.041.051.042-.05c.359-.424 1.249-1.77 1.325-2.577l.001-.015-.007-.013a5.56 5.56 0 0 1-.64-2.595v-.001c0-3.016 2.371-5.521 5.397-5.702l.199-.007a5.93 5.93 0 0 1 3.47 1.025l.028.019 2.041-1.187v-.03a11.771 11.771 0 0 0-3.511-8.424A11.963 11.963 0 0 0 12.008.48z");
return path;// path is returned to ClipPath clipper
}
@override
bool shouldReclip(PracticeClip oldClipper) => false;
}
749
Change the font size to increase TextField's height.In TextField there is a property style:TextStyle(); Inside the textstyle there is a property called font size. Then give the appropriate font size.
Put Image widget inside container and give alignment center to container and specific width-height to the image. Save this answer.
How to set Minimum and Maximum Height or Width of Widget. Are you trying to set minimum or maximum height or width of Container() widget in a Flutter, then use ' constraints ' attribute and apply BoxConstraints() on it like below. Alternatively, you can use ConstrainedBox() like below.
I believe you want to scale the path. Something like:
class PracticeClip extends CustomClipper<Path> {
@override
Path getClip(Size size) {
//parseSvgPathData comes from a package
//Library link: https://pub.dev/packages/path_drawing (Library link)
//parseSvgPathData returns a Path object
//extracting path from SVG data
final Path path = parseSvgPathData(
"M12.007.48C5.391.485.005 5.831 0 12.399v.03l2.042 1.191.028-.019a5.821 5.821 0 0 1 3.308-1.02c.371 0 .734.034 1.086.1l-.036-.006a5.69 5.69 0 0 1 2.874 1.431l-.004-.003.35.326.198-.434c.192-.42.414-.814.66-1.173.099-.144.208-.29.332-.446l.205-.257-.252-.211a8.33 8.33 0 0 0-3.836-1.807l-.052-.008a8.566 8.566 0 0 0-4.081.251l.061-.016c.971-4.257 4.714-7.224 9.133-7.227a9.31 9.31 0 0 1 6.601 2.713 9.197 9.197 0 0 1 2.508 4.499 8.386 8.386 0 0 0-2.498-.379h-.154c-.356.006-.7.033-1.037.078l.045-.005-.042.006a8.104 8.104 0 0 0-.39.06c-.057.01-.114.022-.17.033a8.103 8.103 0 0 0-.392.089l-.138.035a9.21 9.21 0 0 0-.483.144l-.029.01c-.355.12-.709.268-1.051.439l-.027.014c-.152.076-.305.16-.469.256l-.036.022a8.217 8.217 0 0 0-2.108 1.801l-.011.013-.075.092a8.346 8.346 0 0 0-.378.503c-.088.13-.177.269-.288.452l-.06.104a8.986 8.986 0 0 0-.234.432l-.016.029c-.17.341-.317.698-.44 1.063l-.017.053a8.053 8.053 0 0 0-.411 2.717v-.007l.001.112c.006.158.013.295.023.431l-.002-.037a11.677 11.677 0 0 0 .042.412l.005.042.013.103c.018.127.038.252.062.378.241 1.266.845 2.532 1.745 3.66l.041.051.042-.05c.359-.424 1.249-1.77 1.325-2.577l.001-.015-.007-.013a5.56 5.56 0 0 1-.64-2.595v-.001c0-3.016 2.371-5.521 5.397-5.702l.199-.007a5.93 5.93 0 0 1 3.47 1.025l.028.019 2.041-1.187v-.03a11.771 11.771 0 0 0-3.511-8.424A11.963 11.963 0 0 0 12.008.48z");
final Rect pathBounds = path.getBounds();
final Matrix4 matrix4 = Matrix4.identity();
matrix4.scale(size.width / pathBounds.width, size.height / pathBounds.height);
return path.transform(matrix4.storage);// path is returned to ClipPath clipper
}
@override
bool shouldReclip(PracticeClip oldClipper) => false;
}
Should get you started.
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
