skip to Main Content

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


  1. In your case, the FlipCard widget has a handy function onFlip that is needed by you, not an extra InkWell widget, you should play your sound in there.

    ...
                  ListView.builder(
                    itemCount: _items.length,
                    itemBuilder: (BuildContext context, int index) {
                      // Remove the unneeded InkWell
                      return _HomeScreenCard(_items[index]["name"],
                          _items[index]["description"], context);
                    },
                  )
    ...
    Widget _HomeScreenCard(String textFront, String textBack, context) {
        return FlipCard(
          fill: Fill.fillBack,
          direction: FlipDirection.HORIZONTAL, // default
          // Use the already-given function here
          onFlip: () async {
            await playSound('a070.mp3');
          },
          front: _HomeScreenCardFront(textFront, context),
          back: _HomeScreenCardBack(textBack, context),
        );
      }
    ...
    

    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).

    Login or Signup to reply.
  2. 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 _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(
          onFlipDone: (value){
            playSound('a070.mp3');
          },
          fill: Fill.fillBack,
          direction: FlipDirection.HORIZONTAL, // default
    
          front: _HomeScreenCardFront(textFront, context),
          back: _HomeScreenCardBack(textBack, context),
        );
      }
    
      playSound(String sound) async {
        await player.play(AssetSource(sound));
      }
    }
    

    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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search