253 lines
8.3 KiB
Dart
253 lines
8.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:audioplayers/audioplayers.dart';
|
|
|
|
class PoetScreen extends StatefulWidget {
|
|
final int selectedIndex;
|
|
|
|
const PoetScreen({super.key, required this.selectedIndex});
|
|
|
|
@override
|
|
State<PoetScreen> createState() => _PoetScreenState();
|
|
}
|
|
|
|
class _PoetScreenState extends State<PoetScreen> {
|
|
late String _backgroundImage;
|
|
final AudioPlayer _audioPlayer = AudioPlayer();
|
|
bool _isPlaying = false;
|
|
Duration _duration = Duration.zero;
|
|
Duration _position = Duration.zero;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_backgroundImage =
|
|
'assets/images/00${(widget.selectedIndex + 1).toString()}.jpg';
|
|
|
|
_audioPlayer.onPlayerStateChanged.listen((state) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_isPlaying = state == PlayerState.playing;
|
|
});
|
|
}
|
|
});
|
|
|
|
_audioPlayer.onDurationChanged.listen((newDuration) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_duration = newDuration;
|
|
});
|
|
}
|
|
});
|
|
|
|
_audioPlayer.onPositionChanged.listen((newPosition) {
|
|
if (mounted) {
|
|
setState(() {
|
|
_position = newPosition;
|
|
});
|
|
}
|
|
});
|
|
|
|
_setAudio();
|
|
}
|
|
|
|
Future<void> _setAudio() async {
|
|
try {
|
|
await _audioPlayer.setSource(AssetSource('audio/music.mp3'));
|
|
} catch (e) {
|
|
// Handle error, e.g., show a snackbar
|
|
print("Error setting audio source: $e");
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_audioPlayer.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
body: Stack(
|
|
children: [
|
|
// 배경 이미지
|
|
Positioned.fill(
|
|
child: Image.asset(
|
|
_backgroundImage,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
|
|
// 메인 콘텐츠
|
|
SafeArea(
|
|
child: Padding(
|
|
padding:
|
|
const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
// 상단 바 (뒤로가기, 제목, 새로고침)
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
IconButton(
|
|
onPressed: () {
|
|
// 이 버튼을 누르면 이전 화면으로 돌아갑니다.
|
|
Navigator.pop(context);
|
|
},
|
|
icon: const Icon(Icons.arrow_back, color: Colors.black),
|
|
),
|
|
IconButton(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.refresh, color: Colors.black),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 32),
|
|
|
|
// 시 제목
|
|
const Text(
|
|
'별을 보며',
|
|
style: TextStyle(
|
|
fontSize: 32,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
),
|
|
textAlign: TextAlign.left,
|
|
),
|
|
const SizedBox(height: 16),
|
|
|
|
// 시 본문
|
|
const Text(
|
|
'내 너무 별을 쳐다보아\n별들은 더럽히지 않았을까.\n\n내 너무 하늘을 쳐다보아\n하늘은 더럽히지 않았을까.\n\n별아, 어찌하라.\n이 세상 무엇을 쳐다보리.\n\nH 흔들리며 흔들리며 걸어가던 거리\n영망으로 술에 취해 쓰러지던 골목에서\n\n바라보며 너 눈물 같은 빛남\n가슴 어지러움 황홀히 헹구어 비치는\n이 찬란함마저 가질 수 없다면\n나는 무엇으로 가난하라.\n\n- 시집 『나의 나무가 너의 나무에게』, 오상사, 1985년',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: Colors.black87,
|
|
height: 1.5,
|
|
),
|
|
),
|
|
const SizedBox(height: 48),
|
|
|
|
// 추천의 글 박스
|
|
Container(
|
|
padding: const EdgeInsets.all(20.0),
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFF07B41).withOpacity(0.3),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: const Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
'추천의 글',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
SizedBox(height: 8),
|
|
Text(
|
|
'밤하늘과 별을 통해 우주와 상호 교감하며 시인으로서 끊임없는\n창작 열정, 내재적 갈등을 보여주는 작품으로 팍팍한 삶의 위로\n가 되는 이성선적 서정의 대표작입니다.',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: Colors.black87,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Spacer(), // Use Spacer to push controls to the bottom
|
|
|
|
// 하단 음악 제어
|
|
_buildMusicControls(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMusicControls() {
|
|
return Column(
|
|
children: [
|
|
Slider(
|
|
min: 0,
|
|
max: _duration.inSeconds.toDouble(),
|
|
value: _position.inSeconds.toDouble(),
|
|
onChanged: (value) async {
|
|
final position = Duration(seconds: value.toInt());
|
|
await _audioPlayer.seek(position);
|
|
},
|
|
activeColor: const Color(0xFFF07B41),
|
|
inactiveColor: Colors.grey,
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(_formatDuration(_position)),
|
|
Text(_formatDuration(_duration - _position)),
|
|
],
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
_buildCircularButton(Icons.replay_5, () {
|
|
final newPosition = _position - const Duration(seconds: 5);
|
|
_audioPlayer.seek(newPosition > Duration.zero ? newPosition : Duration.zero);
|
|
}),
|
|
const SizedBox(width: 16),
|
|
_buildCircularButton(_isPlaying ? Icons.pause : Icons.play_arrow, () {
|
|
if (_isPlaying) {
|
|
_audioPlayer.pause();
|
|
} else {
|
|
_audioPlayer.resume();
|
|
}
|
|
}),
|
|
const SizedBox(width: 16),
|
|
_buildCircularButton(Icons.forward_5, () {
|
|
final newPosition = _position + const Duration(seconds: 5);
|
|
_audioPlayer.seek(newPosition < _duration ? newPosition : _duration);
|
|
}),
|
|
],
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
String _formatDuration(Duration duration) {
|
|
String twoDigits(int n) => n.toString().padLeft(2, '0');
|
|
final hours = twoDigits(duration.inHours);
|
|
final minutes = twoDigits(duration.inMinutes.remainder(60));
|
|
final seconds = twoDigits(duration.inSeconds.remainder(60));
|
|
return [
|
|
if (duration.inHours > 0) hours,
|
|
minutes,
|
|
seconds,
|
|
].join(':');
|
|
}
|
|
|
|
// 원형 버튼을 만드는 헬퍼 함수
|
|
Widget _buildCircularButton(IconData icon, VoidCallback onPressed) {
|
|
return Container(
|
|
width: 50,
|
|
height: 50,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFFF07B41),
|
|
shape: BoxShape.circle,
|
|
border: Border.all(color: Colors.white, width: 2),
|
|
),
|
|
child: IconButton(
|
|
onPressed: onPressed,
|
|
icon: Icon(icon, color: Colors.white),
|
|
iconSize: 30,
|
|
),
|
|
);
|
|
}
|
|
} |