I want to play sound when the cart flipping to show mean of word to the user I tried with Inkwell but it doesn’t work.
I want to implement a dictionary that when the user clicks on any word can see mean and listen voice.
Also, I have placed a button at the bottom of the page to test the sound, when we click on it, the sound will play, but it does not work for the program.
my code repo: https://github.com/efarhadi/sw_flash
my test_filip.dart file:
import 'package:audioplayers/audioplayers.dart';
import 'package:flip_card/flip_card.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';
class TestFlip extends StatefulWidget {
const TestFlip({Key? key}) : super(key: key);
@override
_TestFlipState createState() => _TestFlipState();
}
class _TestFlipState extends State<TestFlip> {
final player = AudioPlayer();
List _items = [];
Future<void> readJson() async {
final String response = await rootBundle.loadString('assets/words.json');
final data = await json.decode(response);
setState(() {
_items = data["items"];
});
}
@override
void initState() {
// TODO: implement initState
readJson();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _items.length,
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
playSound('a070.mp3');
},
child: _HomeScreenCard(_items[index]["name"],
_items[index]["description"], context),
);
},
),
),
ElevatedButton(
onPressed: () {
playSound('a070.mp3');
},
child: Text('sala'))
],
),
),
);
}
Widget _HomeScreenCardFront(String text, context) {
return Container(
height: 100,
alignment: Alignment.center,
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
// width: 200,
child: Text(text),
);
}
Widget _HomeScreenCardBack(String text, context) {
return Container(
height: 100,
alignment: Alignment.center,
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
// color: Theme.of(context).primaryColor,
borderRadius: BorderRadius.circular(10),
),
// width: 200,
child: Text(text),
);
}
Widget _HomeScreenCard(String textFront, String textBack, context) {
return FlipCard(
fill: Fill.fillBack,
direction: FlipDirection.HORIZONTAL, // default
front: _HomeScreenCardFront(textFront, context),
back: _HomeScreenCardBack(textBack, context),
);
}
playSound(String sound) async {
await player.play(AssetSource(sound));
}
}
2
Answers
In your case, the
FlipCard
widget has a handy functiononFlip
that is needed by you, not an extraInkWell
widget, you should play your sound in there.To add more spice to this answer, you should name your variables and methods with lowercase lowerCamelCase letters, which is a convention for Dart language. You can, and frankly should, use the underscore before the variable/method if that’s meant to be a private one, but the following letter should start with a lowercase.
You can try looking into linters that are useful to learn and apply these cases (try maybe very_good_analysis).
replace your code by this, and it should work’s as expected
what i did?
the flipCard widget already have a atributte for when the card flips
its’ called onFlipDone:
there you’ll set the method to reproduce the sound