Svg Clip
The Svg Clip library provides a simple way to use an SVG file as a mask for clipping a Flutter widget. This allows you to create visually appealing designs by applying convenient shapes as masks to your widgets.
Installation
To use this library in your Flutter project, follow these steps:
-
Add the following dependency to your
pubspec.yaml
file:dependencies: svg_clip: <latest-version>
Usage
SvgClip(
asset: ClipAsset.local(path: "assets/images/cloud.svg"),
child: const _ColoredBox(
color: Colors.green,
width: 300,
height: 100,
),
)
Full Example
import 'package:flutter/material.dart';
import 'package:svg_clip/svg_clip.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SVG Mask Clipper Demo',
home: Scaffold(
appBar: AppBar(
title: Text('SVG Mask Clipper Demo'),
),
body: Center(
child: SvgClip(
asset: ClipAsset.local(path: "assets/images/cloud.svg"),
child: const _ColoredBox(
color: Colors.green,
width: 300,
height: 100,
),
),
),
),
);
}
}
Limitations
- Supports local svgs only.
- Certain complex svg may not work as expected.
License
This library is licensed under the MIT License.