Flutter, как изменить SVG после onTap с помощью Gesture Detector

Я хочу реализовать ту же функциональность, что и здесь, с изображениями:

Flutter, как изменить изображение после onTap с помощью детектора жестов а>

Я использую этот пакет: https://pub.dev/packages/flutter_svg/example

Несмотря на то, что я могу сделать это в IconButton, мне это нужно в GestureDetector, а не в IconButton, поэтому, для ясности, нужна помощь, как реализовать SVG в GestureDetector, а не в IconButton!

Я могу визуализировать SVG на экране, но не могу понять, как реализовать его в GestureDetector, чтобы отобразить SVG на экране, я делаю это так:

Expanded svgTest({double blackKeyWidth}) {
    return Expanded(
      child: Container(
        child: IconButton(
            icon: SvgPicture.asset(
              'assets/images/1.svg',
              fit: BoxFit.fill,
              allowDrawingOutsideViewBox: true,
              width: 500,
            ),
            onPressed: null //do something,
            ),
      ),
    );
  }

Не могу понять, как реализовать SVG в GestureDetector, он не может войти, поскольку детектор изображений и жестов не принимает значок, или я делаю это неправильно.

Благодарить


flutter dart svg gesturedetector
person Jan    schedule 30.12.2020    source источник
comment
вы хотите изменить его один раз или каждый раз при нажатии?   -  person Mukul    schedule 30.12.2020
comment
Каждый раз, когда я хочу внедрить SVG в GestureDetector, а не в IconButton, я разместил здесь код IconButton как пример того, что я смог сделать сам, хотя я хочу, чтобы SVG менялся каждый раз, когда onTapDown и onTapUp   -  person Jan    schedule 30.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

Если вы хотите изменить изображение в onTap методе iconButton, вам придется изменить путь метода image в onTap, используя setState

String imagePath = "assets/images/1.svg";

Expanded svgTest({double blackKeyWidth}) {
    return Expanded(
      child: Container(
        child: IconButton(
            icon: SvgPicture.asset(
              '${imagePath}',
              fit: BoxFit.fill,
              allowDrawingOutsideViewBox: true,
              width: 500,
            ),
            onPressed: (){
               setState(() {
                  imagePath = "assets/images/2.svg";
                });
},
            ),
      ),
    );
  }

EDITED: (для детектора жестов вы можете просто обернуть в него SVG)

Замените iconbutton на GestureDetector и добавьте его методы onTap и onTapUp.

  GestureDetector(
    onTap: () {
      setState(() {
        imagePath = "assets/images/2.svg";
      });
    },
    onTapUp: (TapUpDetails tapUpDetails) {
      setState(() {
        imagePath = "assets/images/1.svg";
      });
    },
    child: SvgPicture.asset(
      '${imagePath}',
      //fit: BoxFit.fill,
      //allowDrawingOutsideViewBox: true,
      //width: 500,
    ),
  ),

Чтобы узнать больше о GestureDetector и Flutter SVG, нажмите здесь

person Mukul    schedule 30.12.2020
comment
Хотите реализовать SVG в GestureDetector, вам нужны дополнительные функции, которые он предлагает, например, что SVG снова меняется onTapUp - person Jan; 30.12.2020
comment
@Jan Пожалуйста, проверьте обновленный код, а также расскажите, с какой проблемой вы столкнулись с GestureDetector. - person Mukul; 30.12.2020