CODEWITHSUNDEEP
androidflutterdartcarouselflip
John Ryle Singh
John Ryle Singh

Reputation: 55

How can I flip my card and at the same time I can click the picture to produce sounds?

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.

Upvotes: 1

Views: 311

Answers (1)

Akif
Akif

Reputation: 7660

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,
            ),
          ),
        ]),
      );

Upvotes: 1

Related Questions