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