Skip to content

Commit

Permalink
feat: Simpler music list with pitch black theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashwinkey04
ashwinkey04 committed Mar 5, 2021
1 parent 67eef45 commit 2a2cca2
Show file tree
Hide file tree
Showing 5 changed files with 115 additions and 115 deletions.
8 changes: 4 additions & 4 deletions lib/provider/audio_helper.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,10 @@ String formatDuration(Duration d) {
Widget getAlbumArt(String albumArtWork, double width, BuildContext context) {
if (albumArtWork == null)
return Container(
color: Theme.of(context).dividerColor,
width: width * 0.15,
height: width * 0.15,
child: Icon(Icons.music_note_sharp, color: Theme.of(context).accentColor,));
color: Theme.of(context).accentColor,
width: 40,
height: 40,
child: Icon(Icons.music_note_sharp, size: 24, color: Theme.of(context).dividerColor,));
else
return Image(
image: FileImage(File(albumArtWork)),
Expand Down
154 changes: 76 additions & 78 deletions lib/provider/song_widget.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:raag/model/music_model.dart';
import 'package:raag/provider/player_provider.dart';
import 'package:raag/provider/theme.dart';
import 'package:raag/view/playback_controls.dart';

import 'audio_helper.dart';
Expand Down Expand Up @@ -31,99 +32,96 @@ class _SongWidgetState extends State<SongWidget> with TickerProviderStateMixin {

@override
Widget build(BuildContext context) {
final screenHeight = MediaQuery.of(context).size.height;
final screenWidth = MediaQuery.of(context).size.width;
final provider = Provider.of<PlayerProvider>(context);

return Stack(
return Column(
children: [
ListView.builder(
itemCount: widget.songList.length,
itemBuilder: (context, songIndex) {
Song song = widget.songList[songIndex];
if (song.displayName.contains(".mp3"))
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Theme.of(context).dividerColor, width: 0.7),
bottom: BorderSide(
color: Theme.of(context).dividerColor, width: 0.7),
),
),
child: Card(
elevation: 0,
color: Colors.transparent,
child: ListTile(
contentPadding: EdgeInsets.zero,
title: InkWell(
onTap: () {
if (provider.audioManagerInstance.isPlaying)
provider.audioManagerInstance.toPause();
provider.playerState = PlayerState.playing;
provider.audioManagerInstance
.start("file://${song.filePath}", song.title,
desc: song.displayName,
auto: true,
cover: song.albumArtwork)
.then((err) {
print(err);
});
playFABController.forward();
},
child: Row(
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: getAlbumArt(song.albumArtwork, screenWidth, context),
),
SizedBox(width: screenWidth * 0.03,),
Container(
width: MediaQuery
.of(context)
.size
.width * 0.7,
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
Flexible(
child: ListView.builder(
itemCount: widget.songList.length,
itemBuilder: (context, songIndex) {
Song song = widget.songList[songIndex];
if (song.displayName.contains(".mp3"))
return Column(
children: [
SizedBox(height: 10),
Container(
padding: EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration(
color: Theme.of(context).dividerColor.withOpacity(0.4),
borderRadius: BorderRadius.all(Radius.circular(24))
),
child: InkWell(
onTap: () {
if (provider.audioManagerInstance.isPlaying)
provider.audioManagerInstance.toPause();
provider.playerState = PlayerState.playing;
provider.audioManagerInstance
.start("file://${song.filePath}", song.title,
desc: song.displayName,
auto: true,
cover: song.albumArtwork)
.then((err) {
print(err);
});
playFABController.forward();
},
child: Card(
elevation: 0,
color: Colors.transparent,
child: ListTile(
contentPadding: EdgeInsets.zero,
title: Row(
children: <Widget>[
Text(song.title,
overflow: TextOverflow.ellipsis,
style: Theme
.of(context)
.textTheme
.headline3),
Text(song.artist,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2),
ClipRRect(
borderRadius: BorderRadius.circular(40),
child: getAlbumArt(song.albumArtwork, screenWidth, context),
),
SizedBox(width: screenWidth * 0.03,),
Container(
width: MediaQuery
.of(context)
.size
.width * 0.7,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(song.title,
overflow: TextOverflow.ellipsis,
style: Theme
.of(context)
.textTheme
.headline3),
Text(song.artist,
overflow: TextOverflow.ellipsis,
style: Theme.of(context)
.textTheme
.subtitle2),
],
),
),
SizedBox(width: 6),
Text(
parseToMinutesSeconds(
int.parse(song.duration)),
style: TextStyle(
fontSize: 11,
color: Colors.grey,
fontWeight: FontWeight.w500)),
style: durationTheme),
],
),
),
],
),
),
),
),
),
],
);
return SizedBox(
height: 0,
);
return SizedBox(
height: 0,
);
}),
}),
),
PlayBackControls(),
SizedBox(height: MediaQuery
.of(context)
.size
.height * 0.2,)
],
);
}
Expand Down
25 changes: 14 additions & 11 deletions lib/provider/theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ Color hex(String hexColor) {
}
}

TextStyle durationTheme =
TextStyle(fontSize: 11, color: Colors.grey, fontWeight: FontWeight.w500);

class Styles {
static ThemeData themeData(bool isDarkTheme, BuildContext context) {
return isDarkTheme ? AppTheme.lightTheme : AppTheme.darkTheme;
Expand All @@ -34,7 +37,7 @@ class AppTheme {
accentColor: hex('#415EB4'),
backgroundColor: hex('#D4D4D4'),
scaffoldBackgroundColor: hex('#D4D4D4'),
dividerColor: hex('999999'),
dividerColor: hex('ededed'),
appBarTheme: AppBarTheme(
color: hex('#D4D4D4'),
iconTheme: IconThemeData(
Expand All @@ -60,24 +63,24 @@ class AppTheme {
fontWeight: FontWeight.bold,
fontFamily: 'Alata'),
headline3:
TextStyle(color: hex('#415EB4'), fontSize: 20.0, fontFamily: 'Alata'),
TextStyle(color: hex('#415EB4'), fontSize: 18, fontFamily: 'Alata'),
subtitle1:
TextStyle(color: hex('5a6a99'), fontSize: 16, fontFamily: 'Alata'),
TextStyle(color: hex('5a6a99'), fontSize: 14, fontFamily: 'Alata'),
subtitle2: TextStyle(
color: Colors.black38,
fontSize: 14.0,
fontSize: 12.0,
),
),
);

//Dark theme data
static final ThemeData darkTheme = ThemeData(
backgroundColor: hex('262626'),
backgroundColor: hex('000000'),
accentColor: hex('809DF5'),
dividerColor: hex('404040'),
scaffoldBackgroundColor: hex('262626'),
scaffoldBackgroundColor: hex('000000'),
appBarTheme: AppBarTheme(
color: hex('262626'),
color: hex('000000'),
iconTheme: IconThemeData(
color: hex('809DF5'),
),
Expand All @@ -89,7 +92,7 @@ class AppTheme {
secondary: Colors.red,
),
cardTheme: CardTheme(
color: hex('262626'),
color: hex('000000'),
),
iconTheme: IconThemeData(
color: hex('#888888'),
Expand All @@ -101,12 +104,12 @@ class AppTheme {
fontWeight: FontWeight.bold,
fontFamily: 'Alata'),
headline3:
TextStyle(color: hex('809DF5'), fontSize: 20.0, fontFamily: 'Alata'),
TextStyle(color: hex('809DF5'), fontSize: 18, fontFamily: 'Alata'),
subtitle1:
TextStyle(color: hex('5a6a99'), fontSize: 16, fontFamily: 'Alata'),
TextStyle(color: hex('5a6a99'), fontSize: 14, fontFamily: 'Alata'),
subtitle2: TextStyle(
color: hex('D4D4D4'),
fontSize: 16.0,
fontSize: 12,
),
),
);
Expand Down
35 changes: 18 additions & 17 deletions lib/view/playback_controls.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ class _PlayBackControlsState extends State<PlayBackControls> {
Widget build(BuildContext context) {
var glowShadow = BoxShadow(
color: Theme.of(context).accentColor.withOpacity(0.3),
spreadRadius: 3,
spreadRadius: 5,
blurRadius: 9,
offset: Offset(0, 0), // changes position of shadow
);
Expand Down Expand Up @@ -83,28 +83,28 @@ class _PlayBackControlsState extends State<PlayBackControls> {
width: 2.5,
),
),
child: new Center(
child: RawMaterialButton(
shape: CircleBorder(),
child: RawMaterialButton(
shape: CircleBorder(),
child: Center(
child: AnimatedIcon(
color: Theme.of(context).accentColor,
icon: AnimatedIcons.play_pause,
size: 50,
progress: playFABController,
),
elevation: 0,
onPressed: () {
if (provider.audioManagerInstance.isPlaying) {
playFABController.reverse();
provider.playerState = PlayerState.paused;
}
else {
playFABController.forward();
provider.playerState = PlayerState.playing;
}
provider.audioManagerInstance.playOrPause();
}),
),
),
elevation: 0,
onPressed: () {
if (provider.audioManagerInstance.isPlaying) {
playFABController.reverse();
provider.playerState = PlayerState.paused;
}
else {
playFABController.forward();
provider.playerState = PlayerState.playing;
}
provider.audioManagerInstance.playOrPause();
}),
),
SizedBox(
width: 10,
Expand Down Expand Up @@ -151,6 +151,7 @@ class _PlayBackControlsState extends State<PlayBackControls> {
shape: CircleBorder(),
onPressed: () {
provider.audioManagerInstance.stop();
provider.slider = 0;
playFABController.reverse();
},
child: Icon(
Expand Down
8 changes: 3 additions & 5 deletions lib/widgets/seekbar.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:raag/provider/audio_helper.dart';
import 'package:raag/provider/player_provider.dart';
import 'package:raag/provider/theme.dart';

class SeekBar extends StatefulWidget {
@override
Expand All @@ -16,7 +17,7 @@ class _SeekBarState extends State<SeekBar> {
children: <Widget>[
Text(
formatDuration(provider.audioManagerInstance.position),
style: Theme.of(context).textTheme.subtitle2,
style: durationTheme,
),
Expanded(
child: Padding(
Expand Down Expand Up @@ -59,10 +60,7 @@ class _SeekBarState extends State<SeekBar> {
),
Text(
formatDuration(provider.audioManagerInstance.duration),
style: Theme
.of(context)
.textTheme
.subtitle2,
style: durationTheme,
),
],
);
Expand Down

0 comments on commit 2a2cca2

Please sign in to comment.