From b9d574f2ab48d72da3c136477fc2d965a1aab2a8 Mon Sep 17 00:00:00 2001 From: Marco Date: Tue, 22 Aug 2023 04:24:30 +0200 Subject: [PATCH] Fix 1-pixel lines between squares In window widths or heigths that are not divisible by 8, the chess board would contain lines between the squares (since the contraints of the chess board rows would contain non-integer constraints). With this commit, we calculate margins manually, in order to constrict the chess board to widths and heights that are divisible by 8. --- lib/chess/chess_board.dart | 36 +++++++++++++++++++++++++++----- lib/pages/chess_game.dart | 42 ++++++++++++++------------------------ 2 files changed, 46 insertions(+), 32 deletions(-) diff --git a/lib/chess/chess_board.dart b/lib/chess/chess_board.dart index d8d556e..d50acd1 100644 --- a/lib/chess/chess_board.dart +++ b/lib/chess/chess_board.dart @@ -1,4 +1,5 @@ import 'dart:developer'; +import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:mchess/chess_bloc/chess_bloc.dart'; @@ -42,11 +43,36 @@ class ChessBoard extends StatelessWidget { Widget build(BuildContext context) { log("ChessBoard's build()"); - return Container( - decoration: const BoxDecoration( - boxShadow: [BoxShadow(color: Colors.black, offset: Offset(10, 10))]), - child: _buildBoard(bState.bottomColor == ChessColor.black), - ); + return LayoutBuilder(builder: (context, constraints) { + /*We calculate the margins manually, because otherwise we would have + lines that are 1 pixel wide between the squares (which is ugly)*/ + int smallerSize = + math.min(constraints.maxWidth.toInt(), constraints.maxHeight.toInt()); + int desiredSize = smallerSize - smallerSize % 8; + int verticalMargin = constraints.maxHeight.toInt() - desiredSize; + int verticalMarginTop = verticalMargin ~/ 2; + int verticalMarginBottom = verticalMargin - verticalMarginTop; + int horizontalMargin = constraints.maxWidth.toInt() - desiredSize; + int horizontalMarginLeft = horizontalMargin ~/ 2; + int horizontalMarginRight = horizontalMargin - horizontalMarginLeft; + return Container( + margin: EdgeInsets.only( + left: horizontalMarginLeft.toDouble(), + right: horizontalMarginRight.toDouble(), + top: verticalMarginTop.toDouble(), + bottom: verticalMarginBottom.toDouble(), + ), + child: FittedBox( + fit: BoxFit.contain, + child: Container( + decoration: const BoxDecoration(boxShadow: [ + BoxShadow(color: Colors.black, offset: Offset(10, 10)) + ]), + child: _buildBoard(bState.bottomColor == ChessColor.black), + ), + ), + ); + }); } Row _buildChessRow(int rowNo, bool flipped) { diff --git a/lib/pages/chess_game.dart b/lib/pages/chess_game.dart index 2cef650..dc0180f 100644 --- a/lib/pages/chess_game.dart +++ b/lib/pages/chess_game.dart @@ -1,15 +1,12 @@ -import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:go_router/go_router.dart'; import 'package:mchess/chess_bloc/chess_bloc.dart'; import 'package:mchess/chess/chess_board.dart'; -import 'package:mchess/chess/turn_indicator_widget.dart'; import 'package:mchess/chess_bloc/promotion_bloc.dart'; import 'package:mchess/utils/chess_utils.dart'; import 'package:mchess/utils/widgets/promotion_dialog.dart'; -import 'package:mchess/utils/widgets/server_log_widget.dart'; import 'package:uuid/uuid.dart'; class ChessGame extends StatefulWidget { @@ -36,30 +33,21 @@ class _ChessGameState extends State { Widget build(BuildContext context) { return Scaffold( body: Center( - child: FittedBox( - fit: BoxFit.contain, - child: Column( - children: [ - if (kDebugMode) const ServerLogWidget(textColor: Colors.white), - Container( - margin: const EdgeInsets.all(20), - child: BlocListener( - listener: (context, state) { - if (state.showPromotionDialog) { - promotionDialogBuilder(context, state.colorMoved); - } - }, - child: BlocBuilder( - builder: (context, state) { - return ChessBoard( - boardState: state, - ); - }, - ), - ), - ), - if (kDebugMode) const TurnIndicator(), - ], + child: Container( + margin: const EdgeInsets.all(10), + child: BlocListener( + listener: (context, state) { + if (state.showPromotionDialog) { + promotionDialogBuilder(context, state.colorMoved); + } + }, + child: BlocBuilder( + builder: (context, state) { + return ChessBoard( + boardState: state, + ); + }, + ), ), ), ),