Updated stacks & buttons

lib/presentation/views/main_menu/group_view/create_group_view.dart

@@ -8,7 +8,7 @@ import 'package:tallee/data/db/database.dart';
 import 'package:tallee/data/models/group.dart';
 import 'package:tallee/data/models/player.dart';
 import 'package:tallee/l10n/generated/app_localizations.dart';
-import 'package:tallee/presentation/widgets/buttons/custom_width_button.dart';
+import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
 import 'package:tallee/presentation/widgets/player_selection.dart';
 import 'package:tallee/presentation/widgets/text_input/text_input_field.dart';
 
@@ -96,19 +96,24 @@ class _CreateGroupViewState extends State<CreateGroupView> {
                   },
                 ),
               ),
-              CustomWidthButton(
+              Padding(
-                text: widget.groupToEdit == null
+                padding: const EdgeInsets.symmetric(horizontal: 12),
-                    ? loc.create_group
+                child: AnimatedDialogButton(
-                    : loc.edit_group,
+                  buttonConstraints: const BoxConstraints(
-                sizeRelativeToWidth: 0.95,
+                    minWidth: double.infinity,
-                buttonType: ButtonType.primary,
+                    minHeight: 50,
-                onPressed:
+                  ),
-                    (_groupNameController.text.isEmpty ||
+                  buttonText: widget.groupToEdit == null
-                        (selectedPlayers.length < 2))
+                      ? loc.create_group
-                    ? null
+                      : loc.edit_group,
-                    : _saveGroup,
+                  buttonType: ButtonType.primary,
+                  onPressed:
+                      (_groupNameController.text.isEmpty ||
+                          (selectedPlayers.length < 2))
+                      ? null
+                      : _saveGroup,
+                ),
               ),
-              const SizedBox(height: 20),
             ],
           ),
         ),

lib/presentation/views/main_menu/match_view/create_match/create_match_view.dart

@@ -14,7 +14,7 @@ import 'package:tallee/presentation/views/main_menu/match_view/create_match/choo
 import 'package:tallee/presentation/views/main_menu/match_view/create_match/choose_group_view.dart';
 import 'package:tallee/presentation/views/main_menu/match_view/create_match/create_teams/create_teams_view.dart';
 import 'package:tallee/presentation/views/main_menu/match_view/match_result_view.dart';
-import 'package:tallee/presentation/widgets/buttons/custom_width_button.dart';
+import 'package:tallee/presentation/widgets/buttons/animated_dialog_button.dart';
 import 'package:tallee/presentation/widgets/player_selection.dart';
 import 'package:tallee/presentation/widgets/text_input/text_input_field.dart';
 import 'package:tallee/presentation/widgets/tiles/choose_tile.dart';
@@ -175,15 +175,21 @@ class _CreateMatchViewState extends State<CreateMatchView> {
               ),
 
               // Create or save button.
-              CustomWidthButton(
+              Padding(
-                text: buttonText,
+                padding: const EdgeInsets.symmetric(horizontal: 12),
-                sizeRelativeToWidth: 0.95,
+                child: AnimatedDialogButton(
-                buttonType: ButtonType.primary,
+                  buttonConstraints: const BoxConstraints(
-                onPressed: isSubmitButtonEnabled()
+                    minWidth: double.infinity,
-                    ? () {
+                    minHeight: 50,
-                        submitButtonNavigation(context);
+                  ),
-                      }
+                  buttonType: ButtonType.primary,
-                    : null,
+                  onPressed: isSubmitButtonEnabled()
+                      ? () {
+                          submitButtonNavigation(context);
+                        }
+                      : null,
+                  buttonText: buttonText,
+                ),
               ),
             ],
           ),

lib/presentation/views/main_menu/match_view/create_match/create_teams/create_teams_view.dart

@@ -56,33 +56,33 @@ class _CreateTeamsViewState extends State<CreateTeamsView> {
     return Scaffold(
       backgroundColor: CustomTheme.backgroundColor,
       appBar: AppBar(title: Text(loc.create_teams)),
-      body: SafeArea(
+      body: Stack(
-        child: Column(
+        alignment: Alignment.center,
-          children: [
+        children: [
-            Expanded(
+          Expanded(
-              child: ListView.builder(
+            child: ListView.builder(
-                padding: const EdgeInsets.only(top: 12, bottom: 12),
+              padding: const EdgeInsets.only(top: 12, bottom: 12),
-                itemCount: teams.length,
+              itemCount: teams.length,
-                itemBuilder: (context, index) {
+              itemBuilder: (context, index) {
-                  return TeamCreationTile(
+                return TeamCreationTile(
-                    color: teams[index].color,
+                  color: teams[index].color,
-                    controller: nameController[index],
+                  controller: nameController[index],
-                    hintText: '${loc.team} ${index + 1}',
+                  hintText: '${loc.team} ${index + 1}',
-                    onDelete: teams.length <= 2
+                  onDelete: teams.length <= 2 ? null : () => removeTeam(index),
-                        ? null
+                  onColorSelection: (color) {
-                        : () => removeTeam(index),
+                    setState(() {
-                    onColorSelection: (color) {
+                      teams[index] = teams[index].copyWith(color: color);
-                      setState(() {
+                    });
-                        teams[index] = teams[index].copyWith(color: color);
+                  },
-                      });
+                );
-                    },
+              },
-                  );
-                },
-              ),
             ),
+          ),
 
-            // Button row
+          // Button row
-            Row(
+          Positioned(
+            bottom: MediaQuery.paddingOf(context).bottom + 20,
+            child: Row(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
                 // Add new team
@@ -95,7 +95,7 @@ class _CreateTeamsViewState extends State<CreateTeamsView> {
                 ),
                 const SizedBox(width: 15),
 
-                // Confirm teams and continue with member assignment
+                // Confirm teams
                 MainMenuButton(
                   icon: Icons.arrow_forward_sharp,
                   onPressed: teams.length >= 2
@@ -115,8 +115,8 @@ class _CreateTeamsViewState extends State<CreateTeamsView> {
                 ),
               ],
             ),
-          ],
+          ),
-        ),
+        ],
       ),
     );
   }

lib/presentation/views/main_menu/match_view/create_match/create_teams/manage_members_view.dart

@@ -52,67 +52,62 @@ class _ManageMembersViewState extends State<ManageMembersView> {
     return Scaffold(
       backgroundColor: CustomTheme.backgroundColor,
       appBar: AppBar(title: Text(loc.manage_members)),
-      body: SafeArea(
+      body: Stack(
-        child: Stack(
+        alignment: AlignmentDirectional.center,
-          children: [
+        children: [
-            Expanded(
+          Expanded(
-              child: ReorderableListView.builder(
+            child: ReorderableListView.builder(
-                padding: const EdgeInsets.symmetric(vertical: 12),
+              padding: const EdgeInsets.symmetric(vertical: 12),
-                buildDefaultDragHandles: false,
+              buildDefaultDragHandles: false,
-                itemCount: allItemsCount,
+              itemCount: allItemsCount,
-                onReorder: onReorder,
+              onReorder: onReorder,
-                proxyDecorator: (child, index, animation) =>
+              proxyDecorator: (child, index, animation) =>
-                    Material(type: MaterialType.transparency, child: child),
+                  Material(type: MaterialType.transparency, child: child),
-                itemBuilder: (context, index) {
+              itemBuilder: (context, index) {
-                  final teamIndex = teamIndexForFlat(index);
+                final teamIndex = teamIndexForFlat(index);
-                  final memberIndex = memberIndexForFlat(index, teamIndex);
+                final memberIndex = memberIndexForFlat(index, teamIndex);
-                  final team = teams[teamIndex];
+                final team = teams[teamIndex];
 
-                  if (memberIndex == -1) {
+                if (memberIndex == -1) {
-                    return buildTeamTile(team: team);
+                  return buildTeamTile(team: team);
-                  }
+                }
 
-                  final player = team.members[memberIndex];
+                final player = team.members[memberIndex];
-                  return ReorderableDelayedDragStartListener(
+                return ReorderableDelayedDragStartListener(
-                    key: ValueKey('player_${player.id}'),
+                  key: ValueKey('player_${player.id}'),
-                    index: index,
+                  index: index,
-                    child: TextIconListTile(
+                  child: TextIconListTile(
-                      text: player.name,
+                    text: player.name,
-                      suffixText: getNameCountText(player),
+                    suffixText: getNameCountText(player),
-                      icon: Icons.drag_handle,
+                    icon: Icons.drag_handle,
-                    ),
+                  ),
-                  );
+                );
-                },
+              },
-              ),
             ),
-            Positioned(
+          ),
-              bottom: MediaQuery.of(context).padding.bottom,
+          Positioned(
-              left: 0,
+            bottom: MediaQuery.of(context).padding.bottom + 20,
-              right: 0,
+            child: Row(
-              child: Center(
+              mainAxisAlignment: MainAxisAlignment.center,
-                child: Row(
+              children: [
-                  mainAxisAlignment: MainAxisAlignment.center,
+                MainMenuButton(
-                  children: [
+                  onPressed: () => setState(() {
-                    MainMenuButton(
+                    redistributePlayers();
-                      onPressed: () => setState(() {
+                  }),
-                        redistributePlayers();
+                  icon: Icons.cached,
-                      }),
-                      icon: Icons.cached,
-                    ),
-                    const SizedBox(width: 16),
-                    MainMenuButton(
-                      onPressed: allTeamsHaveMembers
-                          ? () async => submitMatch()
-                          : null,
-                      text: loc.create_match,
-                      icon: RpgAwesome.clovers_card,
-                    ),
-                  ],
                 ),
-              ),
+                const SizedBox(width: 16),
+                MainMenuButton(
+                  onPressed: allTeamsHaveMembers
+                      ? () async => submitMatch()
+                      : null,
+                  text: loc.create_match,
+                  icon: RpgAwesome.clovers_card,
+                ),
+              ],
             ),
-          ],
+          ),
-        ),
+        ],
       ),
     );
   }