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!

Answer 1

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

Answer 2

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