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.
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,
),
),
]),
);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments