1 files changed, 130 insertions, 0 deletions
diff --git a/lib/screens/album_detail_screen.dart b/lib/screens/album_detail_screen.dart
new file mode 100644
index 0000000..478c0b6
--- /dev/null
+++ b/lib/screens/album_detail_screen.dart
@@ -0,0 +1,130 @@
+import 'package:flutter/material.dart';
+import 'package:pmsna1/models/album.dart';
+import 'package:pmsna1/models/artist.dart';
+import 'package:pmsna1/network/music_api.dart';
+import 'package:pmsna1/widgets/album_placeholder.dart';
+import 'package:pmsna1/widgets/responsive.dart';
+
+class AlbumDetailScreen extends StatefulWidget {
+  const AlbumDetailScreen({super.key});
+
+  @override
+  State<AlbumDetailScreen> createState() => _AlbumDetailScreenState();
+}
+
+class _AlbumDetailScreenState extends State<AlbumDetailScreen> {
+  MusicApi? api;
+  Album? album;
+
+  @override
+  void initState() {
+    super.initState();
+    api = MusicApi();
+  }
+
+  Widget getArtistCard(Artist artist, BuildContext context) => Card(
+        margin: const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 2.0),
+        child: Padding(
+          padding: const EdgeInsets.all(16.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(
+                artist.name,
+                style: Theme.of(context)
+                    .typography
+                    .englishLike
+                    .bodyLarge
+                    ?.copyWith(color: Theme.of(context).colorScheme.onSurface),
+              ),
+              const SizedBox(height: 4.0),
+              Text(artist.disambiguation),
+            ],
+          ),
+        ),
+      );
+
+  // Widget getLeft() => Image.network(album!.coverUri.toString());
+  Widget getLeft() => const SizedBox.shrink();
+
+  Widget getRight() => Column(
+        children: [
+          ListTile(
+            title: const Text('Fecha de lanzamiento'),
+            subtitle: Text(album!.firstReleaseDate),
+          ),
+          ListTile(
+            title: const Text('Tipo'),
+            subtitle: Text(album!.primaryType),
+          ),
+          ListTile(
+            title: const Text('Artistas'),
+            subtitle: FutureBuilder(
+              future: api!.getAlbumArtists(album!.id),
+              initialData: const [],
+              builder: (context, snapshot) => snapshot.hasData
+                  ? ListView.builder(
+                      shrinkWrap: true,
+                      physics: const NeverScrollableScrollPhysics(),
+                      itemCount: snapshot.data?.length,
+                      itemBuilder: (context, index) {
+                        Artist artist = snapshot.data![index];
+                        return getArtistCard(artist, context);
+                      })
+                  : snapshot.hasError
+                      ? const Text('Ocurrió un error')
+                      : const CircularProgressIndicator(),
+            ),
+          )
+        ],
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    album = ModalRoute.of(context)?.settings.arguments as Album?;
+    if (album == null) return const Placeholder();
+
+    Image cover = Image.network(
+      album!.coverUri.toString(),
+      fit: BoxFit.cover,
+      alignment: Alignment.center,
+      errorBuilder: (context, error, stackTrace) => const AlbumPlaceholder(400),
+      loadingBuilder: (context, child, loadingProgress) =>
+          loadingProgress == null ? child : const AlbumPlaceholder(400),
+    );
+
+    return Scaffold(
+      body: NestedScrollView(
+        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) =>
+            <Widget>[
+          SliverAppBar(
+            expandedHeight: 400.0,
+            pinned: true,
+            flexibleSpace: FlexibleSpaceBar(
+              title: Text(album!.title,
+                  style: TextStyle(
+                    backgroundColor:
+                        Theme.of(context).colorScheme.primaryContainer,
+                    color: Theme.of(context).colorScheme.onPrimaryContainer,
+                  )),
+              background: cover,
+            ),
+          )
+        ],
+        body: SingleChildScrollView(
+          child: Responsive(
+            mobile: Column(children: [getLeft(), getRight()]),
+            tablet: Row(children: [
+              Expanded(child: getLeft()),
+              Expanded(child: getRight()),
+            ]),
+            desktop: Row(children: [
+              Expanded(child: getLeft()),
+              Expanded(child: getRight()),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+}