smaller theming changes
This commit is contained in:
Moritz Weber
parent
f1256790ef
commit
e38b52c2e0
6 changed files with 130 additions and 97 deletions
|
|
@ -26,7 +26,7 @@ class AlbumDetailsPage extends StatelessWidget {
|
|||
brightness: Brightness.dark,
|
||||
pinned: true,
|
||||
expandedHeight: 250.0,
|
||||
backgroundColor: Colors.grey[900],
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
iconTheme: IconThemeData(
|
||||
color: Colors.white,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import '../state/audio_store.dart';
|
|||
import '../theming.dart';
|
||||
import '../widgets/album_art.dart';
|
||||
import '../widgets/play_pause_button.dart';
|
||||
import '../widgets/queue_card.dart';
|
||||
import '../widgets/time_progress_indicator.dart';
|
||||
|
||||
class CurrentlyPlayingPage extends StatelessWidget {
|
||||
|
|
@ -27,99 +26,123 @@ class CurrentlyPlayingPage extends StatelessWidget {
|
|||
print('CurrentlyPlayingPage.build -> Observer.build');
|
||||
final Song song = audioStore.song;
|
||||
|
||||
return Stack(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12.0,
|
||||
right: 12.0,
|
||||
top: 8.0,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
left: 12.0,
|
||||
right: 12.0,
|
||||
top: 8.0,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(Icons.expand_more),
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(Icons.more_vert),
|
||||
onPressed: () {},
|
||||
)
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
IconButton(
|
||||
icon: Icon(Icons.expand_more),
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: AlbumArt(
|
||||
song: song,
|
||||
),
|
||||
),
|
||||
const Spacer(
|
||||
flex: 4,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.link,
|
||||
size: 20.0,
|
||||
),
|
||||
Container(
|
||||
width: 40,
|
||||
),
|
||||
Icon(
|
||||
Icons.favorite,
|
||||
size: 20.0,
|
||||
color: RASPBERRY,
|
||||
),
|
||||
Container(
|
||||
width: 40,
|
||||
),
|
||||
Icon(
|
||||
Icons.remove_circle_outline,
|
||||
size: 20.0,
|
||||
),
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
),
|
||||
const Spacer(
|
||||
flex: 3,
|
||||
),
|
||||
const TimeProgressIndicator(),
|
||||
const Spacer(
|
||||
flex: 3,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.repeat, size: 20.0),
|
||||
Icon(Icons.skip_previous, size: 32.0),
|
||||
const PlayPauseButton(
|
||||
circle: true,
|
||||
iconSize: 52.0,
|
||||
),
|
||||
Icon(Icons.skip_next, size: 32.0),
|
||||
Icon(Icons.shuffle, size: 20.0),
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(Icons.more_vert),
|
||||
onPressed: () {},
|
||||
)
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
),
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: AlbumArt(
|
||||
song: song,
|
||||
),
|
||||
),
|
||||
const Spacer(
|
||||
flex: 4,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.link,
|
||||
size: 20.0,
|
||||
),
|
||||
Container(
|
||||
height: 64,
|
||||
width: 40,
|
||||
),
|
||||
Icon(
|
||||
Icons.favorite,
|
||||
size: 20.0,
|
||||
color: RASPBERRY,
|
||||
),
|
||||
Container(
|
||||
width: 40,
|
||||
),
|
||||
Icon(
|
||||
Icons.remove_circle_outline,
|
||||
size: 20.0,
|
||||
),
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
),
|
||||
),
|
||||
QueueCard(
|
||||
boxConstraints: constraints,
|
||||
),
|
||||
],
|
||||
const Spacer(
|
||||
flex: 3,
|
||||
),
|
||||
const TimeProgressIndicator(),
|
||||
const Spacer(
|
||||
flex: 3,
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(Icons.repeat, size: 20.0),
|
||||
Icon(Icons.skip_previous, size: 32.0),
|
||||
const PlayPauseButton(
|
||||
circle: true,
|
||||
iconSize: 52.0,
|
||||
),
|
||||
Icon(Icons.skip_next, size: 32.0),
|
||||
Icon(Icons.shuffle, size: 20.0),
|
||||
],
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
),
|
||||
),
|
||||
const Spacer(),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.expand_less,
|
||||
color: Colors.white70,
|
||||
),
|
||||
RichText(
|
||||
text: TextSpan(
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: Colors.white70,
|
||||
),
|
||||
children: [
|
||||
const TextSpan(text: 'Fire'),
|
||||
const TextSpan(text: ' • '),
|
||||
TextSpan(
|
||||
text: 'Beartooth',
|
||||
style: TextStyle(
|
||||
fontWeight: FontWeight.w300,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@ class LibraryTabContainer extends StatelessWidget {
|
|||
child: Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
color: Colors.grey[900],
|
||||
child: TabBar(
|
||||
color: Theme.of(context).primaryColor,
|
||||
child: const TabBar(
|
||||
tabs: <Tab>[
|
||||
Tab(
|
||||
text: 'Artists',
|
||||
|
|
@ -29,7 +29,7 @@ class LibraryTabContainer extends StatelessWidget {
|
|||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
const Expanded(
|
||||
child: TabBarView(
|
||||
children: <Widget>[
|
||||
Center(
|
||||
|
|
|
|||
|
|
@ -7,10 +7,19 @@ 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);
|
||||
|
||||
ThemeData theme() => ThemeData(
|
||||
brightness: Brightness.dark,
|
||||
primaryColor: Colors.amber,
|
||||
accentColor: Colors.amberAccent,
|
||||
primaryColor: DARK1,
|
||||
primaryColorBrightness: Brightness.dark,
|
||||
primaryColorLight: DARK2,
|
||||
accentColor: LIGHT1,
|
||||
scaffoldBackgroundColor: DARK2,
|
||||
// https://api.flutter.dev/flutter/material/TextTheme-class.html
|
||||
textTheme: const TextTheme(
|
||||
headline6: TextStyle(fontSize: 20.0),
|
||||
|
|
@ -21,4 +30,5 @@ ThemeData theme() => ThemeData(
|
|||
iconTheme: IconThemeData(
|
||||
color: Colors.white,
|
||||
),
|
||||
cardColor: DARK3,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -60,7 +60,7 @@ class AlbumArt extends StatelessWidget {
|
|||
children: <Widget>[
|
||||
Text(
|
||||
song.title,
|
||||
style: Theme.of(context).textTheme.title,
|
||||
style: Theme.of(context).textTheme.headline6,
|
||||
),
|
||||
Container(
|
||||
height: 4.0,
|
||||
|
|
|
|||
|
|
@ -21,17 +21,17 @@ class _NavBarState extends State<NavBar> {
|
|||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
color: Colors.grey[900],
|
||||
color: Theme.of(context).primaryColor,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
const CurrentlyPlayingBar(),
|
||||
Container(
|
||||
color: Colors.grey[850],
|
||||
color: Theme.of(context).primaryColorLight,
|
||||
height: 1.0,
|
||||
),
|
||||
BottomNavigationBar(
|
||||
backgroundColor: Colors.grey[900],
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
currentIndex: widget.currentIndex,
|
||||
onTap: widget.onTap,
|
||||
items: [
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue