I'm trying to recreate an aspect of this Old Parchment CSS effect using native Flutter widgets.
I have got the texture and box-shadow working, but I would like to modify my InputDecoration widgets to give jagged box decorations like this
The website is using an SVG filter called "wavy2" to achieve the jagged edge:
<svg>
<filter id="wavy2">
<feTurbulence x="0" y="0" baseFrequency="0.02" numOctaves="5" seed="1" />
<feDisplacementMap in="SourceGraphic" scale="20" />
</filter>
</svg>
To recreate this I've looked at Stackoverflow which led to Flutter's docs on CustomClipper, this looks like the route but I'm not sure how to recreate that SVG functionality.
Looking up the attributes of InputDecorator it seems likely it won't support this at all. I would need to nest my text entry fields in Containers so I can dress them with BoxDecoration widgets, giving me access to CustomClipper.
That's fine, but I'm still stuck. Apparently, there are built-in attributes of SVG to create these randomising effect and I don't know how to recreate that using a CustomClipper. I'd love a fully explained solution to upskill me.