svg image as button in flutter

Question

I created a play-button and saved it as a svg dokument.

I have also created my home screen with a picture in the background and a floatingActionButton centered. (I used stack for this).

import 'package:flutter/material.dart';

    class MyBackgroundWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Stack(
          children: <Widget>[
            new Container(
                child: new Image.asset('assets/Backgr.png'),
                width: double.infinity,
                height: double.infinity),
            Center(
              child: new FloatingActionButton(
                  child: new Icon(Icons.arrow_right),
                  backgroundColor: new Color(0xFFE57373),
                   onPressed: () {}),
        ),

      ],
    );
  }
}

My question is: Can I use my svg-image as button instead of my current floatingActionButton? If yes, can I please get some help how to do this or where I should start looking for how to do this?

I still want my background picture and a centered button :)

Thank you!

I just found this: https://stackoverflow.com/questions/44087400/flutter-svg-rendering — J.W, Dec 29 '18 at 21:47

score 21 · Answer 1 · edited May 31 '22 at 08:53

21

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,
      ),

edited May 31 '22 at 08:53

qix

7,228
1
55
65

answered Sep 29 '20 at 08:32

Luka Ganić

211
2
3

Luan Naufal · Accepted Answer · 2019-10-06T22:00:20.990

10

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

edited Oct 06 '19 at 22:00

answered Oct 03 '19 at 12:37

Luan Naufal

1,346
9
15

score 2 · Answer 3 · answered Sep 14 '20 at 12:35

2

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

answered Sep 14 '20 at 12:35

Nandakishor Dhanaji Valakunde

635
9
14

Any way we can add ink effect on top of the svg? I can only do that with other images types (png, jpg) – Donki Feb 20 '21 at 20:23

Shihab Uddin · Answer 4 · 2022-04-12T05:20:25.490

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

svg image as button in flutter

4 Answers4

Linked