SK-609: Update UI for New chat Create group screen

sama_chat_client/lib/src/features/conversation_create/view/conversation_create_form.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import '../../../navigation/constants.dart';
+import '../../../shared/ui/colors.dart';
+import '../../search/view/search_bar.dart';
+import '../../search/view/search_form.dart';
+
+class ConversationCreateForm extends StatefulWidget {
+  const ConversationCreateForm({super.key});
+
+  @override
+  State<StatefulWidget> createState() {
+    return ConversationCreateFormState();
+  }
+}
+
+class ConversationCreateFormState extends State<ConversationCreateForm> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: const GlobalSearchBar(),
+        body: Container(
+          padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 4),
+          child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(children: <Widget>[
+                  Expanded(
+                    child: Padding(
+                      padding: const EdgeInsets.only(top: 20.0, bottom: 16.0),
+                      child: TextButton.icon(
+                        style: const ButtonStyle(
+                          backgroundColor: WidgetStatePropertyAll(slateBlue),
+                        ),
+                        onPressed: () => context.push(groupCreateScreenPath),
+                        icon: const Icon(Icons.group_outlined,
+                            color: lightWhite, size: 25),
+                        label: const Text(
+                          'Create group',
+                          style: TextStyle(
+                              color: lightWhite,
+                              fontSize: 16,
+                              fontWeight: FontWeight.w500),
+                        ),
+                      ),
+                    ),
+                  ),
+                ]),
+                const Expanded(
+                    child: Column(mainAxisSize: MainAxisSize.min, children: [
+                  Padding(
+                    padding: EdgeInsets.only(bottom: 8.0, top: 8.0),
+                    child: Align(
+                      alignment: Alignment.centerLeft,
+                      child: Text(
+                        'List of users:',
+                        style: TextStyle(
+                            fontWeight: FontWeight.bold, fontSize: 16),
+                      ),
+                    ),
+                  ),
+                  SearchBody(searchType: SearchType.users)
+                ]))
+              ]),
+        ));
+  }
+}

sama_chat_client/lib/src/features/conversation_create/view/conversation_create_page.dart

@@ -0,0 +1,61 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+
+import '../../../db/models/conversation_model.dart';
+import '../../../navigation/constants.dart';
+import '../../../repository/conversation/conversation_repository.dart';
+import '../../../repository/global_search/global_search_repository.dart';
+import '../../../shared/ui/view/loading_overlay.dart';
+import '../../conversation_create/bloc/conversation_create_bloc.dart';
+import '../../conversation_create/bloc/conversation_create_state.dart';
+import '../../search/bloc/global_search_bloc.dart';
+import '../../conversation_create/view/conversation_create_form.dart';
+
+class ConversationCreatePage extends StatelessWidget {
+  const ConversationCreatePage({super.key});
+
+  static MultiBlocProvider route() {
+    return MultiBlocProvider(
+      providers: [
+        BlocProvider<GlobalSearchBloc>(
+          create: (context) => GlobalSearchBloc(
+            globalSearchRepository:
+                RepositoryProvider.of<GlobalSearchRepository>(context),
+          ),
+        ),
+        BlocProvider<ConversationCreateBloc>(
+          create: (context) => ConversationCreateBloc(
+            conversationRepository:
+                RepositoryProvider.of<ConversationRepository>(context),
+          ),
+        ),
+      ],
+      child: const ConversationCreatePage(),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final LoadingOverlay loadingOverlay = LoadingOverlay();
+    return BlocListener<ConversationCreateBloc, ConversationCreateState>(
+        listener: (context, state) {
+          if (state is ConversationCreatedLoading) {
+            loadingOverlay.show(context);
+          } else if (state is ConversationCreatedState) {
+            loadingOverlay.hide();
+            ConversationModel conversation = state.conversation;
+            context.go('$conversationListScreenPath/$conversationScreenSubPath',
+                extra: conversation);
+          } else if (state is ConversationCreatedStateError) {
+            loadingOverlay.hide();
+            ScaffoldMessenger.of(context)
+              ..hideCurrentSnackBar()
+              ..showSnackBar(
+                SnackBar(content: Text(state.error ?? '')),
+              );
+          }
+        },
+        child: const ConversationCreateForm());
+  }
+}

sama_chat_client/lib/src/features/conversation_group_create/view/group_create_form.dart

@@ -1,11 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:formz/formz.dart';
+import 'package:sama_sdk/api/settings.dart';
 
 import '../../../db/models/user_model.dart';
 import '../../../features/conversation_create/bloc/conversation_create_event.dart';
 import '../../../shared/ui/colors.dart';
 import '../../../shared/ui/view/participants_forms.dart';
+import '../../../shared/ui/view/text_button_forms.dart';
 import '../../../shared/utils/api_utils.dart';
 import '../../../shared/utils/screen_factor.dart';
 import '../../conversation_create/bloc/conversation_create_bloc.dart';
@@ -83,19 +85,23 @@ class GroupCreateFormState extends State<GroupCreateForm> {
           return previous.participants != current.participants;
         }, builder: (context, state) {
           return Visibility(
-            visible: !keyboardIsOpenCtx(context),
-            child: Visibility(
-              visible: state.participants.isValid,
-              child: FloatingActionButton(
-                backgroundColor: slateBlue,
-                tooltip: 'Next',
-                onPressed: () {
-                  _showGroupDetails(context);
-                },
-                child: const Icon(Icons.arrow_forward, color: white, size: 28),
-              ),
-            ),
-          );
+              visible: !keyboardIsOpenCtx(context),
+              child: Visibility(
+                visible: state.participants.isValid,
+                child: IntrinsicWidth(
+                  child: ButtonForm(
+                      onPressed: () {
+                        _showGroupDetails(context);
+                      },
+                      backgroundColor: WidgetStatePropertyAll(
+                          state.participants.isValid
+                              ? slateBlue
+                              : whiteAluminum),
+                      foregroundColor: WidgetStatePropertyAll(
+                          state.participants.isValid ? white : gainsborough),
+                      hint: 'Next'),
+                ),
+              ));
         }));
   }
 }
@@ -119,16 +125,16 @@ void _showGroupDetails(BuildContext context) {
                 value: BlocProvider.of<GroupBloc>(context),
                 child: _GroupDetailsForm()),
             floatingActionButton: Visibility(
-              visible: !keyboardIsOpenCtx(context),
-              child: FloatingActionButton(
-                backgroundColor: slateBlue,
-                tooltip: 'Create chat',
-                onPressed: () {
-                  context.read<GroupBloc>().add(GroupSubmitted());
-                },
-                child: const Icon(Icons.check, color: white, size: 28),
-              ),
-            ),
+                visible: !keyboardIsOpenCtx(context),
+                child: IntrinsicWidth(
+                  child: ButtonForm(
+                      onPressed: () {
+                        context.read<GroupBloc>().add(GroupSubmitted());
+                      },
+                      backgroundColor: const WidgetStatePropertyAll(slateBlue),
+                      foregroundColor: const WidgetStatePropertyAll(white),
+                      hint: 'Create'),
+                )),
           )));
 }
 
@@ -170,7 +176,7 @@ class _GroupDetailsForm extends StatelessWidget {
             padding: const EdgeInsets.only(top: 24.0),
             child: Align(
               alignment: Alignment.centerLeft,
-              child: Text('Participants ${users.length}/$maxParticipantsCount',
+              child: Text('Participants ${users.length + 1}/$maxParticipants',
                   style: const TextStyle(
                       fontWeight: FontWeight.bold, fontSize: 18)),
             ),
@@ -189,14 +195,13 @@ class _GroupAvatar extends StatelessWidget {
           return GestureDetector(
               onTap: () => context.read<GroupBloc>().add(GroupAvatarPicked()),
               child: Container(
-                  decoration: BoxDecoration(
+                  decoration: const BoxDecoration(
                     color: black,
-                    borderRadius: BorderRadius.circular(5.0),
+                    shape: BoxShape.circle,
                   ),
-                  padding: const EdgeInsets.all(4.0),
                   height: 60.0,
                   width: 60.0,
-                  child: Center(child: () {
+                  child: Center(child: ClipOval(child: () {
                     if (state.avatar.value == null) {
                       return const Icon(
                         Icons.image_outlined,
@@ -212,7 +217,7 @@ class _GroupAvatar extends StatelessWidget {
                         fit: BoxFit.cover,
                       );
                     }
-                  }())));
+                  }()))));
         });
   }
 }
@@ -223,43 +228,16 @@ class _GroupNameInput extends StatelessWidget {
     return BlocBuilder<GroupBloc, GroupState>(
       buildWhen: (previous, current) => previous.groupname != current.groupname,
       builder: (context, state) {
-        return Container(
-          height: 60.0,
-          padding: const EdgeInsets.all(8),
-          decoration: const BoxDecoration(
-            borderRadius: BorderRadius.all(Radius.circular(12)),
-            color: gainsborough,
-          ),
-          child: TextField(
-            key: const Key('groupCreateForm_groupnameInput_textField'),
-            keyboardType: TextInputType.text,
+        return TextFieldForm(
             onChanged: (groupname) =>
                 context.read<GroupBloc>().add(GroupnameChanged(groupname)),
-            decoration: InputDecoration(
-              border: InputBorder.none,
-              contentPadding: const EdgeInsets.only(bottom: 4),
-              label: const Row(
-                children: [
-                  Icon(
-                    Icons.group,
-                    size: 16,
-                    color: dullGray,
-                  ),
-                  Text(
-                    'Groupname',
-                    style: TextStyle(color: dullGray, fontSize: 16),
-                  )
-                ],
-              ),
-              errorText: state.groupname.displayError != null
-                  ? state.groupname.displayError ==
-                          GroupnameValidationError.short
-                      ? 'Group name is too short'
-                      : null
-                  : null,
-            ),
-          ),
-        );
+            iconData: Icons.group,
+            hint: 'Groupname',
+            error: state.groupname.displayError != null
+                ? state.groupname.displayError == GroupnameValidationError.short
+                    ? 'Group name is too short'
+                    : null
+                : null);
       },
     );
   }

sama_chat_client/lib/src/features/conversations_list/view/conversations_page.dart

@@ -102,7 +102,7 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
       actions: <Widget>[
         ConnectionChecker(
           child: IconButton(
-            onPressed: () => _openSearch(context),
+            onPressed: () => context.push(conversationCreateScreenPath),
             icon: const Icon(
               Icons.edit_note_outlined,
               color: lightWhite,
@@ -114,11 +114,6 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
     );
   }
 
-  _openSearch(BuildContext context) {
-    context.push(groupCreateScreenPath);
-    // context.push(globalSearchPath);
-  }
-
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight);
 }

sama_chat_client/lib/src/features/conversations_list/widgets/avatar_group_icon.dart

@@ -12,16 +12,14 @@ class AvatarGroupIcon extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-        decoration: BoxDecoration(
+        decoration: const BoxDecoration(
           color: black,
-          borderRadius: BorderRadius.circular(5.0),
+          shape: BoxShape.circle,
         ),
-        padding: const EdgeInsets.all(4.0),
         height: size.height,
         width: size.width,
         child: Center(
-          child: ClipRRect(
-            borderRadius: BorderRadius.circular(5.0),
+          child: ClipOval(
             child: avatar?.imageUrl != null
                 ? Image.network(
                     avatar!.imageUrl!,

sama_chat_client/lib/src/features/conversations_list/widgets/avatar_letter_icon.dart

@@ -9,8 +9,7 @@ class AvatarLetterIcon extends StatelessWidget {
     this.lastName,
     super.key,
     this.size = const Size(55, 60),
-    this.borderRadius = 5.0,
-    this.padding = const EdgeInsets.all(4.0),
+    this.padding = EdgeInsets.zero,
     this.backgroundColor = black,
     this.textColor = dullGray,
     this.avatar,
@@ -21,7 +20,6 @@ class AvatarLetterIcon extends StatelessWidget {
   final String name;
   final String? lastName;
   final Size size;
-  final double borderRadius;
   final EdgeInsetsGeometry padding;
   final Color backgroundColor;
   final Color textColor;
@@ -41,14 +39,14 @@ class AvatarLetterIcon extends StatelessWidget {
     return Container(
       decoration: BoxDecoration(
         color: backgroundColor,
-        borderRadius: BorderRadius.circular(borderRadius),
+        shape: BoxShape.circle,
+        // border: Border.all(color: whiteAluminum, width: 2),
       ),
-      padding: padding,
+      // padding: padding,
       height: size.height,
       width: size.width,
       child: Center(
-        child: ClipRRect(
-          borderRadius: BorderRadius.circular(borderRadius),
+        child: ClipOval(
           child: avatar?.imageUrl != null
               ? Image.network(
                   avatar!.imageUrl!,