Skip to content

Commit

Permalink
feat: image shimmer, ui fixes, loading states
Browse files Browse the repository at this point in the history
  • Loading branch information
@JothishKamal
JothishKamal committed Jan 7, 2025
1 parent 41e2b44 commit e924404
Show file tree
Hide file tree
Showing 7 changed files with 141 additions and 129 deletions.
37 changes: 37 additions & 0 deletions lib/providers/create_screen_provider.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:developer';

import 'package:spotify_collab_app/utils/api_util.dart';

class CreateScreenNotifier extends StateNotifier<AsyncValue<void>> {
CreateScreenNotifier() : super(const AsyncValue.data(null));

Future<({bool success, String message})> createPlaylist(String name) async {
try {
state = const AsyncValue.loading();

final response = await apiUtil.post('/v1/playlists', {
'name': name,
});

log(response.toString());

if (response.statusCode == 200 &&
response.data["message"] == "playlist successfully created") {
state = const AsyncValue.data(null);
return (success: true, message: 'Playlist successfully created');
}

state = const AsyncValue.data(null);
return (success: false, message: 'Failed to create playlist');
} catch (e, st) {
state = AsyncValue.error(e, st);
return (success: false, message: 'Failed to create playlist');
}
}
}

final createScreenProvider =
StateNotifierProvider<CreateScreenNotifier, AsyncValue<void>>((ref) {
return CreateScreenNotifier();
});
56 changes: 2 additions & 54 deletions lib/view/screens/admin_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,6 @@ class _AdminScreenState extends ConsumerState<AdminScreen>

@override
Widget build(BuildContext context) {
double width = MediaQuery.sizeOf(context).width;
double height = MediaQuery.sizeOf(context).height;

final currentIndex = ref.watch(tabProvider);
Expand Down Expand Up @@ -105,9 +104,10 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
Padding(
padding: EdgeInsets.only(
top: height * 0.03,
left: height * 0.03,
),
child: Align(
alignment: Alignment.topCenter,
alignment: Alignment.topLeft,
child: Text(
ref.watch(playlistProvider.notifier).selectedPlaylistName!,
style: const TextStyle(
Expand Down Expand Up @@ -207,11 +207,6 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
),
),
),
Positioned(
right: width * 0.05,
top: height * 0.1,
child: SvgPicture.asset('assets/path.svg'),
)
],
);
}
Expand Down Expand Up @@ -292,53 +287,6 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
)
: Column(
children: [
Align(
alignment: Alignment.topRight,
child: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Radio<RequestAction>(
value: RequestAction.rejectAll,
groupValue: action,
onChanged: (value) => ref
.read(requestActionProvider.notifier)
.state = value!,
activeColor: Colors.red,
fillColor: const WidgetStatePropertyAll(Colors.red),
),
const Text(
"Reject All",
style: TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 10,
),
),
Radio<RequestAction>(
value: RequestAction.acceptAll,
groupValue: action,
onChanged: (value) => ref
.read(requestActionProvider.notifier)
.state = value!,
activeColor: Colors.green,
fillColor: const WidgetStatePropertyAll(Colors.green),
),
const Text(
"Accept All",
style: TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 10,
),
),
],
),
),
),
Expanded(
child: ListView.separated(
padding: const EdgeInsets.symmetric(
Expand Down
138 changes: 67 additions & 71 deletions lib/view/screens/create_screen.dart
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,9 @@
import 'dart:developer';

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:go_router/go_router.dart';
import 'package:spotify_collab_app/utils/api_util.dart';
import 'package:spotify_collab_app/view/widgets/background_widget.dart';
import 'package:spotify_collab_app/providers/create_screen_provider.dart';
import 'package:spotify_collab_app/view/widgets/custom_text_field.dart';
import 'package:spotify_collab_app/providers/photo_upload_notifier.dart';

Expand All @@ -19,15 +15,21 @@ class CreateScreen extends ConsumerWidget {
double width = MediaQuery.sizeOf(context).width;
double height = MediaQuery.sizeOf(context).height;
final TextEditingController eventNameController = TextEditingController();
final createState = ref.watch(createScreenProvider);

return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
BackgroundWidget(
width: width,
height: height,
color: Colors.white.withOpacity(0.35),
SizedBox(
height: double.infinity,
width: double.infinity,
child: SvgPicture.asset(
'assets/bg.svg',
colorFilter:
const ColorFilter.mode(Color(0xffd1dfdb), BlendMode.srcIn),
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.symmetric(
Expand Down Expand Up @@ -55,7 +57,7 @@ class CreateScreen extends ConsumerWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'new shared playlist',
'New Shared Playlist',
style: TextStyle(
fontFamily: 'Gotham',
shadows: <Shadow>[
Expand Down Expand Up @@ -114,7 +116,7 @@ class CreateScreen extends ConsumerWidget {
height: height * 0.055,
),
CustomTextField(
labelText: 'event name',
labelText: 'Event name',
obscureText: false,
textEditingController: eventNameController,
),
Expand All @@ -134,80 +136,74 @@ class CreateScreen extends ConsumerWidget {
const Color(0xff5822EE),
),
),
onPressed: () async {
if (eventNameController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
'Event name cannot be empty',
style: TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
backgroundColor: Colors.red,
),
);
} else {
Response<dynamic> response =
await apiUtil.post('/v1/playlists', {
'name': eventNameController.text,
});
log(response.toString());
if (response.statusCode == 200) {
if (response.data["message"] ==
"playlist successfully created") {
onPressed: createState.isLoading
? null
: () async {
if (eventNameController.text.isEmpty) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text(
'Event name cannot be empty',
style: TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
backgroundColor: Colors.red,
),
);
return;
}

final result = await ref
.read(createScreenProvider.notifier)
.createPlaylist(eventNameController.text);

if (!context.mounted) return;

ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
SnackBar(
content: Text(
'Playlist successfully created',
style: TextStyle(
result.message,
style: const TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
),
backgroundColor: Colors.green,
backgroundColor: result.success
? Colors.green
: Colors.red.withOpacity(0.8),
),
);

context.go('/home');
}
} else {
if (!context.mounted) return;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text(
'Failed to create playlist',
style: TextStyle(
fontFamily: 'Gotham',
color: Colors.white,
fontWeight: FontWeight.w600,
fontSize: 14,
),
if (result.success) {
context.go('/home');
}
},
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 5.0, vertical: 5),
child: createState.isLoading
? const SizedBox(
width: 20,
height: 20,
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white,
),
)
: const Text(
'Create event',
style: TextStyle(
fontFamily: 'Gotham',
fontSize: 16,
color: Colors.white,
),
backgroundColor:
Colors.red.withOpacity(0.8),
),
);
}
}
},
child: const Padding(
padding: EdgeInsets.symmetric(
horizontal: 5.0, vertical: 5),
child: Text(
'create event',
style: TextStyle(
fontFamily: 'Gotham',
fontSize: 16,
color: Colors.white,
),
),
),
),
),
Expand Down
4 changes: 1 addition & 3 deletions lib/view/screens/home_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ class HomeScreen extends ConsumerWidget {
appBar: AppBar(
automaticallyImplyLeading: false,
title: const CustomTitle(
title: "shared playlists",
title: "Shared Playlists",
),
backgroundColor: Colors.transparent,
),
Expand Down Expand Up @@ -108,5 +108,3 @@ class HomeScreen extends ConsumerWidget {
);
}
}


25 changes: 25 additions & 0 deletions lib/view/widgets/music_list_item.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shimmer/shimmer.dart';
import 'package:spotify_collab_app/providers/admin_screen_provider.dart';
import 'package:spotify_collab_app/providers/playlist_provider.dart';

Expand Down Expand Up @@ -71,11 +72,35 @@ class MusicListItem extends ConsumerWidget {
),
)
: Container(
width: 50,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
),
child: Image.network(
imageUrl!,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Shimmer.fromColors(
baseColor: Colors.grey[800]!,
highlightColor: Colors.grey[600]!,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
),
),
);
},
errorBuilder: (context, error, stackTrace) {
return Container(
decoration: BoxDecoration(
color: Colors.grey[800],
borderRadius: BorderRadius.circular(8.0),
),
child: const Icon(Icons.error_outline, color: Colors.white),
);
},
),
),
title: Text(
Expand Down
8 changes: 8 additions & 0 deletions pubspec.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -472,6 +472,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "2.4.1"
shimmer:
dependency: "direct main"
description:
name: shimmer
sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
url: "https://pub.dev"
source: hosted
version: "3.0.0"
sky_engine:
dependency: transitive
description: flutter
Expand Down
Loading

0 comments on commit e924404

Please sign in to comment.