marco/mchess-client
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix 1-pixel lines between squares

Browse Source 
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.
This commit is contained in:
Marco 2023-08-22 04:24:30 +02:00
parent 7c5439a635
commit b9d574f2ab
2 changed files with 46 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
lib/chess/chess_board.dart
View File

@ -1,4 +1,5 @@
import 'dart:developer'; import 'dart:developer';
import 'dart:math' as math;
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:mchess/chess_bloc/chess_bloc.dart'; import 'package:mchess/chess_bloc/chess_bloc.dart';
@ -42,11 +43,36 @@ class ChessBoard extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
log("ChessBoard's build()"); log("ChessBoard's build()");
return Container( return LayoutBuilder(builder: (context, constraints) {
decoration: const BoxDecoration( /*We calculate the margins manually, because otherwise we would have
boxShadow: [BoxShadow(color: Colors.black, offset: Offset(10, 10))]), lines that are 1 pixel wide between the squares (which is ugly)*/
child: _buildBoard(bState.bottomColor == ChessColor.black), 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) { Row _buildChessRow(int rowNo, bool flipped) {

42
lib/pages/chess_game.dart
View File

@ -1,15 +1,12 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart'; import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart'; import 'package:go_router/go_router.dart';
import 'package:mchess/chess_bloc/chess_bloc.dart'; import 'package:mchess/chess_bloc/chess_bloc.dart';
import 'package:mchess/chess/chess_board.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/chess_bloc/promotion_bloc.dart';
import 'package:mchess/utils/chess_utils.dart'; import 'package:mchess/utils/chess_utils.dart';
import 'package:mchess/utils/widgets/promotion_dialog.dart'; import 'package:mchess/utils/widgets/promotion_dialog.dart';
import 'package:mchess/utils/widgets/server_log_widget.dart';
import 'package:uuid/uuid.dart'; import 'package:uuid/uuid.dart';
class ChessGame extends StatefulWidget { class ChessGame extends StatefulWidget {
@ -36,30 +33,21 @@ class _ChessGameState extends State<ChessGame> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
body: Center( body: Center(
child: FittedBox( child: Container(
fit: BoxFit.contain, margin: const EdgeInsets.all(10),
child: Column( child: BlocListener<PromotionBloc, PromotionState>(
children: [ listener: (context, state) {
if (kDebugMode) const ServerLogWidget(textColor: Colors.white), if (state.showPromotionDialog) {
Container( promotionDialogBuilder(context, state.colorMoved);
margin: const EdgeInsets.all(20), }
child: BlocListener<PromotionBloc, PromotionState>( },
listener: (context, state) { child: BlocBuilder<ChessBloc, ChessBoardState>(
if (state.showPromotionDialog) { builder: (context, state) {
promotionDialogBuilder(context, state.colorMoved); return ChessBoard(
} boardState: state,
}, );
child: BlocBuilder<ChessBloc, ChessBoardState>( },
builder: (context, state) { ),
return ChessBoard(
boardState: state,
);
},
),
),
),
if (kDebugMode) const TurnIndicator(),
],
), ),
), ),
), ),