diff --git a/README.md b/README.md index 4a77689..138309a 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ | | | | | :----: | :---:| :---:| -|![img1](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page1.gif) | ![img2](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page2.webp)| ![img3](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page1.gif)| +|![img1](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page1.gif) | ![img2](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page2.webp)| ![img3](https://github.com/DingMouRen/flutter_ui/blob/master/assets/screenShot/page3.gif)| ### UI diff --git a/assets/image/mp3_3_1.png b/assets/image/mp3_3_1.png new file mode 100644 index 0000000..1805084 Binary files /dev/null and b/assets/image/mp3_3_1.png differ diff --git a/assets/image/mp3_3_2.png b/assets/image/mp3_3_2.png new file mode 100644 index 0000000..d57e00f Binary files /dev/null and b/assets/image/mp3_3_2.png differ diff --git a/assets/image/mp3_3_3.jpg b/assets/image/mp3_3_3.jpg new file mode 100644 index 0000000..e78835d Binary files /dev/null and b/assets/image/mp3_3_3.jpg differ diff --git a/assets/screenShot/page3.gif b/assets/screenShot/page3.gif new file mode 100644 index 0000000..bd713e6 Binary files /dev/null and b/assets/screenShot/page3.gif differ diff --git a/lib/pages/page3/button.dart b/lib/pages/page3/button.dart deleted file mode 100644 index 39e74c3..0000000 --- a/lib/pages/page3/button.dart +++ /dev/null @@ -1,57 +0,0 @@ -import 'package:flutter/material.dart'; - -class MyButton extends StatelessWidget { - - var icon; - - MyButton({ - Key? key, - this.icon, - }) : super(key: key); - - @override - Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.all(4), - child: Container( - - padding: EdgeInsets.all(20), - child: Icon( - icon, - size: 37, - color: Colors.grey[800], - ), - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.grey[300], - boxShadow: [ - BoxShadow( - color: Colors.grey[600]!, - offset: Offset(4.0, 4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - BoxShadow( - color: Colors.white, - offset: Offset(-4.0, -4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - ], - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Colors.grey[200]!, - Colors.grey[300]!, - Colors.grey[400]!, - Colors.grey[500]!, - ], - stops: [ - 0.1, - 0.3, - 0.8, - 1 - ])), - ), - ); - } -} diff --git a/lib/pages/page3/buttontapped.dart b/lib/pages/page3/buttontapped.dart deleted file mode 100644 index 859bdc6..0000000 --- a/lib/pages/page3/buttontapped.dart +++ /dev/null @@ -1,94 +0,0 @@ -import 'package:flutter/material.dart'; - -class ButtonTapped extends StatelessWidget{ - - var icon; - - ButtonTapped({ - Key? key, - this.icon, - }) : super(key: key); - - @override - Widget build(BuildContext context) { - return Padding( - padding: EdgeInsets.all(4), - child: Container( - - padding: EdgeInsets.all(5), - child: Container( - padding: EdgeInsets.all(20), - child: Icon(icon, size: 35, color: Colors.grey[700],), - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.grey[300], - boxShadow: [ - BoxShadow( - color: Colors.white, - offset: Offset(4.0, 4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - BoxShadow( - color: Colors.grey[600]!, - offset: Offset(-4.0, -4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - ], - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Colors.grey[700]!, - Colors.grey[600]!, - Colors.grey[500]!, - Colors.grey[200]!, - ], - stops: [ - 0, - 0.1, - 0.3, - 1 - ] - ) - ), - - ), - - decoration: BoxDecoration( - shape: BoxShape.circle, - color: Colors.grey[300], - boxShadow: [ - BoxShadow( - color: Colors.grey[600]!, - offset: Offset(4.0, 4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - BoxShadow( - color: Colors.white, - offset: Offset(-4.0, -4.0), - blurRadius: 15.0, - spreadRadius: 1.0), - ], - gradient: LinearGradient( - begin: Alignment.topLeft, - end: Alignment.bottomRight, - colors: [ - Colors.grey[200]!, - Colors.grey[300]!, - Colors.grey[400]!, - Colors.grey[500]!, - ], - stops: [ - 0.1, - 0.3, - 0.8, - 1 - ] - ) - ), - - ), - ); - } - -} \ No newline at end of file diff --git a/lib/pages/page3/event/mp3_index_event.dart b/lib/pages/page3/event/mp3_index_event.dart new file mode 100644 index 0000000..507df94 --- /dev/null +++ b/lib/pages/page3/event/mp3_index_event.dart @@ -0,0 +1,5 @@ +class Mp3IndexEvent{ + final int index; + + Mp3IndexEvent(this.index); +} \ No newline at end of file diff --git a/lib/pages/page3/page_3.dart b/lib/pages/page3/page_3.dart index cef55ee..38f36b1 100644 --- a/lib/pages/page3/page_3.dart +++ b/lib/pages/page3/page_3.dart @@ -1,127 +1,285 @@ +import 'dart:math'; + import 'package:flutter/material.dart'; -import 'package:flutter_ui/pages/page3/buttontapped.dart'; +import 'package:flutter_ui/pages/page3/event/mp3_index_event.dart'; +import 'package:flutter_ui/pages/page3/play_page_3.dart'; +import 'package:flutter_ui/pages/page3/song_3.dart'; +import 'package:flutter_ui/pages/page3/song_data.dart'; -import 'button.dart'; +import '../../config/application.dart'; +import '../../neumorphic/decoration/neumorphic_emboss_decoration_painter.dart'; +import '../../neumorphic/neumorphic_box_shape.dart'; +import '../../neumorphic/widget/button.dart'; +import '../../neumorphic/widget/container.dart'; class Page3 extends StatefulWidget { @override State createState() => _Page3State(); } -class _Page3State extends State { +class _Page3State extends State with SingleTickerProviderStateMixin{ + Song3? _currentSong; + AnimationController? _controller ; + Animation? _animation; - // SET ICONS HERE + @override + void initState() { + super.initState(); + _controller = AnimationController(duration:Duration(seconds: 6),vsync: this) + ..addStatusListener((status) { + switch(status){ + case AnimationStatus.completed: + _controller!.repeat(); + break; + default: + break; + } + }); + _animation = Tween(begin: 0.0,end: 2.0 * pi).animate(_controller!); - var icons1 = Icons.home; - var icons2 = Icons.settings; - var icons3 = Icons.favorite; - var icons4 = Icons.message; + Application.eventBus.on().listen((event) { + _currentSong = songData3[event.index]; + if(_currentSong!.state == PlayingState.PLAYING){ + _controller!.forward(); + }else{ + _controller!.stop(); + } + setState(() { - // + }); + }); + } - bool buttonPressed1 = false; - bool buttonPressed2 = false; - bool buttonPressed3 = false; - bool buttonPressed4 = false; + @override + Widget build(BuildContext context) { + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + tileMode: TileMode.clamp, + colors: [ + Color.fromARGB(255, 224, 234, 253), + Color.fromARGB(255, 255, 255, 255) + ]), + ), + child: _getBody(context), + ), + ); + } - void _letsPress1() { - setState(() { - buttonPressed1 = true; - buttonPressed2 = false; - buttonPressed3 = false; - buttonPressed4 = false; - }); + _getBody(BuildContext context) { + return Container( + alignment: Alignment.center, + child: Column( + children: [ + SizedBox( + height: 50, + ), + _getTitle(context), + SizedBox( + height: 60, + ), + _getLayoutAction(context), + SizedBox( + height: 40, + ), + _getList(context), + ], + ), + ); } - void _letsPress2() { - setState(() { - buttonPressed1 = false; - buttonPressed2 = true; - buttonPressed3 = false; - buttonPressed4 = false; - }); + _getTitle(BuildContext context) { + return Text( + _currentSong == null ? 'SKIN · FLUME' : _currentSong!.name!, + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 12, + color: Color.fromARGB(255, 180, 194, 217)), + ); } - void _letsPress3() { - setState(() { - buttonPressed1 = false; - buttonPressed2 = false; - buttonPressed3 = true; - buttonPressed4 = false; - }); + _getLayoutAction(BuildContext context) { + return Container( + margin: EdgeInsets.only(left: 10, right: 10), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + NeumorphicButton( + onPressed: () {}, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(120, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 6, + intensity: 1), + child: Container( + width: 20, + height: 20, + color: Colors.transparent, + child: Icon( + Icons.favorite, + color: Color.fromARGB(255, 162, 177, 202), + size: 15, + ), + ), + ), + Hero( + tag: "music_cover", + child: Neumorphic( + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 4, color: Color.fromARGB(255, 207, 218, 235)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 6, + intensity: 1), + child: AnimatedBuilder( + child: Image.asset( + _currentSong == null?'assets/image/mp3_3_3.jpg':_currentSong!.cover!, + width: 150, + height: 150, + fit: BoxFit.cover, + ), + animation: _animation!, + builder: (context,child){ + return Transform( + alignment: Alignment.center, + // transform: Matrix4.rotationZ(_animation_1.value), + transform: Matrix4.rotationZ(_animation!.value), + child: child, + ); + }, + ), + ), + ), + NeumorphicButton( + onPressed: () {}, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(120, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 6, + intensity: 1), + child: Container( + width: 20, + height: 20, + color: Colors.transparent, + child: Icon( + Icons.more_horiz, + color: Color.fromARGB(255, 162, 177, 202), + size: 15, + ), + ), + ), + ], + ), + ); } - void _letsPress4() { - setState(() { - buttonPressed1 = false; - buttonPressed2 = false; - buttonPressed3 = false; - buttonPressed4 = true; - }); + _getList(BuildContext context) { + return Expanded( + child: ListView.builder( + itemCount: songData3.length, + itemBuilder: (context, index) { + return _getItem(songData3[index]); + }), + ); } - @override - Widget build(BuildContext context) { - return Scaffold( - backgroundColor: Colors.grey[300], - body: Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - Padding( - padding: EdgeInsets.all(20), - child: Row( - children: [ - Expanded( - child: GestureDetector( - // FIRST BUTTON - onTap: _letsPress1, - child: buttonPressed1 - ? ButtonTapped( - icon: icons1, - ) - : MyButton( - icon: icons1, - )), - ), - Expanded( - child: GestureDetector( - // SECOND BUTTON - onTap: _letsPress2, - child: buttonPressed2 - ? ButtonTapped( - icon: icons2, - ) - : MyButton( - icon: icons2, - )), - ), - Expanded( - child: GestureDetector( - // THIRD BUTTON - onTap: _letsPress3, - child: buttonPressed3 - ? ButtonTapped( - icon: icons3, - ) - : MyButton( - icon: icons3, - )), + _getItem(Song3 song) { + return InkWell( + onTap: () { + songData3.forEach((element) { + element.state = PlayingState.RESET; + }); + song.state = PlayingState.PLAYING; + _currentSong = song; + _controller!.forward(); + setState(() {}); + Navigator.of(context).push(MaterialPageRoute(builder: (context)=>PlayPage3(song,'music_cover'))); + }, + child: Container( + margin: EdgeInsets.all(10), + padding: EdgeInsets.all(10), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + color: song.state == PlayingState.PLAYING + ? Color.fromARGB(255, 209, 222, 243) + : Colors.transparent, + ), + height: 80, + child: Stack( + children: [ + Align( + alignment: Alignment.centerLeft, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + song.name!, + style: TextStyle( + color: Color.fromARGB(255, 125, 140, 164), + fontSize: 15), ), - Expanded( - child: GestureDetector( - // FOURTH BUTTON - onTap: _letsPress4, - child: buttonPressed4 - ? ButtonTapped( - icon: icons4, - ) - : MyButton( - icon: icons4, - )), + SizedBox( + height: 2, ), + Text( + song.singer!, + style: TextStyle( + color: Color.fromARGB(255, 193, 203, 220), + fontSize: 12), + ) ], ), + ), + Align( + alignment: Alignment.centerRight, + child: NeumorphicButton( + onPressed: () { + song.state = PlayingState.STOP; + _currentSong = null; + _controller!.stop(); + setState(() {}); + }, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, + color: song.state == PlayingState.PLAYING + ? Color.fromARGB(120, 111, 136, 255) + : Color.fromARGB(120, 213, 224, 241)), + shape: song.state == PlayingState.PLAYING + ? NeumorphicShape.concave + : NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: song.state == PlayingState.PLAYING + ? Color.fromARGB(255, 126, 156, 255) + : Color.fromARGB(255, 235, 244, 255), + depth: 6, + intensity: 1), + child: Container( + width: 16, + height: 16, + child: Icon( + song.state == PlayingState.PLAYING + ? Icons.pause + : Icons.play_arrow, + color: song.state == PlayingState.PLAYING + ? Colors.white + : Color.fromARGB(255, 162, 177, 202), + size: 16, + ), + ), + ), ) ], ), diff --git a/lib/pages/page3/play_page_3.dart b/lib/pages/page3/play_page_3.dart new file mode 100644 index 0000000..497714b --- /dev/null +++ b/lib/pages/page3/play_page_3.dart @@ -0,0 +1,415 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_ui/pages/page3/event/mp3_index_event.dart'; +import 'package:flutter_ui/pages/page3/song_3.dart'; +import 'package:flutter_ui/pages/page3/song_data.dart'; + +import '../../config/application.dart'; +import '../../neumorphic/neumorphic_box_shape.dart'; +import '../../neumorphic/theme/theme.dart'; +import '../../neumorphic/widget/button.dart'; +import '../../neumorphic/widget/container.dart'; +import '../../neumorphic/widget/container.dart'; +import '../../neumorphic/widget/slider.dart'; + +class PlayPage3 extends StatefulWidget { + Song3? song; + String? heroTag; + + PlayPage3(this.song,this.heroTag); + + @override + State createState() { + return _PlayPage3State(); + } +} + +class _PlayPage3State extends State with SingleTickerProviderStateMixin{ + double _percent = 2; + AnimationController? _controller ; + Animation? _animation; + @override + void initState() { + super.initState(); + _controller = AnimationController(duration:Duration(seconds: 6),vsync: this) + ..addStatusListener((status) { + switch(status){ + case AnimationStatus.completed: + _controller!.repeat(); + break; + default: + break; + } + }); + _animation = Tween(begin: 0.0,end: 2.0 * pi).animate(_controller!); + _controller!.forward(); + } + + @override + void dispose() { + super.dispose(); + _controller?.dispose(); + } + + @override + Widget build(BuildContext context) { + double screenWidth = MediaQuery.of(context).size.width; + return Scaffold( + body: Container( + decoration: BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + tileMode: TileMode.clamp, + colors: [ + Color.fromARGB(255, 224, 234, 253), + Color.fromARGB(255, 255, 255, 255) + ]), + ), + child: _getBody(context, screenWidth), + ), + ); + } + + _getBody(BuildContext context, double screenWidth) { + return Column( + children: [ + SizedBox( + height: 40, + ), + _getLayoutBar(context), + SizedBox( + height: 40, + ), + _getSongInfo(context, screenWidth), + SizedBox( + height: 40, + ), + _getBottomActions(context), + ], + ); + } + + /// titleBar布局 + _getLayoutBar(BuildContext context) { + return Container( + margin: EdgeInsets.only(left: 20, right: 20), + child: Stack( + alignment: Alignment.center, + children: [ + Align( + alignment: Alignment.centerLeft, + child: NeumorphicButton( + onPressed: () { + Navigator.pop(context); + }, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(120, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 6, + intensity: 1), + child: Container( + width: 20, + height: 20, + color: Colors.transparent, + child: Icon( + Icons.keyboard_backspace_rounded, + color: Color.fromARGB(255, 162, 177, 202), + size: 18, + ), + ), + ), + ), + Text( + 'PLAYING NOW', + style: TextStyle( + fontWeight: FontWeight.w400, + fontSize: 12, + color: Color.fromARGB(255, 180, 194, 217)), + ), + Align( + alignment: Alignment.centerRight, + child: NeumorphicButton( + onPressed: () {}, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(120, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 6, + intensity: 1), + child: Container( + width: 20, + height: 20, + color: Colors.transparent, + child: Icon( + Icons.dehaze_rounded, + color: Color.fromARGB(255, 162, 177, 202), + size: 18, + ), + ), + ), + ), + ], + ), + ); + } + + ///歌曲信息 + _getSongInfo(BuildContext context, double screenWidth) { + return Container( + margin: EdgeInsets.only(left: 20, right: 20), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Hero( + tag: widget.heroTag!, + child: Neumorphic( + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 8, color: Color.fromARGB(255, 207, 218, 235)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(255, 222, 231, 246), + depth: 20, + intensity: 1), + child: AnimatedBuilder( + child: Image.asset( + widget.song!.cover!, + width: screenWidth / 100 * 74, + height: screenWidth / 100 * 74, + fit: BoxFit.cover, + ), + animation: _animation!, + builder: (context,child){ + return Transform( + alignment: Alignment.center, + // transform: Matrix4.rotationZ(_animation_1.value), + transform: Matrix4.rotationZ(_animation!.value), + child: child, + ); + }, + ), + ), + ), + SizedBox( + height: 50, + ), + Text( + widget.song!.name!, + style: TextStyle( + fontWeight: FontWeight.w500, + color: Color.fromARGB(255, 125, 140, 164), + fontSize: 30), + ), + SizedBox( + height: 10, + ), + Text( + widget.song!.singer!, + style: TextStyle( + color: Color.fromARGB(255, 193, 203, 220), fontSize: 14), + ), + SizedBox( + height: 40, + ), + _getMusicPercent(context), + _getSlider(context), + ], + ), + ); + } + + ///获取slider + _getSlider(BuildContext context) { + return NeumorphicSlider( + min: 0, + max: 100, + value: _percent, + height: 6, + onChanged: (percent) { + _percent = percent; + setState(() {}); + }, + style: SliderStyle( + accent: Color.fromARGB(255, 140, 171, 255), + variant: Color.fromARGB(255, 140, 171, 255), + ), + thumb: Neumorphic( + style: NeumorphicStyle( + intensity: 1, + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + ), + child: Container( + width: 26, + height: 26, + color: Color.fromARGB(255, 235, 246, 255), + alignment: Alignment.center, + child: Container( + width: 8, + height: 8, + child: CircleAvatar( + backgroundColor: Color.fromARGB(255, 140, 171, 255), + ), + ), + ), + )); + } + + _getMusicPercent(BuildContext context) { + return Container( + child: Stack( + children: [ + Align( + alignment: Alignment.centerLeft, + child: Text( + '0:02', + style: TextStyle( + fontSize: 10, color: Color.fromARGB(255, 172, 185, 206)), + ), + ), + Align( + alignment: Alignment.centerRight, + child: Text( + '3:46', + style: TextStyle( + fontSize: 10, color: Color.fromARGB(255, 172, 185, 206)), + ), + ), + ], + ), + ); + } + + ///暂停，前一首，后一首 + _getBottomActions(BuildContext context) { + return Container( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + NeumorphicButton( + onPressed: () { + int index = songData3.indexOf(widget.song!); + if(index > 0){ + index = index - 1; + widget.song = songData3[index]; + songData3.forEach((element) { + element.state = PlayingState.RESET; + }); + widget.song!.state = PlayingState.PLAYING; + Application.eventBus.fire(Mp3IndexEvent(index)); + } + + setState(() { + + }); + }, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(80, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(120, 232, 242, 255), + depth: 6, + intensity: 1), + child: Container( + width: 50, + height: 50, + color: Colors.transparent, + child: Icon( + Icons.fast_rewind_rounded, + color: Color.fromARGB(255, 162, 177, 202), + size: 30, + ), + ), + ), + NeumorphicButton( + onPressed: () { + if (widget.song!.state == PlayingState.PLAYING) { + widget.song!.state = PlayingState.STOP; + _controller!.stop(); + } else { + widget.song!.state = PlayingState.PLAYING; + _controller!.forward(); + } + + int index = songData3.indexOf(widget.song!); + Application.eventBus.fire(Mp3IndexEvent(index)); + + setState(() { + + }); + }, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(80, 213, 224, 241)), + shape: widget.song!.state == PlayingState.PLAYING + ? NeumorphicShape.concave + : NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: widget.song!.state == PlayingState.PLAYING + ? Color.fromARGB(255, 126, 156, 255) + : Color.fromARGB(255, 235, 244, 255), + depth: 6, + intensity: 1), + child: Container( + width: 50, + height: 50, + color: Colors.transparent, + child: Icon( + widget.song!.state == PlayingState.PLAYING + ? Icons.pause + : Icons.play_arrow, + color: widget.song!.state == PlayingState.PLAYING + ? Colors.white + : Color.fromARGB(255, 162, 177, 202), + size: 30, + ), + ), + ), + NeumorphicButton( + onPressed: () { + int index = songData3.indexOf(widget.song!); + if(index < songData3.length){ + widget.song = songData3[index + 1]; + songData3.forEach((element) { + element.state = PlayingState.RESET; + }); + widget.song!.state = PlayingState.PLAYING; + Application.eventBus.fire(Mp3IndexEvent(index + 1)); + } + setState(() { + + }); + }, + style: NeumorphicStyle( + border: NeumorphicBorder( + width: 3, color: Color.fromARGB(80, 213, 224, 241)), + shape: NeumorphicShape.flat, + boxShape: NeumorphicBoxShape.circle(), + color: Color.fromARGB(120, 232, 242, 255), + depth: 6, + intensity: 1), + child: Container( + width: 50, + height: 50, + color: Colors.transparent, + child: Icon( + Icons.fast_forward_rounded, + color: Color.fromARGB(255, 162, 177, 202), + size: 30, + ), + ), + ), + ], + ), + ); + } +} diff --git a/lib/pages/page3/song_3.dart b/lib/pages/page3/song_3.dart new file mode 100644 index 0000000..d403b36 --- /dev/null +++ b/lib/pages/page3/song_3.dart @@ -0,0 +1,11 @@ +class Song3{ + String? name; + String? singer; + String? cover; + PlayingState state = PlayingState.RESET; + + Song3(this.name, this.singer, this.cover); + + +} +enum PlayingState{PLAYING,STOP,RESET} diff --git a/lib/pages/page3/song_data.dart b/lib/pages/page3/song_data.dart new file mode 100644 index 0000000..69a751e --- /dev/null +++ b/lib/pages/page3/song_data.dart @@ -0,0 +1,22 @@ +import 'package:flutter_ui/pages/page3/song_3.dart'; + +List songData3 = [ + Song3('Helix', 'Flume', 'assets/image/mp3_3_1.png'), + Song3('Never Be Like You', 'Flume · Kai', 'assets/image/mp3_3_2.png'), + Song3('Lost It', 'Flume · Vic Mensa', 'assets/image/mp3_3_3.jpg'), + Song3('Numb & Getting Colder', 'Flume · KUCKA', 'assets/image/mp3_3_1.png'), + Song3('Say It', 'Flume · ToveLo', 'assets/image/mp3_3_2.png'), + Song3('Wall F*ck', 'Flume', 'assets/image/mp3_3_3.jpg'), + Song3('Helix', 'Flume', 'assets/image/mp3_3_1.png'), + Song3('Never Be Like You', 'Flume · Kai', 'assets/image/mp3_3_2.png'), + Song3('Lost It', 'Flume · Vic Mensa', 'assets/image/mp3_3_3.jpg'), + Song3('Numb & Getting Colder', 'Flume · KUCKA', 'assets/image/mp3_3_1.png'), + Song3('Say It', 'Flume · ToveLo', 'assets/image/mp3_3_2.png'), + Song3('Wall F*ck', 'Flume', 'assets/image/mp3_3_3.jpg'), + Song3('Helix', 'Flume', 'assets/image/mp3_3_1.png'), + Song3('Never Be Like You', 'Flume · Kai', 'assets/image/mp3_3_2.png'), + Song3('Lost It', 'Flume · Vic Mensa', 'assets/image/mp3_3_3.jpg'), + Song3('Numb & Getting Colder', 'Flume · KUCKA', 'assets/image/mp3_3_1.png'), + Song3('Say It', 'Flume · ToveLo', 'assets/image/mp3_3_2.png'), + Song3('Wall F*ck', 'Flume', 'assets/image/mp3_3_3.jpg'), +]; \ No newline at end of file