[Presentation] Minor improvements to the tier list page

Wolfteam · Jan 5, 2022 · 8146f28 · 8146f28
1 parent a6e6b46
commit 8146f28
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 29 deletions.
diff --git a/lib/presentation/tierlist/tier_list_page.dart b/lib/presentation/tierlist/tier_list_page.dart
@@ -5,7 +5,6 @@ import 'package:permission_handler/permission_handler.dart';
 import 'package:screenshot/screenshot.dart';
 import 'package:shiori/application/bloc.dart';
 import 'package:shiori/domain/extensions/iterable_extensions.dart';
-import 'package:shiori/domain/models/models.dart';
 import 'package:shiori/generated/l10n.dart';
 import 'package:shiori/injection.dart';
 import 'package:shiori/presentation/shared/utils/toast_utils.dart';
@@ -30,15 +29,26 @@ class _TierListPageState extends State<TierListPage> {
         floatingActionButton: TierListFab(),
         body: SafeArea(
           child: SingleChildScrollView(
-            child: Container(
-              margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 16),
-              child: Screenshot(
-                controller: screenshotController,
-                child: BlocBuilder<TierListBloc, TierListState>(
-                  builder: (ctx, state) => Column(
-                    crossAxisAlignment: CrossAxisAlignment.stretch,
-                    children: state.rows.mapIndex((e, index) => _buildTierRow(index, state.rows.length, state.readyToSave, e)).toList(),
-                  ),
+            child: Screenshot(
+              controller: screenshotController,
+              child: BlocBuilder<TierListBloc, TierListState>(
+                builder: (ctx, state) => Column(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  children: state.rows
+                      .mapIndex(
+                        (e, index) => TierListRow(
+                          index: index,
+                          title: e.tierText,
+                          color: Color(e.tierColor),
+                          items: e.items,
+                          isUpButtonEnabled: index != 0,
+                          isDownButtonEnabled: index != state.rows.length - 1,
+                          numberOfRows: state.rows.length,
+                          showButtons: !state.readyToSave,
+                          isTheLastRow: state.rows.length == 1,
+                        ),
+                      )
+                      .toList(),
                 ),
               ),
             ),
@@ -47,24 +57,11 @@ class _TierListPageState extends State<TierListPage> {
       ),
     );
   }
-
-  Widget _buildTierRow(int index, int totalNumberOfItems, bool readyToSave, TierListRowModel item) {
-    return TierListRow(
-      index: index,
-      title: item.tierText,
-      color: Color(item.tierColor),
-      items: item.items,
-      isUpButtonEnabled: index != 0,
-      isDownButtonEnabled: index != totalNumberOfItems - 1,
-      numberOfRows: totalNumberOfItems,
-      showButtons: !readyToSave,
-      isTheLastRow: totalNumberOfItems == 1,
-    );
-  }
 }
 
 class _AppBar extends StatelessWidget implements PreferredSizeWidget {
   final ScreenshotController screenshotController;
+
   const _AppBar({Key? key, required this.screenshotController}) : super(key: key);
 
   @override

diff --git a/lib/presentation/tierlist/widgets/tierlist_row.dart b/lib/presentation/tierlist/widgets/tierlist_row.dart
@@ -4,6 +4,7 @@ import 'package:shiori/application/bloc.dart';
 import 'package:shiori/domain/models/models.dart';
 import 'package:shiori/generated/l10n.dart';
 import 'package:shiori/presentation/shared/images/circle_character.dart';
+import 'package:shiori/presentation/shared/styles.dart';
 import 'package:shiori/presentation/shared/utils/size_utils.dart';
 
 import 'rename_tierlist_dialog.dart';
@@ -45,6 +46,16 @@ class TierListRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final s = S.of(context);
+    final width = MediaQuery.of(context).size.width;
+    var flexA = 25;
+    var flexB = showButtons ? 65 : 75;
+    var flexC = 10;
+    if (width > 1200) {
+      flexA = 20;
+      flexB = showButtons ? 70 : 80;
+      flexC = 10;
+    }
+
     return DragTarget<ItemCommon>(
       builder: (BuildContext context, List<ItemCommon?> incoming, List<dynamic> rejected) => Column(
         children: [
@@ -54,9 +65,8 @@ class TierListRow extends StatelessWidget {
               children: [
                 Flexible(
                   fit: FlexFit.tight,
-                  flex: 15,
+                  flex: flexA,
                   child: Container(
-                    constraints: const BoxConstraints(minHeight: 120),
                     color: color,
                     child: Center(
                       child: Text(
@@ -69,7 +79,7 @@ class TierListRow extends StatelessWidget {
                 ),
                 Flexible(
                   fit: FlexFit.tight,
-                  flex: showButtons ? 75 : 85,
+                  flex: flexB,
                   child: Wrap(
                     crossAxisAlignment: WrapCrossAlignment.center,
                     alignment: WrapAlignment.center,
@@ -88,12 +98,13 @@ class TierListRow extends StatelessWidget {
                 if (showButtons)
                   Flexible(
                     fit: FlexFit.tight,
-                    flex: 10,
+                    flex: flexC,
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
                         IconButton(
                           icon: const Icon(Icons.keyboard_arrow_up),
+                          splashRadius: Styles.smallButtonSplashRadius,
                           onPressed: isUpButtonEnabled
                               ? () => context.read<TierListBloc>().add(TierListEvent.rowPositionChanged(index: index, newIndex: index - 1))
                               : null,
@@ -133,6 +144,7 @@ class TierListRow extends StatelessWidget {
                         ),
                         IconButton(
                           icon: const Icon(Icons.keyboard_arrow_down),
+                          splashRadius: Styles.smallButtonSplashRadius,
                           onPressed: isDownButtonEnabled
                               ? () => context.read<TierListBloc>().add(TierListEvent.rowPositionChanged(index: index, newIndex: index + 1))
                               : null,
@@ -143,7 +155,7 @@ class TierListRow extends StatelessWidget {
               ],
             ),
           ),
-          const Divider(),
+          const Divider(height: 1),
         ],
       ),
       onAccept: (item) => context.read<TierListBloc>().add(TierListEvent.addCharacterToRow(index: index, item: item)),