Gigili
Gigili

Reputation: 620

Flutter app - want to play sound oppressed() without it being pressed

I am working on app in which I can get the app play sound when a button is pressed, but I also want to implement a feature that when the user hover the finger over all buttons without releasing (like piano), each button play its sound. How can I do that in Flutter? I tried Googling, but since the problem is quite descriptive I failed to find a solution.

Upvotes: 1

Views: 664

Answers (3)

Nicholas Bradley
Nicholas Bradley

Reputation: 41

GestureDetector with onTapDown and onTapUp work for playing a single key for the right amount of time. onPanUpdate is what you need to swipe over several key's. So a combination of the three should be all you need.

Upvotes: 0

Daniel Alexander
Daniel Alexander

Reputation: 160

Using GestureDetector this could be a possible solution:

  • You should know the width of each key.
  • Try to put all your 'Piano Widget' inside of a Row Widget.
  • Put the Row Widget inside of a GestureDetector like this :
     GestureDetector(
            onLongPressMoveUpdate: (detail){
              print(detail.globalPosition.dx);
            },
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  height: 40,
                  width: 40,
                  color: Colors.black,
                ),
                SizedBox(width: 6),
                Container(
                  color: Colors.white,
                  height: 40,
                  width: 40,
                ),
              ],
            ),
          )
  • You can use the function OnLongPressMoveUpdate and get the variation in the x axis dx to see in which key you are positioned depending of the Width of your key.
  • My console shows this:
165.0
flutter: 165.3333282470703
flutter: 165.66665649414062
flutter: 166.0
..
..
flutter: 205.0

you can notice the difference between the end and the start is equal to the width of my key (a container).

Hope this help!

Upvotes: 0

Claudio Redi
Claudio Redi

Reputation: 68440

Use GestureDetector widgets to detect different gestures over the widgets in the view. You might need to play with onTapDown and onTapUp

Upvotes: 3

Related Questions