From ff502d448ed150943a7422d04b3cb903f95aa6cc Mon Sep 17 00:00:00 2001 From: JothishKamal Date: Fri, 5 Jul 2024 21:04:13 +0530 Subject: [PATCH 1/2] feat: login screen --- lib/main.dart | 7 +- lib/screens/home_screen.dart | 165 +++++---------------------------- lib/screens/login_screen.dart | 169 ++++++++++++++++++++++++++++++++++ lib/widgets/now_playing.dart | 55 +++++++++++ lib/widgets/recent_card.dart | 27 ++++++ lib/widgets/song_widget.dart | 45 +++++++++ 6 files changed, 322 insertions(+), 146 deletions(-) create mode 100644 lib/screens/login_screen.dart create mode 100644 lib/widgets/now_playing.dart create mode 100644 lib/widgets/recent_card.dart create mode 100644 lib/widgets/song_widget.dart diff --git a/lib/main.dart b/lib/main.dart index ece4ece..205645b 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:spotify_collab_app/screens/home_screen.dart'; -import 'theme/theme.dart'; +import 'package:spotify_collab_app/screens/login_screen.dart'; +import 'theme/theme.dart'; void main() { runApp(const MyApp()); @@ -14,8 +15,8 @@ class MyApp extends StatelessWidget { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Spotify Collab', - theme: darkTheme, - home: const HomeScreen(), + theme: darkTheme, + home: const LoginScreen(), ); } } diff --git a/lib/screens/home_screen.dart b/lib/screens/home_screen.dart index 7522795..86feae6 100644 --- a/lib/screens/home_screen.dart +++ b/lib/screens/home_screen.dart @@ -1,7 +1,10 @@ import 'package:flutter/material.dart'; -import 'package:flutter/widgets.dart'; + import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/svg.dart'; +import 'package:spotify_collab_app/widgets/now_playing.dart'; +import 'package:spotify_collab_app/widgets/recent_card.dart'; +import 'package:spotify_collab_app/widgets/song_widget.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @@ -17,7 +20,7 @@ class HomeScreen extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.center, children: [ SvgPicture.asset('assets/logo.svg'), - SizedBox(width: 10), + const SizedBox(width: 10), const Text( 'Collabify', style: TextStyle( @@ -32,20 +35,20 @@ class HomeScreen extends StatelessWidget { ), ), drawer: Drawer( - backgroundColor: Color.fromARGB(255, 0, 0, 0), + backgroundColor: const Color.fromARGB(255, 0, 0, 0), child: ListView( padding: EdgeInsets.zero, children: [ Container( - child: const SizedBox( - height: 100, - ), - color: Colors.transparent), + height: 100, + color: Colors.transparent, + child: const SizedBox(), + ), Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.home_outlined, size: 36), - title: Center( + leading: const Icon(Icons.home_outlined, size: 36), + title: const Center( child: Text('Home', style: TextStyle(fontSize: 28))), onTap: () { // Handle the tap @@ -55,8 +58,8 @@ class HomeScreen extends StatelessWidget { Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.search_outlined, size: 36), - title: Center( + leading: const Icon(Icons.search_outlined, size: 36), + title: const Center( child: Text('Search', style: TextStyle(fontSize: 28))), onTap: () { // Handle the tap @@ -66,8 +69,8 @@ class HomeScreen extends StatelessWidget { Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.grid_view_outlined, size: 36), - title: Center( + leading: const Icon(Icons.grid_view_outlined, size: 36), + title: const Center( child: Text('Your Events', style: TextStyle(fontSize: 28))), onTap: () { @@ -78,8 +81,8 @@ class HomeScreen extends StatelessWidget { Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.account_circle_outlined, size: 36), - title: Center( + leading: const Icon(Icons.account_circle_outlined, size: 36), + title: const Center( child: Text('Your Profile', style: TextStyle(fontSize: 28))), onTap: () { @@ -90,8 +93,8 @@ class HomeScreen extends StatelessWidget { Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.settings_outlined, size: 36), - title: Center( + leading: const Icon(Icons.settings_outlined, size: 36), + title: const Center( child: Text('Settings', style: TextStyle(fontSize: 28))), onTap: () { // Handle the tap @@ -101,8 +104,8 @@ class HomeScreen extends StatelessWidget { Padding( padding: const EdgeInsets.symmetric(vertical: 10), child: ListTile( - leading: Icon(Icons.queue_music_outlined, size: 36), - title: Center( + leading: const Icon(Icons.queue_music_outlined, size: 36), + title: const Center( child: Text('Your Playlists', style: TextStyle(fontSize: 28))), onTap: () { @@ -179,127 +182,3 @@ class HomeScreen extends StatelessWidget { )); } } - -class NowPlaying extends StatelessWidget { - const NowPlaying({ - super.key, - }); - - @override - Widget build(BuildContext context) { - return Container( - height: 50, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - gradient: const LinearGradient( - begin: Alignment.centerLeft, - end: Alignment.centerRight, - colors: [Color.fromARGB(255, 128, 33, 21), Color(0xff646B35)])), - child: Stack(children: [ - Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - children: [ - Container( - width: 34, - height: 34, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Color(0xffC14231)), - ), - SizedBox(width: 8), - Text( - "From Me to You - Mono / Remastered", - style: TextStyle( - fontSize: 13, - color: Colors.white, - fontWeight: FontWeight.w600), - ), - ], - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 8.0), - child: Align( - alignment: Alignment.bottomCenter, - child: LinearProgressIndicator( - borderRadius: BorderRadius.circular(10), - color: Color(0xffB2B2B2), - backgroundColor: Color.fromARGB(255, 128, 33, 21), - ), - ), - ) - ]), - ); - } -} - -class SongWidget extends StatelessWidget { - const SongWidget({ - super.key, - }); - - @override - Widget build(BuildContext context) { - return Container( - height: 80, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Color.fromARGB(50, 0, 0, 0), - ), - child: Padding( - padding: const EdgeInsets.all(8.0), - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Container( - width: 64, - height: 64, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), color: Colors.white), - ), - Container( - width: 34, - height: 34, - margin: const EdgeInsets.only(right: 15), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(100), - color: Color(0xff24bb58)), - child: const Icon( - Icons.play_arrow, - color: Colors.black, - size: 34, - ), - ), - ], - ), - ), - ); - } -} - -class RecentCard extends StatelessWidget { - const RecentCard({ - super.key, - }); - - @override - Widget build(BuildContext context) { - return Container( - width: 98, - height: 130, - decoration: const BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(10)), - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - Color(0xff4d5350), - Color(0xff2f2e27), - ], - tileMode: TileMode.mirror, - ), - ), - ); - } -} diff --git a/lib/screens/login_screen.dart b/lib/screens/login_screen.dart new file mode 100644 index 0000000..43f6a11 --- /dev/null +++ b/lib/screens/login_screen.dart @@ -0,0 +1,169 @@ +import 'package:flutter/material.dart'; + +class LoginScreen extends StatelessWidget { + const LoginScreen({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + leading: IconButton( + icon: const Icon(Icons.arrow_back, color: Colors.white), + onPressed: () { + // Handle back button press + }, + ), + centerTitle: true, + title: const Text( + 'Sign in to your account', + style: TextStyle( + color: Colors.white, + fontSize: 20, + fontFamily: 'Avenir Next', + fontWeight: FontWeight.w600, + ), + ), + ), + body: Container( + decoration: const BoxDecoration( + gradient: LinearGradient( + begin: Alignment.topLeft, + end: Alignment(0.8, 1), + colors: [ + Color(0xff000000), + Color(0xff051e0f), + Color(0xff083216), + ], + tileMode: TileMode.mirror, + ), + ), + child: SafeArea( + child: LayoutBuilder( + builder: (context, constraints) { + return SingleChildScrollView( + physics: const NeverScrollableScrollPhysics(), + padding: + const EdgeInsets.symmetric(horizontal: 20, vertical: 40), + child: ConstrainedBox( + constraints: BoxConstraints( + minHeight: constraints.maxHeight, + ), + child: IntrinsicHeight( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: 50), + const Text( + 'Email ID', + style: TextStyle( + color: Colors.white, + fontSize: 18, + fontFamily: 'Avenir Next', + fontWeight: FontWeight.w600, + ), + ), + const SizedBox(height: 10), + Container( + decoration: BoxDecoration( + color: Colors.black.withOpacity(0.3), + borderRadius: BorderRadius.circular(10), + ), + child: TextField( + style: const TextStyle(color: Colors.white), + decoration: InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.white.withOpacity(0.3)), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: + const BorderSide(color: Colors.white), + ), + contentPadding: + const EdgeInsets.symmetric(horizontal: 10), + ), + ), + ), + const SizedBox(height: 50), + const Text( + 'Password', + style: TextStyle( + color: Colors.white, + fontSize: 18, + fontFamily: 'Avenir Next', + fontWeight: FontWeight.w600, + ), + ), + const SizedBox(height: 10), + Container( + decoration: BoxDecoration( + color: Colors.black.withOpacity(0.3), + borderRadius: BorderRadius.circular(10), + ), + child: TextField( + style: const TextStyle(color: Colors.white), + obscureText: true, + decoration: InputDecoration( + border: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + ), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: BorderSide( + color: Colors.white.withOpacity(0.3)), + ), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(10), + borderSide: + const BorderSide(color: Colors.white), + ), + contentPadding: + const EdgeInsets.symmetric(horizontal: 10), + ), + ), + ), + const SizedBox(height: 70), + Center( + child: Container( + width: double.infinity, + height: 50, + decoration: BoxDecoration( + border: Border.all(color: Colors.white), + borderRadius: BorderRadius.circular(25), + ), + child: ElevatedButton( + onPressed: () { + // Handle login button press + }, + style: ElevatedButton.styleFrom( + shadowColor: Colors.transparent, + ), + child: const Text( + 'Login', + style: TextStyle( + color: Colors.white, + fontSize: 18, + fontFamily: 'Avenir Next', + fontWeight: FontWeight.w600, + ), + ), + ), + ), + ), + ], + ), + ), + ), + ); + }, + ), + ), + ), + ); + } +} diff --git a/lib/widgets/now_playing.dart b/lib/widgets/now_playing.dart new file mode 100644 index 0000000..bfb8966 --- /dev/null +++ b/lib/widgets/now_playing.dart @@ -0,0 +1,55 @@ +import 'package:flutter/material.dart'; + +class NowPlaying extends StatelessWidget { + const NowPlaying({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + height: 50, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + gradient: const LinearGradient( + begin: Alignment.centerLeft, + end: Alignment.centerRight, + colors: [Color.fromARGB(255, 128, 33, 21), Color(0xff646B35)])), + child: Stack(children: [ + Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + children: [ + Container( + width: 34, + height: 34, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: const Color(0xffC14231)), + ), + const SizedBox(width: 8), + const Text( + "From Me to You - Mono / Remastered", + style: TextStyle( + fontSize: 13, + color: Colors.white, + fontWeight: FontWeight.w600), + ), + ], + ), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 8.0), + child: Align( + alignment: Alignment.bottomCenter, + child: LinearProgressIndicator( + borderRadius: BorderRadius.circular(10), + color: const Color(0xffB2B2B2), + backgroundColor: const Color.fromARGB(255, 128, 33, 21), + ), + ), + ) + ]), + ); + } +} diff --git a/lib/widgets/recent_card.dart b/lib/widgets/recent_card.dart new file mode 100644 index 0000000..0e527bf --- /dev/null +++ b/lib/widgets/recent_card.dart @@ -0,0 +1,27 @@ +import 'package:flutter/material.dart'; + +class RecentCard extends StatelessWidget { + const RecentCard({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + width: 98, + height: 130, + decoration: const BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(10)), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + Color(0xff4d5350), + Color(0xff2f2e27), + ], + tileMode: TileMode.mirror, + ), + ), + ); + } +} diff --git a/lib/widgets/song_widget.dart b/lib/widgets/song_widget.dart new file mode 100644 index 0000000..f5719f4 --- /dev/null +++ b/lib/widgets/song_widget.dart @@ -0,0 +1,45 @@ +import 'package:flutter/material.dart'; + +class SongWidget extends StatelessWidget { + const SongWidget({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return Container( + height: 80, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + color: const Color.fromARGB(50, 0, 0, 0), + ), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Container( + width: 64, + height: 64, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), color: Colors.white), + ), + Container( + width: 34, + height: 34, + margin: const EdgeInsets.only(right: 15), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(100), + color: const Color(0xff24bb58)), + child: const Icon( + Icons.play_arrow, + color: Colors.black, + size: 34, + ), + ), + ], + ), + ), + ); + } +} From 13da0abbdbfdc1e06dad211cdf36f33c39d4a5a4 Mon Sep 17 00:00:00 2001 From: JothishKamal Date: Fri, 5 Jul 2024 21:04:41 +0530 Subject: [PATCH 2/2] fix: homescreen --- lib/main.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/main.dart b/lib/main.dart index 205645b..525e7f9 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -16,7 +16,7 @@ class MyApp extends StatelessWidget { debugShowCheckedModeBanner: false, title: 'Spotify Collab', theme: darkTheme, - home: const LoginScreen(), + home: const HomeScreen(), ); } }