Implemented player panel

lib/ui/widgets/settings.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+import 'package:huacu_mobile/models/settings_item_model.dart';
+import 'package:huacu_mobile/ui/widgets/settings_item.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+class Settings extends StatelessWidget {
+  final List<SettingsItemModel> settingsItems;
+
+  const Settings({super.key, required this.settingsItems});
+
+  @override
+  Widget build(BuildContext context) => settingsItems
+      .map((settingsItem) => SettingsItem(
+            icon: settingsItem.icon,
+            iconBgColor: settingsItem.color,
+            title: settingsItem.title,
+            description: settingsItem.description,
+            onTap: settingsItem.onTap,
+          ))
+      .toList()
+      .toColumn();
+}

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);
+}

lib/ui/widgets/user_card.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_boring_avatars/flutter_boring_avatars.dart';
+import 'package:huacu_mobile/game_pallete.dart';
+import 'package:huacu_mobile/models/auth_data.dart';
+import 'package:huacu_mobile/models/user_data.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+class UserCard extends StatelessWidget {
+  final AuthData authData;
+  final UserData userData;
+
+  const UserCard({Key? key, required this.authData, required this.userData})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return [_buildUserRow(), _buildUserStats()]
+        .toColumn(mainAxisAlignment: MainAxisAlignment.spaceAround)
+        .padding(horizontal: 20)
+        .decorated(
+            color: Colors.blueAccent.shade400,
+            borderRadius: BorderRadius.circular(20))
+        .elevation(
+          5,
+          shadowColor: Colors.blueAccent.shade400,
+          borderRadius: BorderRadius.circular(20),
+        )
+        .height(175)
+        .alignment(Alignment.topCenter);
+  }
+
+  Widget _buildUserRow() {
+    return [
+      BoringAvatars(
+        name: authData.id,
+        colors: avatarColors,
+        type: BoringAvatarsType.beam,
+      ).constrained(height: 50, width: 50).padding(right: 10),
+      [
+        Text(
+          authData.login,
+          style: const TextStyle(
+            color: Colors.white,
+            fontSize: 18,
+            fontWeight: FontWeight.bold,
+          ),
+        ).padding(bottom: 5),
+        Text(
+          "Our one of the best player",
+          style: TextStyle(
+            color: Colors.white.withOpacity(0.6),
+            fontSize: 12,
+          ),
+        ),
+      ].toColumn(crossAxisAlignment: CrossAxisAlignment.start),
+    ].toRow();
+  }
+
+  Widget _buildUserStatsItem(String value, String text) => <Widget>[
+        Text(value).fontSize(20).textColor(Colors.white).padding(bottom: 5),
+        Text(text).textColor(Colors.white.withOpacity(0.6)).fontSize(12),
+      ].toColumn();
+
+  Widget _buildUserStats() {
+    return [
+      _buildUserStatsItem(userData.gamesWon.toString(), 'Wins'),
+      _buildUserStatsItem(userData.gamesLost.toString(), 'Losses'),
+    ]
+        .toRow(mainAxisAlignment: MainAxisAlignment.spaceAround)
+        .padding(vertical: 10);
+  }
+}