svg 图像作为 flutter 中的按钮

Question

我创建了一个播放按钮并将其保存为 svg 文档。

我还创建了我的主屏幕，其中有一个背景图片和一个居中的 floatingActionButton。（我为此使用了堆栈）。

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: () {}),
        ),

      ],
    );
  }
}

我的问题是：我可以使用我的 svg-image 作为按钮而不是我当前的 floatingActionButton 吗？如果是，我可以得到一些帮助如何做到这一点，或者我应该从哪里开始寻找如何做到这一点？

我仍然想要我的背景图片和一个居中的按钮:)

谢谢！

Answer 1

您可以使用 Gesture Detector 为 Flutter 中的任何 Widget 添加点击功能：

GestureDetector(
  onTap: () {
    print("onTap called.");
  },
  child: Text("foo"),
),

子 svg Widget 就像使用这个库一样简单（因为 flutter 仍然没有原生 SVG 支持）： https://pub.dev/packages/flutter_svg

Answer 2

您可以使用 InkWell 为 Flutter 中的任何 Widget 添加点击功能：

InkWell(
  onTap: () {
    print("onTap function."); 
  }, 
  child: Icon( 
     CstomIcon.custico, 
  ),
),

参考此 post 添加 svg 作为图标并将 SVG 作为 InkWell 的子项

Answer 3

如果你想创建一个可点击的图标，用 IconButton 包围你的 SVG（使用包 flutter_svg 加载），你会提供了一个 onTap 方法，像这样：

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

Answer 4

这是使用 flutter_svg 库的完整解决方案。使用 InkWell Widget.

包装您的小部件

InkWell( 
        onTap: () {
                    // todo : your code is here
                    print("back button clicked ");
                  },
                  child: getSVGImage("assets/images/arrow_back.svg"))

这是我的辅助方法 getSVGImage("YOUR_ASSET_PATH")。您可以将其粘贴到另一个文件以进一步访问。

Widget getSVGImage(String assetName) {
  final Widget companyLogo = SvgPicture.asset(assetName);
  return companyLogo;
}

为 flutter_svg 包添加如下依赖项：

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.0.3

svg 图像作为 flutter 中的按钮

svg image as button in flutter

svg

imagebutton

flutter-layout