svg image as button in flutter

问题

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!

回答1:

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

回答2:

If you want to create a clickable icon, sorround your Svg with IconButton and you will have onTap method offered, like this:

child: IconButton(
        icon: SvgPicture.asset(
          'path to your asset',
        ),
        onPressed: null //do something,
      ),

回答3:

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

来源：https://stackoverflow.com/questions/53973034/svg-image-as-button-in-flutter

标签

svg

imagebutton

flutter-layout