Add player buttons

lib/main.dart

@@ -1,102 +1,8 @@
-// ignore_for_file: avoid_print
-
-import 'package:fluent_ui/fluent_ui.dart' as fluent;
-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';
-import 'package:music_web_player/ui/music_player.dart';
+import 'package:music_web_player/ui/player_app.dart';
 
 void main() {
   loadConfig();
   runApp(const PlayerApp());
 }
-
-class PlayerApp extends StatelessWidget {
-  const PlayerApp({Key? key}) : super(key: key);
-
-  // This widget is the root of your application.
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Music player',
-      debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-        primarySwatch: Colors.green,
-        brightness: Brightness.dark,
-      ),
-      home: fluent.FluentTheme(
-        child: const AppHome(),
-        data: fluent.ThemeData(),
-      ),
-    );
-  }
-}
-
-class AppHome extends StatefulWidget {
-  const AppHome({Key? key}) : super(key: key);
-
-  @override
-  State<AppHome> createState() => _AppHomeState();
-}
-
-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(body: buildBody(context));
-  }
-
-  Widget buildBody(BuildContext context) {
-    if (error) {
-      return Center(
-          child: IntrinsicHeight(
-        child: Column(
-          children: [
-            const Icon(
-              FluentIcons.warning_24_regular,
-              size: 50,
-              color: Colors.white,
-            ),
-            const SizedBox(height: 50),
-            const Text("Failed to load musics list!"),
-            const SizedBox(height: 50),
-            fluent.FilledButton(
-              onPressed: load,
-              child: Text("Try again".toUpperCase()),
-            ),
-          ],
-        ),
-      ));
-    }
-
-    if (musics == null) {
-      return const Center(child: fluent.ProgressRing());
-    }
-
-    if (musics!.isEmpty) {
-      return const Center(child: Text("Musics list is empty!"));
-    }
-
-    return MusicPlayer(musicsList: musics!);
-  }
-}

lib/ui/music_player.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 import 'dart:ui';
 
+import 'package:fluent_ui/fluent_ui.dart' as fluent;
 import 'package:fluentui_system_icons/fluentui_system_icons.dart';
 import 'package:flutter/material.dart';
 import 'package:music_web_player/api.dart';
@@ -67,9 +68,12 @@ class _MusicPlayerState extends State<MusicPlayer> {
   }
 
   Widget _buildCenter() {
-    return Center(
-      child: IntrinsicHeight(
+    return fluent.Center(
+      child: Container(
+        width: 250,
         child: Column(
+          mainAxisAlignment: fluent.MainAxisAlignment.center,
+          crossAxisAlignment: fluent.CrossAxisAlignment.center,
           children: [
             Material(
               borderRadius: const BorderRadius.all(
@@ -89,9 +93,45 @@ class _MusicPlayerState extends State<MusicPlayer> {
             Text(currMusic.title, style: const TextStyle(fontSize: 22)),
             const SizedBox(height: 20),
             Text(currMusic.artist),
+            const fluent.SizedBox(height: 40),
+            fluent.Slider(
+              max: 100,
+              value: 10,
+              onChanged: (v) => {},
+              // Label is the text displayed above the slider when the user is interacting with it.
+              label: 'hey',
+            ),
+            const fluent.SizedBox(height: 40),
+            fluent.Row(
+              children: [
+                IconButton(
+                  icon: const PlayerIcon(fluent.FluentIcons.previous),
+                  onPressed: () => {},
+                ),
+                const Spacer(),
+                IconButton(
+                  icon: const PlayerIcon(fluent.FluentIcons.play),
+                  onPressed: () => {},
+                ),
+                const Spacer(),
+                IconButton(
+                  icon: const PlayerIcon(fluent.FluentIcons.next),
+                  onPressed: () => {},
+                ),
+              ],
+            )
           ],
         ),
       ),
     );
   }
 }
+
+class PlayerIcon extends StatelessWidget {
+  final IconData icon;
+
+  const PlayerIcon(this.icon, {Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) => Icon(icon, size: 35);
+}

lib/ui/player_app.dart

@@ -0,0 +1,97 @@
+// ignore_for_file: avoid_print
+
+import 'package:fluent_ui/fluent_ui.dart' as fluent;
+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/ui/music_player.dart';
+
+class PlayerApp extends StatelessWidget {
+  const PlayerApp({Key? key}) : super(key: key);
+
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Music player',
+      debugShowCheckedModeBanner: false,
+      theme: ThemeData(
+        primarySwatch: Colors.green,
+        brightness: Brightness.dark,
+      ),
+      home: fluent.FluentTheme(
+        child: const AppHome(),
+        data: fluent.ThemeData(
+            iconTheme: const IconThemeData(color: Colors.white)),
+      ),
+    );
+  }
+}
+
+class AppHome extends StatefulWidget {
+  const AppHome({Key? key}) : super(key: key);
+
+  @override
+  State<AppHome> createState() => _AppHomeState();
+}
+
+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(body: buildBody(context));
+  }
+
+  Widget buildBody(BuildContext context) {
+    if (error) {
+      return Center(
+          child: IntrinsicHeight(
+        child: Column(
+          children: [
+            const Icon(
+              FluentIcons.warning_24_regular,
+              size: 50,
+              color: Colors.white,
+            ),
+            const SizedBox(height: 50),
+            const Text("Failed to load musics list!"),
+            const SizedBox(height: 50),
+            fluent.FilledButton(
+              onPressed: load,
+              child: Text("Try again".toUpperCase()),
+            ),
+          ],
+        ),
+      ));
+    }
+
+    if (musics == null) {
+      return const Center(child: fluent.ProgressRing());
+    }
+
+    if (musics!.isEmpty) {
+      return const Center(child: Text("Musics list is empty!"));
+    }
+
+    return MusicPlayer(musicsList: musics!);
+  }
+}

test/widget_test.dart

@@ -7,8 +7,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
-
-import 'package:music_web_player/main.dart';
+import 'package:music_web_player/ui/player_app.dart';
 
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {