Flutter: How can I create an animation as a button?

Question

I am learning flutter. I created an animation (.svg file) and I want to use it like a button. (Ontap => run animation)

Any key or link to resolve this? Thank a lot!

I created an animation (.svg file). I am looking for a way to use it like a button. Tap on it, run the animation.

I want to use bamboo_tube_animation instead of bamboo_tube .

import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State createState() => _Home();
}

class _Home extends State {
  Color background_color = Colors.red;
  String bamboo_tube = 'assets/images/icons/OngQue.png';
  String bamboo_tube_animation = 'assets/animations/OngQue.svg';

  @override
  Widget build(BuildContext context) {
    double device_width = MediaQuery.of(context).size.width;
    double device_height = MediaQuery.of(context).size.height;
    double bamboo_button_size = device_width * 0.9;
    double icon_size = 60;

    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Flexible(
            child: Container(
              child: IconButton(
                icon: Image.asset(bamboo_tube),
                iconSize: bamboo_button_size,
                onPressed: () {},
              ),
            ),
          ),
          Container(
            height: 20,
          ),
        ],
      ),
    );
  }
}

Answer 1

use flutter_svg

https://pub.dev/packages/animated_svg

and wrap it with GestureDetector

ex:

GestureDetector(
  onTap: () {
    // do something
  }
  child: SvgPicture.asset('/assets/example.svg'),
)