Skip to content

Commit

Permalink
Updated Fresh UI (#29)
Browse files Browse the repository at this point in the history
* improved : Splash and Profile Screen UI

* Improved UI 1

* added : Sliver Animation at Song Detail Screen.
  • Loading branch information
nikeight authored Jul 12, 2023
1 parent a748d3d commit 55ad924
Show file tree
Hide file tree
Showing 20 changed files with 761 additions and 336 deletions.
Binary file added assets/images/spotify_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
17 changes: 10 additions & 7 deletions lib/design_system/spotify_chip_button.dart
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,17 @@ class SpotifyChipButton extends StatelessWidget {

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onChipClicked,
child: Chip(
avatar: CircleAvatar(
backgroundColor: isSelected ? primaryGreenColor : spotifyLightGrey,
radius: 16,
return Padding(
padding: const EdgeInsets.all(4.0),
child: GestureDetector(
onTap: onChipClicked,
child: Chip(
avatar: CircleAvatar(
backgroundColor: isSelected ? primaryGreenColor : spotifyLightGrey,
radius: 16,
),
label: Text(label),
),
label: Text(label),
),
);
}
Expand Down
48 changes: 25 additions & 23 deletions lib/design_system/spotify_horizontal_img_card.dart
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
import 'package:praxis_flutter/design_system/spotify_color.dart';

/// A Component Used in the Recent Player Grid View
// Todo : Make the Playing State Icon to the Right Most Side
class SpotifyHorizontalImageCard extends StatelessWidget {

// Todo : Convert this to an Object
final String imageUrl;
final String label;
final bool isPlaying;
Expand All @@ -18,45 +20,45 @@ class SpotifyHorizontalImageCard extends StatelessWidget {
required this.onTap,
}) : super(key: key);

// Todo : Use Media Query

@override
Widget build(BuildContext context) {
return Card(
color: spotifyLightGrey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
child: GestureDetector(
onTap: onTap,
child: SizedBox(
height: 40,
width: 100,
return Expanded(
child: Card(
color: spotifyLightGrey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
child: GestureDetector(
onTap: onTap,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Image.network(
imageUrl,
width: 40,
height: 40,
width: 60,
height: MediaQuery.of(context).size.height,
),
const SizedBox(width: 8),
Flexible(
child: Container(
padding: const EdgeInsets.only(right: 13.0),
child: Text(
child: Padding(
padding: const EdgeInsets.all(4),
child: Text(
label,
maxLines: 2,
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
style: const TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: Color(0xFF212121),
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
),
),
const Icon(Icons.graphic_eq_sharp, color: primaryGreenColor),
const SizedBox(width: 8)
const Padding(
padding: EdgeInsets.all(8),
child:
Icon(Icons.graphic_eq_sharp, color: primaryGreenColor)),
],
),
),
Expand Down
51 changes: 32 additions & 19 deletions lib/design_system/spotify_vertical_img_card.dart
Original file line number Diff line number Diff line change
Expand Up @@ -22,46 +22,59 @@ class SpotifyVerticalImageCard extends StatelessWidget {

@override
Widget build(BuildContext context) {

/// The Height and Width is temporary set
/// Todo : Needed to improve method or Calculation.
/// TO make it Pixel Perfect UI.
final itemHeight = MediaQuery.of(context).size.height / 3;
final itemWidth = MediaQuery.of(context).size.width / 2.5;

return SizedBox(
height: 100,
width: 140,
height: itemHeight,
width: itemWidth,
child: Card(
color: spotifyLightGrey,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
//set border radius more than 50% of height and width to make circle
),
color: spotifyBlack,
child: GestureDetector(
onTap: onTap,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.network(
imageUrl,
width: 120,
height: 140,
height: itemHeight / 1.7,
),
verticalSpaceSmall,
Flexible(
child: Container(
padding: const EdgeInsets.only(right: 13.0),
child: Text(
padding:
const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
child: Text(
label,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
style: const TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: Color(0xFF212121),
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
),
),
verticalSpaceSmall,
Text(artistName),
verticalSpaceSmall
Flexible(
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Text(
artistName,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 13.0,
fontFamily: 'Roboto',
color: Colors.white,
fontWeight: FontWeight.normal,
),
),
),
)
],
),
),
Expand Down
42 changes: 14 additions & 28 deletions lib/design_system/text_style.dart
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,23 @@ import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

// Bigger Heading One : Font Size : 34
const TextStyle heading1Style = TextStyle(
fontSize: 34,
fontWeight: FontWeight.w400,
);
const TextStyle heading1Style =
TextStyle(fontSize: 34, fontWeight: FontWeight.w400, color: Colors.white);

const TextStyle heading2Style = TextStyle(
fontSize: 30,
fontWeight: FontWeight.w600,
);
const TextStyle heading2Style =
TextStyle(fontSize: 30, fontWeight: FontWeight.w600, color: Colors.white);

const TextStyle heading3Style = TextStyle(
fontSize: 26,
fontWeight: FontWeight.w600,
);
const TextStyle heading3Style =
TextStyle(fontSize: 26, fontWeight: FontWeight.w600, color: Colors.white);

const TextStyle headlineStyle = TextStyle(
fontSize: 24,
fontWeight: FontWeight.w400,
);
const TextStyle headlineStyle =
TextStyle(fontSize: 24, fontWeight: FontWeight.w400, color: Colors.white);

const TextStyle subHeadlineStyle = TextStyle(
fontSize: 20,
fontWeight: FontWeight.w400,
);
const TextStyle subHeadlineStyle =
TextStyle(fontSize: 20, fontWeight: FontWeight.w400, color: Colors.white);

const TextStyle bodyStyle = TextStyle(
fontSize: 16,
fontWeight: FontWeight.w400,
);
const TextStyle bodyStyle =
TextStyle(fontSize: 16, fontWeight: FontWeight.w400, color: Colors.white);

const TextStyle captionStyle = TextStyle(
fontSize: 10,
fontWeight: FontWeight.w400,
);
const TextStyle captionStyle =
TextStyle(fontSize: 10, fontWeight: FontWeight.w400, color: Colors.white);
Loading

0 comments on commit 55ad924

Please sign in to comment.