svg image as button in flutter
You can use the InkWell to add click functionality to any Widget in Flutter:
InkWell(
onTap: () {
print("onTap function.");
},
child: Icon(
CstomIcon.custico,
),
),
refer this post Flutter SVG rendering to add svg as icon and put SVG as child of InkWell
If you want to create a clickable icon, surround your SVG (loaded using the package flutter_svg) with an IconButton
and you will
have an onTap
method offered, like this:
child: IconButton(
icon: SvgPicture.asset(
'path to your asset',
),
onPressed: null //do something,
),
Here is a complete solution using the flutter_svg library. Wrap your widget with InkWell Widget.
InkWell(
onTap: () {
// todo : your code is here
print("back button clicked ");
},
child: getSVGImage("assets/images/arrow_back.svg"))
Here, is my helper method getSVGImage("YOUR_ASSET_PATH"). You can paste it to another file to use further access.
Widget getSVGImage(String assetName) {
final Widget companyLogo = SvgPicture.asset(assetName);
return companyLogo;
}
Add dependency like below for flutter_svg package:
dependencies:
flutter:
sdk: flutter
flutter_svg: ^1.0.3
You can use the Gesture Detector
to add click functionality to any Widget in Flutter:
GestureDetector(
onTap: () {
print("onTap called.");
},
child: Text("foo"),
),
And the child svg Widget is as simple as using this lib (since flutter still doesn't have native SVG support): https://pub.dev/packages/flutter_svg