본문 바로가기
개발/Flutter

Flutter 플러터 음악 앱 만들기 Music

by SPNK 2024. 3. 15.
반응형

코드 작성

import 'package:flutter/material.dart';

void main() {
  runApp(MyMusicApp());
}

class MyMusicApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '나의 음악 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MusicPlayerPage(),
    );
  }
}

class MusicPlayerPage extends StatefulWidget {
  @override
  _MusicPlayerPageState createState() => _MusicPlayerPageState();
}

class _MusicPlayerPageState extends State<MusicPlayerPage> {
  bool isPlaying = false;

  // 음악 재생/일시정지 상태를 토글하는 함수
  void playPauseMusic() {
    setState(() {
      isPlaying = !isPlaying;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('음악 재생기'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '곡 제목',
              style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 20.0),
            Image.asset(
              'assets/album_cover.jpg', // 앨범 커버 이미지
              width: 200.0,
              height: 200.0,
            ),
            SizedBox(height: 20.0),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.skip_previous),
                  onPressed: () {
                    // 이전 곡으로 이동하는 코드를 여기에 추가
                  },
                ),
                IconButton(
                  icon: Icon(isPlaying ? Icons.pause : Icons.play_arrow),
                  onPressed: () {
                    playPauseMusic(); // 음악 재생/일시정지를 토글하는 함수 호출
                  },
                  iconSize: 64.0,
                ),
                IconButton(
                  icon: Icon(Icons.skip_next),
                  onPressed: () {
                    // 다음 곡으로 이동하는 코드를 여기에 추가
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}
반응형

댓글