Merge branch '30-improve-cells-borders' into 'master'

Resolve "Improve cells borders"

Closes #30

See merge request !27

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=0.0.27
-app.versionCode=27
+app.versionName=0.0.28
+app.versionCode=28

fastlane/metadata/android/en-US/changelogs/28.txt

+Improve drawing for cells and borders

fastlane/metadata/android/fr-FR/changelogs/28.txt

+Amélioration du tracé des cellules et des bordures

lib/entities/cell.dart

-import 'package:colors/layout/color_theme.dart';
 import 'package:colors/provider/data.dart';
 import 'package:colors/utils/board_utils.dart';
 import 'package:flutter/material.dart';
@@ -10,51 +9,6 @@ class Cell {
     this.value,
   );
 
-  Widget widget(Data myProvider, int row, int col) {
-    String imageAsset = this.getImageAssetName(myProvider);
-
-    Image cellColorImage = Image(
-      image: AssetImage(imageAsset),
-      fit: BoxFit.fill,
-      key: ValueKey<int>(imageAsset.hashCode),
-    );
-
-    List<Widget> cellContent = [
-      cellColorImage,
-    ];
-
-    // Add black point on first cell
-    if ((row == 0) && (col == 0)) {
-      double blackPointFontSize = 30.0 - (myProvider.boardSize);
-
-      cellContent.add(
-        Center(
-          child: Text(
-            '•',
-            style: TextStyle(
-              color: Colors.black,
-              fontSize: blackPointFontSize,
-              fontWeight: FontWeight.w800,
-            ),
-            textAlign: TextAlign.center,
-          ),
-        ),
-      );
-    }
-
-    return Container(
-      margin: EdgeInsets.all(0),
-      padding: EdgeInsets.all(0),
-      decoration: BoxDecoration(
-        border: getCellBorders(myProvider, row, col),
-      ),
-      child: Stack(
-        alignment: Alignment.center,
-        children: cellContent,
-      ),
-    );
-  }
-
   Container widgetFillBoardWithColor(Data myProvider) {
     String imageAsset = this.getImageAssetName(myProvider);
 
@@ -85,41 +39,4 @@ class Cell {
     int cellValue = this.value;
     return 'assets/skins/' + myProvider.parameterSkin + '_' + cellValue.toString() + '.png';
   }
-
-  Border getCellBorders(Data myProvider, int row, int col) {
-    int value = myProvider.getCellValue(col, row);
-
-    int colorCode = ColorTheme.getColorCode(myProvider.parameterSkin, value);
-
-    double borderWidth = 2;
-    BorderSide solid = BorderSide(color: Colors.black87, width: borderWidth);
-    BorderSide none = BorderSide(color: Color(colorCode), width: borderWidth);
-
-    BorderSide topBorder = (row == 0) ? solid : none;
-    BorderSide bottomBorder = (row == myProvider.boardSize - 1) ? solid : none;
-    BorderSide leftBorder = (col == 0) ? solid : none;
-    BorderSide rightBorder = (col == myProvider.boardSize - 1) ? solid : none;
-
-    if (row > 1 && value != myProvider.getCellValue(col, row - 1)) {
-      topBorder = solid;
-    }
-    if ((row + 1) < myProvider.boardSize && value != myProvider.getCellValue(col, row + 1)) {
-      bottomBorder = solid;
-    }
-    if (col > 1 && value != myProvider.getCellValue(col - 1, row)) {
-      leftBorder = solid;
-    }
-    if ((col + 1) < myProvider.boardSize && value != myProvider.getCellValue(col + 1, row)) {
-      rightBorder = solid;
-    }
-
-    Border border = Border(
-      top: topBorder,
-      bottom: bottomBorder,
-      left: leftBorder,
-      right: rightBorder,
-    );
-
-    return border;
-  }
 }

lib/layout/board.dart

+import 'package:colors/layout/board_painter.dart';
 import 'package:colors/provider/data.dart';
 import 'package:flutter/material.dart';
 
 class Board {
-  static Container buildGameBoard(Data myProvider) {
+  static Container buildGameBoard(Data myProvider, double boardWidth) {
     return Container(
       margin: EdgeInsets.all(4),
       padding: EdgeInsets.all(4),
       child: Column(
         children: [
-          buildGameTileset(myProvider),
-        ],
+          CustomPaint(
+            size: Size(boardWidth, boardWidth),
+            willChange: false,
+            painter: BoardPainter(myProvider),
+            isComplex: true,
           ),
-    );
-  }
-
-  static Table buildGameTileset(Data myProvider) {
-    int boardSize = myProvider.boardSize;
-    List cells = myProvider.cells;
-
-    return Table(
-      defaultColumnWidth: IntrinsicColumnWidth(),
-      children: [
-        for (var row = 0; row < boardSize; row++)
-          TableRow(
-            children: [
-              for (var col = 0; col < boardSize; col++)
-                Column(
-                  children: [
-                    cells[row][col].widget(myProvider, row, col),
         ],
       ),
-            ],
-          ),
-      ],
     );
   }
 }

lib/layout/board_painter.dart

+import 'package:colors/entities/cell.dart';
+import 'package:colors/layout/color_theme.dart';
+import 'package:colors/provider/data.dart';
+import 'package:flutter/material.dart';
+
+class BoardPainter extends CustomPainter {
+  const BoardPainter(this.myProvider);
+
+  final Data myProvider;
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    int boardSize = myProvider.boardSize;
+    List cells = myProvider.cells;
+    double cellSize = size.width / boardSize;
+
+    // background
+    for (var row = 0; row < boardSize; row++) {
+      double y = cellSize * row;
+      for (var col = 0; col < boardSize; col++) {
+        double x = cellSize * col;
+
+        final Cell cell = cells[row][col];
+        final int cellValue = cell.value;
+        final int colorCode = ColorTheme.getColorCode(myProvider.parameterSkin, cellValue);
+
+        final cellPaintBackground = Paint();
+        cellPaintBackground.color = Color(colorCode);
+        cellPaintBackground.style = PaintingStyle.fill;
+
+        final Rect cellBackground =
+            Rect.fromPoints(Offset(x - 1, y - 1), Offset(x + cellSize + 2, y + cellSize + 2));
+
+        canvas.drawRect(cellBackground, cellPaintBackground);
+      }
+    }
+
+    // borders
+    double borderSize = 4;
+    final cellPaintBorder = Paint();
+    cellPaintBorder.color = Colors.black;
+    cellPaintBorder.strokeWidth = borderSize;
+    cellPaintBorder.strokeCap = StrokeCap.round;
+
+    for (var row = 0; row < boardSize; row++) {
+      double y = cellSize * row;
+      for (var col = 0; col < boardSize; col++) {
+        double x = cellSize * col;
+
+        final Cell cell = cells[row][col];
+        final int cellValue = cell.value;
+
+        if ((row == 0) || (row > 1 && cellValue != myProvider.getCellValue(col, row - 1))) {
+          Offset borderStart = Offset(x, y);
+          Offset borderStop = Offset(x + cellSize, y);
+          canvas.drawLine(borderStart, borderStop, cellPaintBorder);
+        }
+        if ((row == boardSize - 1) ||
+            ((row + 1) < boardSize && cellValue != myProvider.getCellValue(col, row + 1))) {
+          Offset borderStart = Offset(x, y + cellSize);
+          Offset borderStop = Offset(x + cellSize, y + cellSize);
+          canvas.drawLine(borderStart, borderStop, cellPaintBorder);
+        }
+        if ((col == 0) || (col > 1 && cellValue != myProvider.getCellValue(col - 1, row))) {
+          Offset borderStart = Offset(x, y);
+          Offset borderStop = Offset(x, y + cellSize);
+          canvas.drawLine(borderStart, borderStop, cellPaintBorder);
+        }
+        if ((col == boardSize - 1) ||
+            ((col + 1) < boardSize && cellValue != myProvider.getCellValue(col + 1, row))) {
+          Offset borderStart = Offset(x + cellSize, y);
+          Offset borderStop = Offset(x + cellSize, y + cellSize);
+          canvas.drawLine(borderStart, borderStop, cellPaintBorder);
+        }
+      }
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) {
+    return false;
+  }
+}

lib/layout/game.dart

@@ -5,7 +5,7 @@ import 'package:colors/utils/game_utils.dart';
 import 'package:flutter/material.dart';
 
 class Game {
-  static Container buildGameWidget(Data myProvider) {
+  static Container buildGameWidget(Data myProvider, double boardWidth) {
     bool gameIsFinished = myProvider.isGameFinished();
 
     return Container(
@@ -17,7 +17,7 @@ class Game {
           Game.buildTopIndicatorWidget(myProvider),
           SizedBox(height: 2),
           Expanded(
-            child: Board.buildGameBoard(myProvider),
+            child: Board.buildGameBoard(myProvider, boardWidth),
           ),
           SizedBox(height: 2),
           Container(

lib/screens/home.dart

@@ -25,6 +25,7 @@ class _HomeState extends State<Home> {
   @override
   Widget build(BuildContext context) {
     Data myProvider = Provider.of<Data>(context);
+    double boardWidth = MediaQuery.of(context).size.width;
 
     List<Widget> menuActions = [];
 
@@ -50,7 +51,7 @@ class _HomeState extends State<Home> {
       body: SafeArea(
         child: Center(
           child: myProvider.gameIsRunning
-              ? Game.buildGameWidget(myProvider)
+              ? Game.buildGameWidget(myProvider, boardWidth)
               : Parameters.buildParametersSelector(myProvider),
         ),
       ),