Ad

How Can I Flip My Card And At The Same Time I Can Click The Picture To Produce Sounds?

- 1 answer

I am new to flutter and I am creating a flashcard that when I long-press the picture, will produce sounds. I did that. My problem is how can I use a flip since it is a flashcard, it has a front and it has a back picture. each picture has its distinct sound. I also used a carousel in Pub dev ( carousel, flip card). I used a button, but it didn't work. I got an error. It says that the global key is used multiple times. So it's a failed plan. I also thought of creating a button to scroll pictures but it did not work. How can I flip a card and produce sound? This is my code if you have questions, please ask I will answer just to solve this. Thank You

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:baybay_app/FlashCards/FlashcardsList.dart';
import 'package:flip_card/flip_card.dart';

class Flashcards extends StatefulWidget {
  final List<FlashcardsList> _flashCardsList = flashcardsList;
  @override
  _FlashcardsState createState() => _FlashcardsState();
}

class _FlashcardsState extends State<Flashcards> {
  CarouselController buttonCarouselController = CarouselController();
  List<FlashcardsList> flashCardsList;
  @override
  void initState() {
    super.initState();
    flashCardsList = widget._flashCardsList;
  }

  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title:Text('Sample Carousel')),
    body: Column(
        children: <Widget>[

          CarouselSlider.builder(
            itemBuilder:(context, index){

              return
                Card(
                  child:FlipCard(
                    front: ListTile(

                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures1)
                      ),
                  ),



                    back: ListTile(

                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures2)
                      ),
                    ),
                  ),


                );



            },
            itemCount: widget._flashCardsList.length,
            options: CarouselOptions(

              autoPlay: false,
              enlargeCenterPage: true,
              viewportFraction: 0.9,
              aspectRatio: 2.0,
              initialPage: 2,
            ),

          ),
        ]

    ),

      );
      void onPlayAudio(index) async{
        AssetsAudioPlayer assetsAudioPlayer = AssetsAudioPlayer();
        assetsAudioPlayer.open(
            Audio(widget._flashCardsList[index].sound1)
        );
      }
      void PlayAudio(index) async{
        AssetsAudioPlayer assetsAudioPlayer = AssetsAudioPlayer();
        assetsAudioPlayer.open(
            Audio(widget._flashCardsList[index].sound2)
        );
      }
    }

'''

I also have a list of pictures to put on the flashcard.

Ad

Answer

You can wrap your Card with the InkWell widget. And you can handle long press on the Card. It will look like this:

 Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Sample Carousel')),
        body: Column(children: <Widget>[
          CarouselSlider.builder(
            itemBuilder: (context, index) {
              return InkWell(
                onLongPress: () {
                  onPlayAudio(index);
                },
                child: Card(
                  child: FlipCard(
                    front: ListTile(
                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures1)),
                    ),
                    back: ListTile(
                      title: Image(
                          image: AssetImage(
                              widget._flashCardsList[index].pictures2)),
                    ),
                  ),
                ),
              );
            },
            itemCount: widget._flashCardsList.length,
            options: CarouselOptions(
              autoPlay: false,
              enlargeCenterPage: true,
              viewportFraction: 0.9,
              aspectRatio: 2.0,
              initialPage: 2,
            ),
          ),
        ]),
      );

Ad
source: stackoverflow.com
Ad