Fix name display

ANDREYDEN · Dec 3, 2023 · 067a869 · 067a869
1 parent e90112d
commit 067a869
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 54 deletions.
diff --git a/lib/ui/widgets/user_avatar.dart b/lib/ui/widgets/user_avatar.dart
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
 import 'package:statera/data/models/custom_user.dart';
 
+part 'user_avatar_name.dart';
+
 class UserAvatar extends StatelessWidget {
   final CustomUser author;
   final void Function()? onTap;
@@ -105,25 +107,12 @@ class UserAvatar extends StatelessWidget {
                 ],
               ),
               if (this.withName)
-                if (!this.loading)
-                  Flexible(
-                    child: Padding(
-                      padding: const EdgeInsets.symmetric(horizontal: 10.0),
-                      child: Text(
-                        this.author.name,
-                        overflow: TextOverflow.ellipsis,
-                      ),
-                    ),
-                  )
-                else
-                  Container(
-                    width: 80,
-                    height: 16,
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(10),
-                      color: Colors.grey,
-                    ),
-                  ),
+                UserAvatarName(
+                  author.name,
+                  loading: loading,
+                  namePosition: namePosition,
+                  dimension: dimension,
+                )
             ],
           ),
         ),

diff --git a/lib/ui/widgets/user_avatar_name.dart b/lib/ui/widgets/user_avatar_name.dart
@@ -0,0 +1,45 @@
+part of 'user_avatar.dart';
+
+class UserAvatarName extends StatelessWidget {
+  final String name;
+  final bool loading;
+  final NamePosition namePosition;
+  final double? dimension;
+
+  const UserAvatarName(String this.name,
+      {super.key,
+      required this.loading,
+      required this.namePosition,
+      this.dimension});
+
+  @override
+  Widget build(BuildContext context) {
+    if (loading) {
+      return Container(
+        width: 80,
+        height: 16,
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(10),
+          color: Colors.grey,
+        ),
+      );
+    }
+    return Flexible(
+      child: Container(
+        padding: namePosition == NamePosition.right
+            ? EdgeInsets.symmetric(horizontal: 10)
+            : null,
+        width: dimension == null
+            ? null
+            : this.namePosition == NamePosition.bottom
+                ? dimension! + 10
+                : null,
+        child: Text(
+          name,
+          textAlign: TextAlign.center,
+          overflow: TextOverflow.ellipsis,
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/ui/widgets/user_avatar_preview.dart b/lib/ui/widgets/user_avatar_preview.dart
@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:statera/custom_theme_builder.dart';
 import 'package:statera/data/models/custom_user.dart';
+import 'package:statera/data/services/preferences_service.dart';
 import 'package:statera/ui/widgets/user_avatar.dart';
 
 void main() {
@@ -12,43 +14,65 @@ class UserAvatarExamples extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return CustomThemeBuilder(
-      builder: (lightTheme, darkTheme) {
-        return MaterialApp(
-          theme: lightTheme,
-          darkTheme: darkTheme,
-          themeMode: ThemeMode.system,
-          home: Scaffold(
-            body: ListView(
-              children: [
-                UserAvatar(
-                  author:
-                      CustomUser.fake(photoURL: 'https://picsum.photos/300'),
-                  dimension: 40,
-                ),
-                Row(
-                  children: [20, 40, 60, 100, 200]
-                      .map(
-                        (dimension) => UserAvatar(
-                          author: CustomUser.fake(name: 'User', photoURL: null),
-                          dimension: dimension * 1.0,
-                        ),
-                      )
-                      .toList(),
-                ),
-                UserAvatar(
-                  author: CustomUser.fake(
-                    name: 'John Doe',
-                    photoURL: 'https://picsum.photos/300',
+    return Provider.value(
+      value: PreferencesService(),
+      child: CustomThemeBuilder(
+        builder: (lightTheme, darkTheme) {
+          return MaterialApp(
+            theme: lightTheme,
+            darkTheme: darkTheme,
+            themeMode: ThemeMode.system,
+            home: Scaffold(
+              body: ListView(
+                children: [
+                  UserAvatar(
+                    author:
+                        CustomUser.fake(photoURL: 'https://picsum.photos/300'),
+                    dimension: 40,
                   ),
-                  dimension: 40,
-                  withName: true,
-                ),
-              ],
+                  Row(
+                    children: [20, 40, 60, 100, 200]
+                        .map(
+                          (dimension) => UserAvatar(
+                            author:
+                                CustomUser.fake(name: 'User', photoURL: null),
+                            dimension: dimension * 1.0,
+                          ),
+                        )
+                        .toList(),
+                  ),
+                  UserAvatar(
+                    author: CustomUser.fake(
+                      name: 'John Doe',
+                      photoURL: 'https://picsum.photos/300',
+                    ),
+                    dimension: 40,
+                    withName: true,
+                  ),
+                  UserAvatar(
+                    author: CustomUser.fake(
+                      name: 'Very long name',
+                      photoURL: 'https://picsum.photos/300',
+                    ),
+                    dimension: 80,
+                    withName: true,
+                    namePosition: NamePosition.bottom,
+                  ),
+                  UserAvatar(
+                    author: CustomUser.fake(
+                      name: 'short',
+                      photoURL: 'https://picsum.photos/300',
+                    ),
+                    dimension: 80,
+                    withName: true,
+                    namePosition: NamePosition.bottom,
+                  ),
+                ],
+              ),
             ),
-          ),
-        );
-      },
+          );
+        },
+      ),
     );
   }
 }