diff --git a/lib/presentation/tierlist/tier_list_page.dart b/lib/presentation/tierlist/tier_list_page.dart index edb55d45a..53480798e 100644 --- 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 { floatingActionButton: TierListFab(), body: SafeArea( child: SingleChildScrollView( - child: Container( - margin: const EdgeInsets.symmetric(horizontal: 5, vertical: 16), - child: Screenshot( - controller: screenshotController, - child: BlocBuilder( - 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( + 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 { ), ); } - - 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 index 13b82bea6..ae6447391 100644 --- 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( builder: (BuildContext context, List incoming, List 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().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().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().add(TierListEvent.addCharacterToRow(index: index, item: item)),