Flutter App Building: StatefulWidget to play sound and update pictures on tap of the button using audioplayers

PinkFloyd
PinkFloyd
Jan 28 · 4 min read
Photo by Chris Ried on Unsplash

Hey World!

Please check my first app.

COMEDY! (cheers to @marknorm)

App does two things: on pressed — Plays sound associated with the button and Changes picture associated with the button.

Left picture — Loaded App. Right Picture — Cricket button pressed to initiate cricket sound and change picture.

App Idea Inspired by my younger brother whom I love dearly — he likes to make jokes and put family members on the spot, all during big family dinners. His jokes are hit and miss and in general very annoying. So I came up with the idea to play cricket sound when he makes awkward comments, clap if its a hit and boo him (or play cricket sound) when he manages to upset somebody or touch the nerve. In general I keep app opened during dinner to react quickly to his puns ;-).

I didn’t spend much time on UI and concentrated more on functionality. Hope you will find that exercise useful.

Build

To have AppBar and Body I build an app inside Scaffold Widget. Very good summary of Scaffold widget: https://medium.com/flutterdevs/know-your-widgets-scaffold-in-flutter-292b8bc1281.

Scaffold implements the basic material design visual layout structure and contains various functionality from giving an appbar, a floating button, a drawer, background color, bottom navigation bar, footer buttons and body.

I also wanted to fix app orientation in Portrait mode. In order to achieve that I put SystemChrome.setPreferredOrientations inside the Widget build() method. Please note that solution might not work for IOS; for possible solution please refer to https://github.com/flutter/flutter/issues/27235#issuecomment-508995063.

main.dart

Assets

I used online converter to convert youtube sounds to mp3. Make sure you loaded your files to assets folder. Instructions to do that: https://medium.com/@suragch/how-to-include-images-in-your-flutter-app-863889 fc0b29

I renamed my files, so that each mp3 file name has the same number as a picture associated with that particular button. For example 1.mp3 and 1.jfif, 3.mp3 and 3.jfif and so on.

Sound Engine

I used audioplayers flutter package. In order to use that player you have to add audioplayers:^.10.0 in pubspec.yaml under cupertino_icons and then Incorporate the package to the project: import ‘package:audioplayers/audio_cache.dart’;

If you want to play sounds from the Internet instead of audio_cash.dart you can use audioplayers.dart.

Creating a new player

Building player to play sound when we hit the button.

We are going to have multiple inputs therefore we should give our datatype a name (soundNumber — note number inside the button) to be able to refer to it inside the function. In order to do that instead of hardcoding the name into our function we are putting the $ sign next to it.

I believe it is better to put data type next to soundNumber in the brackets, in our case it is int. However in my case function worked without that as well.

Creating function to update picture every time we press the button

FlatButton

In order to reduce the volume of repetitive code I am building the FlatButton with data types to be able to add specific futures for each of the button on the screen (color, name, sound number, picture number). I am also adding onPressed functionality and feed playSound and changePicture functions inside onPressed widget

Stateful Widget

Column layout Inside stateful widget to separate picture from buttons, which gets rebuild everytime we press the button.

int pitureNumber = 9 -> here I defined initial picture on App load: picture of my favorite stand-up comedian.

Adding Flatbuttons with own parameters (color, text, soundnumber, buttonPicture), repeating that eight times (total number of buttons)

Hope you you will find that useful.

PinkFloyd

Written by

PinkFloyd

trying hard to take life easy

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade