empathicqubit/mucke
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

theming

Browse source
This commit is contained in:
Moritz Weber 2021-01-27 18:13:21 +01:00
parent cf2d134d08
commit 26620f374f
14 changed files with 105 additions and 189 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
lib/presentation/pages/currently_playing.dart
View file

@ -43,21 +43,21 @@ class CurrentlyPlayingPage extends StatelessWidget {
children: [
AlbumBackground(
song: song,
gradient: const LinearGradient(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0x99000000),
Color(0x22FFFFFF),
Color(0x22FFFFFF),
Color(0x99000000),
Color(0xCC000000),
Theme.of(context).scaffoldBackgroundColor,
DARK3.withOpacity(0.2),
DARK3.withOpacity(0.2),
Theme.of(context).scaffoldBackgroundColor,
Theme.of(context).scaffoldBackgroundColor,
],
stops: [
0.0,
0.2,
0.55,
0.75,
0.7,
1.0,
],
),

6
lib/presentation/pages/library_tab_container.dart
View file

@ -15,18 +15,18 @@ class LibraryTabContainer extends StatelessWidget {
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 8.0, bottom: 16.0),
padding: const EdgeInsets.only(top: 8.0, left: 4.0),
child: Row(
children: [
const Expanded(
child: TabBar(
indicatorSize: TabBarIndicatorSize.label,
indicatorColor: Colors.transparent,
indicatorWeight: 3.0,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20.0,
),
labelPadding: EdgeInsets.only(left: 16.0, right: 8.0),
labelPadding: EdgeInsets.symmetric(horizontal: 12.0),
unselectedLabelColor: Colors.white30,
isScrollable: true,
tabs: [

76
lib/presentation/pages/queue_page.dart
View file

@ -9,7 +9,6 @@ import 'package:reorderables/reorderables.dart';
import '../../domain/entities/song.dart';
import '../state/audio_store.dart';
import '../widgets/album_art_list_tile.dart';
import '../widgets/album_background.dart';
class QueuePage extends StatelessWidget {
const QueuePage({Key key}) : super(key: key);
@ -34,56 +33,37 @@ class QueuePage extends StatelessWidget {
switch (queueStream.status) {
case StreamStatus.active:
final int activeIndex = queueIndexStream.value;
return Stack(
children: [
AlbumBackground(
song: audioStore.currentSong,
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0x55000000),
Color(0x55000000),
],
stops: [
0.0,
1.0,
],
),
),
CustomScrollView(
controller: _scrollController,
slivers: [
ReorderableSliverList(
delegate: ReorderableSliverChildBuilderDelegate(
(context, int index) {
final song = queueStream.value[index];
return Dismissible(
key: ValueKey(song.path),
child: AlbumArtListTile(
title: song.title,
subtitle: '${song.artist}',
albumArtPath: song.albumArtPath,
highlight: index == activeIndex,
onTap: () => audioStore.setIndex(index),
return CustomScrollView(
controller: _scrollController,
slivers: [
ReorderableSliverList(
delegate: ReorderableSliverChildBuilderDelegate(
(context, int index) {
final song = queueStream.value[index];
return Dismissible(
key: ValueKey(song.path),
child: AlbumArtListTile(
title: song.title,
subtitle: '${song.artist}',
albumArtPath: song.albumArtPath,
highlight: index == activeIndex,
onTap: () => audioStore.setIndex(index),
),
onDismissed: (direction) {
audioStore.removeQueueIndex(index);
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('${song.title} removed'),
),
onDismissed: (direction) {
audioStore.removeQueueIndex(index);
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('${song.title} removed'),
),
);
},
);
},
childCount: queueStream.value.length,
),
onReorder: (oldIndex, newIndex) =>
audioStore.moveQueueItem(oldIndex, newIndex),
)
],
),
);
},
childCount: queueStream.value.length,
),
onReorder: (oldIndex, newIndex) =>
audioStore.moveQueueItem(oldIndex, newIndex),
)
],
);
case StreamStatus.waiting:

32
lib/presentation/theming.dart
View file

@ -1,17 +1,10 @@
import 'package:flutter/material.dart';
const Color RASPBERRY = Color(0xFFea0367);
const Color TURQUOISE = Color(0xFF30d8f3);
const Color CRAYOLA = Color(0xfffde189);
const Color PINEAPPLE = Color(0xff56365e);
const Color MIDNIGHT = Color(0xff622371);
const Color MIDDLE_RED_PURPLE = Color(0xff0f0127);
const Color DARK1 = Color(0xff0c1a20);
const Color DARK2 = Color(0xff0f2020);
const Color DARK3 = Color(0xff142a35);
const Color LIGHT1 = Color(0xff57af99);
const Color LIGHT2 = Color(0xfff28396);
const Color DARK1 = Color(0xff090711);
const Color DARK2 = Color(0xff141216);
const Color DARK3 = Color(0xff645375); // 645375 // 241d2b
const Color LIGHT1 = Color(0xff913af1);
const Color LIGHT2 = Color(0xffac5bfb);
ThemeData theme() => ThemeData(
brightness: Brightness.dark,
@ -19,8 +12,14 @@ ThemeData theme() => ThemeData(
primaryColorBrightness: Brightness.dark,
primaryColorLight: DARK2,
accentColor: LIGHT1,
highlightColor: TURQUOISE,
highlightColor: LIGHT2,
scaffoldBackgroundColor: DARK2,
cardColor: DARK3,
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
primary: LIGHT1,
),
),
// https://api.flutter.dev/flutter/material/TextTheme-class.html
textTheme: const TextTheme(
headline1: TextStyle(
@ -56,7 +55,10 @@ ThemeData theme() => ThemeData(
iconTheme: const IconThemeData(
color: Colors.white,
),
cardColor: DARK3,
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: DARK1,
selectedItemColor: LIGHT1,
),
);
const TextStyle TEXT_HEADER = TextStyle(
@ -84,4 +86,4 @@ const TextStyle TEXT_SMALL_SUBTITLE = TextStyle(
fontWeight: FontWeight.w300,
);
const double HORIZONTAL_PADDING = 16.0;
const double HORIZONTAL_PADDING = 16.0;

11
lib/presentation/widgets/album_art.dart
View file

@ -13,12 +13,15 @@ class AlbumArt extends StatelessWidget {
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1.0,
child: Card(
elevation: 6.0,
child: Container(
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
shape: RoundedRectangleBorder(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2.0),
boxShadow: const [
BoxShadow(color: Colors.black45, blurRadius: 1, offset: Offset(0, 1)),
BoxShadow(color: Colors.black38, blurRadius: 5, offset: Offset(0, 1)),
BoxShadow(color: Colors.black26, blurRadius: 8, offset: Offset(0, 1)),
],
),
child: Stack(
children: [

2
lib/presentation/widgets/album_list_tile_extended.dart
View file

@ -29,7 +29,7 @@ class AlbumListTileExtended extends StatelessWidget {
height: 72,
width: 72,
child: Container(
decoration: BoxDecoration(borderRadius: BorderRadius.circular(4.0)),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(1.0)),
clipBehavior: Clip.antiAlias,
child: Image(
image: utils.getAlbumImage(albumArtPath),

49
lib/presentation/widgets/currently_playing_bar.dart
View file

@ -22,13 +22,8 @@ class CurrentlyPlayingBar extends StatelessWidget {
final Song song = audioStore.currentSong;
return Column(
verticalDirection: VerticalDirection.up,
children: <Widget>[
Container(
child: LinearProgressIndicator(
value: audioStore.currentPositionStream.value / audioStore.currentSong.duration,
),
height: 2,
),
GestureDetector(
onTap: () => _onTap(context),
child: Container(
@ -42,20 +37,25 @@ class CurrentlyPlayingBar extends StatelessWidget {
Container(
width: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(song.title),
Text(
song.artist,
style: const TextStyle(
fontSize: 12.0,
color: Colors.white70,
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
song.title,
overflow: TextOverflow.ellipsis,
maxLines: 2,
),
)
],
Text(
song.artist,
style: const TextStyle(
fontSize: 12.0,
color: Colors.white70,
),
)
],
),
),
const Spacer(),
const PlayPauseButton(
circle: false,
),
@ -64,6 +64,19 @@ class CurrentlyPlayingBar extends StatelessWidget {
),
),
),
Container(
child: LinearProgressIndicator(
value: audioStore.currentPositionStream.value / audioStore.currentSong.duration,
valueColor: const AlwaysStoppedAnimation<Color>(Colors.white),
backgroundColor: Colors.white10,
),
height: 2,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Theme.of(context).primaryColor, blurRadius: 1),
],
),
),
],
);
}

8
lib/presentation/widgets/highlight.dart
View file

@ -18,12 +18,10 @@ class Highlight extends StatelessWidget {
flex: 10,
child: AspectRatio(
aspectRatio: 1,
child: Card(
elevation: 2.0,
child: Container(
clipBehavior: Clip.antiAlias,
margin: const EdgeInsets.all(0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1.0),
),
child: const Image(
image: AssetImage('assets/no_cover.png'),

2
lib/presentation/widgets/like_button.dart
View file

@ -36,7 +36,7 @@ class LikeButton extends StatelessWidget {
children: [
Icon(
Icons.favorite_rounded,
color: Colors.white,
color: Theme.of(context).accentColor,
size: iconSize,
),
Text(

1
lib/presentation/widgets/navbar.dart
View file

@ -27,7 +27,6 @@ class _NavBarState extends State<NavBar> {
height: 1.0,
),
BottomNavigationBar(
backgroundColor: Theme.of(context).primaryColor,
currentIndex: widget.currentIndex,
onTap: widget.onTap,
items: const [

5
lib/presentation/widgets/next_button.dart
View file

@ -22,7 +22,10 @@ class NextButton extends StatelessWidget {
return IconButton(
icon: const Icon(Icons.skip_next_rounded),
iconSize: iconSize,
onPressed: () => audioStore.skipToNext(),
onPressed: () {
// precacheImage(FileImage(File(queue[index+2].albumArtPath)), context);
return audioStore.skipToNext();
},
);
}

81
lib/presentation/widgets/queue_card.dart
View file

@ -1,81 +0,0 @@
import 'package:flutter/material.dart';
class QueueCard extends StatefulWidget {
const QueueCard({Key key, this.boxConstraints}) : super(key: key);
final BoxConstraints boxConstraints;
@override
_QueueCardState createState() => _QueueCardState();
}
class _QueueCardState extends State<QueueCard> {
final title = 'Fire';
final artist = 'Beartooth';
final height = 64.0;
bool _first = true;
double _currentHeight;
@override
void initState() {
_currentHeight = height;
super.initState();
}
@override
Widget build(BuildContext context) {
return AnimatedPositioned(
bottom: 0,
left: 0,
right: 0,
height: _currentHeight,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GestureDetector(
onTap: () {
setState(() {
_currentHeight =
_first ? widget.boxConstraints.maxHeight : height;
_first = !_first;
});
},
child: Card(
elevation: 4.0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Row(
children: <Widget>[
const Icon(Icons.expand_less),
Container(
width: 4.0,
),
RichText(
text: TextSpan(
style: const TextStyle(
fontSize: 16,
),
children: [
TextSpan(text: '$title'),
const TextSpan(text: ' • ', style: TextStyle(color: Colors.white70)),
TextSpan(text: '$artist', style: const TextStyle(fontWeight: FontWeight.w300, color: Colors.white70)),
],
),
),
],
),
],
crossAxisAlignment: CrossAxisAlignment.start,
),
),
),
),
),
duration: const Duration(milliseconds: 250),
curve: Curves.fastOutSlowIn,
);
}
}

4
lib/presentation/widgets/shuffle_button.dart
View file

@ -38,9 +38,9 @@ class ShuffleButton extends StatelessWidget {
);
case ShuffleMode.plus:
return IconButton(
icon: const Icon(
icon: Icon(
Icons.fingerprint_rounded,
color: Colors.white,
color: Theme.of(context).accentColor,
),
iconSize: iconSize,
onPressed: () => audioStore.setShuffleMode(ShuffleMode.none),

3
lib/presentation/widgets/song_list_tile.dart
View file

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import '../../domain/entities/song.dart';
import '../theming.dart';
import '../utils.dart' as utils;
class SongListTile extends StatelessWidget {
@ -50,7 +49,7 @@ class SongListTile extends StatelessWidget {
Icon(
Icons.remove_circle_outline,
size: 14.0,
color: RASPBERRY.withOpacity(0.4),
color: Colors.white.withOpacity(0.4),
),
if (onTapMore != null)
IconButton(