Implemented player panel

lib/ui/widgets/settings_item.dart

@@ -0,0 +1,88 @@
+import 'package:flutter/material.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+class SettingsItem extends StatefulWidget {
+  final IconData icon;
+  final Color iconBgColor;
+  final String title;
+  final String description;
+  final VoidCallback? onTap;
+
+  const SettingsItem({
+    super.key,
+    required this.icon,
+    required this.iconBgColor,
+    required this.title,
+    required this.description,
+    this.onTap,
+  });
+
+  @override
+  State<SettingsItem> createState() => _SettingsItemState();
+}
+
+class _SettingsItemState extends State<SettingsItem> {
+  bool pressed = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final Widget icon = Icon(widget.icon, size: 20, color: Colors.white)
+        .padding(all: 12)
+        .decorated(
+          color: widget.iconBgColor,
+          borderRadius: BorderRadius.circular(30),
+        )
+        .padding(left: 15, right: 10);
+
+    final Widget title = Text(
+      widget.title,
+      style: const TextStyle(
+        fontWeight: FontWeight.bold,
+        fontSize: 16,
+      ),
+    ).padding(bottom: 5);
+
+    final Widget description = Text(
+      widget.description,
+      style: const TextStyle(
+        color: Colors.white60,
+        fontWeight: FontWeight.bold,
+        fontSize: 12,
+      ),
+    );
+
+    return settingsItem(
+      child: <Widget>[
+        icon,
+        <Widget>[
+          title,
+          description,
+        ].toColumn(
+          mainAxisAlignment: MainAxisAlignment.center,
+          crossAxisAlignment: CrossAxisAlignment.start,
+        ),
+      ].toRow(),
+    );
+  }
+
+  Widget settingsItem({required Widget child}) => Styled.widget(child: child)
+      .alignment(Alignment.center)
+      .borderRadius(all: 15)
+      .ripple()
+      .backgroundColor(Colors.grey.shade900, animate: true)
+      .clipRRect(all: 25) // clip ripple
+      .borderRadius(all: 25, animate: true)
+      .elevation(
+        pressed ? 0 : 20,
+        borderRadius: BorderRadius.circular(25),
+        shadowColor: const Color(0x30000000),
+      ) // shadow borderRadius
+      .constrained(height: 80)
+      .padding(vertical: 12) // margin
+      .gestures(
+        onTapChange: (tapStatus) => setState(() => pressed = tapStatus),
+        onTap: widget.onTap,
+      )
+      .scale(all: pressed ? 0.95 : 1.0, animate: true)
+      .animate(const Duration(milliseconds: 150), Curves.easeOut);
+}