213 lines
7.5 KiB
Dart
213 lines
7.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:flame_audio/flame_audio.dart'; // Import Flame Audio
|
|
import 'package:ta_tahsin/core/theme.dart';
|
|
import '../materi/model/model_data_materi.dart';
|
|
import 'model/model_data_latihan.dart';
|
|
|
|
class LatihanPage extends StatefulWidget {
|
|
const LatihanPage({super.key});
|
|
|
|
@override
|
|
_LatihanPageState createState() => _LatihanPageState();
|
|
}
|
|
|
|
class _LatihanPageState extends State<LatihanPage> {
|
|
int currentStep = 0; // Start with the first step
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
if (currentStep >= latihanList.length) {
|
|
currentStep = latihanList.length - 1; // Stay at last step if out of bounds
|
|
}
|
|
|
|
final arabicText = latihanList[currentStep]['arabicText'];
|
|
final latinText = latihanList[currentStep]['latinText'];
|
|
final audioFile = latihanList[currentStep]['audioFile']; // Get the audio file from data
|
|
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
leading: IconButton(
|
|
icon: const Icon(Icons.close),
|
|
onPressed: () {
|
|
context.go('/materi', extra: {
|
|
'title': 'Makharijul Huruf',
|
|
'description': 'tempat keluarnya huruf',
|
|
'subMateri': materiList[0]['subMateri'],
|
|
});
|
|
},
|
|
),
|
|
actions: [
|
|
Expanded(
|
|
child: Center(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: List.generate(4, (index) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 4.0),
|
|
child: CircleAvatar(
|
|
radius: 12,
|
|
backgroundColor: index <= currentStep
|
|
? secondPrimaryColor
|
|
: Colors.grey,
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
body: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.lightbulb,
|
|
color: secondPrimaryColor,
|
|
size: 40,
|
|
),
|
|
const SizedBox(width: 5),
|
|
Container(
|
|
padding: const EdgeInsets.all(5),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: Colors.grey,
|
|
width: 1,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'Dengarkan, ikuti dan rekam',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: blackColor,
|
|
),
|
|
textAlign: TextAlign.start,
|
|
),
|
|
Text(
|
|
'pelafalanmu terhadap lafadz ini',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
color: blackColor,
|
|
),
|
|
textAlign: TextAlign.start,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 35.0, vertical: 40.0),
|
|
margin: const EdgeInsets.symmetric(vertical: 10),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(15),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.1),
|
|
spreadRadius: 5,
|
|
blurRadius: 10,
|
|
),
|
|
],
|
|
color: Colors.white,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
const Padding(
|
|
padding: EdgeInsets.only(bottom: 40.0),
|
|
child: Text(
|
|
"Ucapkan potongan kata ini",
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
arabicText,
|
|
style: const TextStyle(
|
|
fontSize: 30,
|
|
color: Colors.red,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
const SizedBox(height: 20),
|
|
Text(
|
|
latinText,
|
|
style: TextStyle(
|
|
fontSize: 15,
|
|
color: Colors.black,
|
|
fontStyle: FontStyle.italic,
|
|
),
|
|
),
|
|
const SizedBox(height: 30),
|
|
IconButton(
|
|
onPressed: () {
|
|
// Play the audio file when the icon is clicked
|
|
FlameAudio.play(audioFile); // Play the audio using flame_audio
|
|
},
|
|
icon: Icon(
|
|
Icons.volume_up,
|
|
size: 50,
|
|
color: secondPrimaryColor,
|
|
),
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 5.0),
|
|
)
|
|
],
|
|
),
|
|
),
|
|
Expanded(
|
|
child: Align(
|
|
alignment: Alignment.bottomCenter,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
child: ElevatedButton(
|
|
onPressed: () {
|
|
setState(() {
|
|
if (currentStep < latihanList.length - 1) {
|
|
currentStep++;
|
|
}
|
|
});
|
|
|
|
context.go(
|
|
'/pelafalan',
|
|
extra: {
|
|
'currentStep': currentStep,
|
|
},
|
|
);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: secondPrimaryColor,
|
|
shape: const CircleBorder(),
|
|
padding: const EdgeInsets.all(16),
|
|
),
|
|
child: const Icon(
|
|
Icons.mic,
|
|
size: 40,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|