Fetch the list of musics

lib/api.dart

@@ -0,0 +1,32 @@
+import 'package:dio/dio.dart';
+import 'package:music_web_player/config.dart';
+
+class MusicEntry {
+  final int id;
+  final String artist;
+  final String title;
+
+  const MusicEntry({
+    required this.id,
+    required this.artist,
+    required this.title,
+  });
+}
+
+class API {
+  /// Get the list of music
+  static Future<List<MusicEntry>> getList() async {
+    final response = await Dio().get(config.apiURL + "/list",
+        options: Options(headers: {"Token": config.apiToken}));
+
+    if (response.statusCode != 200) {
+      throw Exception("Request failed with status ${response.statusCode} !");
+    }
+
+    return response.data
+        .map((r) =>
+            MusicEntry(id: r["id"], artist: r["artist"], title: r["title"]))
+        .toList()
+        .cast<MusicEntry>();
+  }
+}

lib/main.dart

@@ -1,4 +1,8 @@
+// ignore_for_file: avoid_print
+
+import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
+import 'package:music_web_player/api.dart';
 import 'package:music_web_player/config.dart';
 
 void main() {
@@ -32,8 +36,59 @@ class AppHome extends StatefulWidget {
 }
 
 class _AppHomeState extends State<AppHome> {
+  var error = false;
+  List<MusicEntry>? musics;
+
+  Future<void> load() async {
+    try {
+      setState(() => error = false);
+      musics = await API.getList();
+      setState(() {});
+    } catch (e, s) {
+      print("$e $s");
+      setState(() => error = true);
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    load();
+  }
+
   @override
   Widget build(BuildContext context) {
-    return Scaffold();
+    return Scaffold(body: buildBody(context));
+  }
+
+  Widget buildBody(BuildContext context) {
+    if (error) {
+      return Center(
+          child: IntrinsicHeight(
+        child: Column(
+          children: [
+            const Icon(FluentIcons.warning_24_regular, size: 50),
+            const SizedBox(height: 50),
+            const Text("Failed to load musics list!"),
+            const SizedBox(height: 50),
+            ElevatedButton(
+              onPressed: load,
+              child: Text("Try again".toUpperCase()),
+            ),
+          ],
+        ),
+      ));
+    }
+
+    if (musics == null) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (musics!.isEmpty) {
+      return const Center(child: Text("Musics list is empty!"));
+    }
+
+    // TODO : go on
+    return Text(musics![0].artist);
   }
 }

pubspec.lock

@@ -50,6 +50,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.0.4"
+  dio:
+    dependency: "direct main"
+    description:
+      name: dio
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.4"
   fake_async:
     dependency: transitive
     description:
@@ -57,6 +64,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "1.2.0"
+  fluentui_system_icons:
+    dependency: "direct main"
+    description:
+      name: fluentui_system_icons
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.1.162"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -74,6 +88,13 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.0"
   lints:
     dependency: transitive
     description:

pubspec.yaml

@@ -35,6 +35,12 @@ dependencies:
   # Use with the CupertinoIcons class for iOS style icons.
   cupertino_icons: ^1.0.2
 
+  # HTTP client
+  dio: ^4.0.4
+
+  # Fluent icons
+  fluentui_system_icons: ^1.1.162
+
 dev_dependencies:
   flutter_test:
     sdk: flutter

web/index.html

@@ -31,6 +31,10 @@
 
   <title>music_web_player</title>
   <link rel="manifest" href="manifest.json">
+
+  <style type="text/css">
+    body { background-color: black; }
+  </style>
 </head>
 <body>
   <!-- This script installs service_worker.js to provide PWA functionality to