lib/provider/data.dart

@@ -5,7 +5,7 @@ import '../entities/tile.dart';
 class Data extends ChangeNotifier {
 
   // application configuration
-  int _tilesCount = 3;
+  int _tilesCount = 4;
 
   // application data
   List _images = [];
@@ -14,6 +14,7 @@ class Data extends ChangeNotifier {
 
   // application state
   bool _shuffling = false;
+  bool _displayTipImage = false;
 
   String get image => _image;
 
@@ -50,6 +51,13 @@ class Data extends ChangeNotifier {
     notifyListeners();
   }
 
+  bool get displayTipImage => _displayTipImage;
+
+  set updateDisplayTipImage(bool value) {
+    _displayTipImage = value;
+    notifyListeners();
+  }
+
   void swapTiles(List<int> tile1, List<int> tile2) {
     int indexTile1 = _tiles.indexWhere((tile) => ((tile.currentCol == tile1[0]) && (tile.currentRow == tile1[1])));
     int indexTile2 = _tiles.indexWhere((tile) => ((tile.currentCol == tile2[0]) && (tile.currentRow == tile2[1])));

lib/screens/home.dart

@@ -14,9 +14,15 @@ class Home extends StatelessWidget {
   static const String id = 'home';
 
   double _tipImageSize = 100;
+  int _selectImageColumnsCount = 2;
 
   Future<void> resetGame(Data myProvider) async {
     myProvider.updateImage = '';
+    myProvider.updateDisplayTipImage = false;
+  }
+
+  void toggleDisplayTipImage(Data myProvider) {
+    myProvider.updateDisplayTipImage = !myProvider.displayTipImage;
   }
 
   String getImageAssetName(String imageCode) {
@@ -51,10 +57,10 @@ class Home extends StatelessWidget {
       child: FlatButton(
         child: Container(
           decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(8),
+            borderRadius: BorderRadius.circular(4),
             border: Border.all(
               color: Colors.blue[200],
-              width: 8,
+              width: 4,
             ),
           ),
           margin: EdgeInsets.all(2),
@@ -77,26 +83,22 @@ class Home extends StatelessWidget {
     List images = myProvider.images;
 
     return Container(
-      padding: EdgeInsets.all(5),
+      padding: EdgeInsets.all(2),
       child: ListView(
         children: [
           Table(
             defaultColumnWidth: IntrinsicColumnWidth(),
             children: [
-              for (var imageIndex = 0; imageIndex < images.length; imageIndex+=2)
+              for (var imageIndex = 0; imageIndex < images.length; imageIndex += _selectImageColumnsCount)
                 TableRow(
                   children: [
-                    Column(
-                      children: [
-                        _buildImageSelectorItem(myProvider, images[imageIndex], size, tileImageSize)
-                      ]
-                    ),
-                    Column(
-                      children: [
-                        if (imageIndex+1 < images.length)
-                          _buildImageSelectorItem(myProvider, images[imageIndex+1], size, tileImageSize)
-                      ]
-                    ),
+                    for (var columnIndex = 0; columnIndex < _selectImageColumnsCount; columnIndex++)
+                      Column(
+                        children: [
+                          if (imageIndex + columnIndex < images.length)
+                            _buildImageSelectorItem(myProvider, images[imageIndex + columnIndex], size, tileImageSize)
+                        ]
+                      ),
                   ]
                 ),
             ],
@@ -233,21 +235,30 @@ class Home extends StatelessWidget {
 
   Container _buildTipWidget(Data myProvider) {
     return Container(
-      margin: EdgeInsets.all(4),
-      padding: EdgeInsets.all(4),
-      decoration: BoxDecoration(
-        color: Colors.blue,
-        borderRadius: BorderRadius.circular(4),
-        border: Border.all(
-          color: Colors.blue,
-          width: 4,
+      child: FlatButton(
+        child: Container(
+          margin: EdgeInsets.all(4),
+          padding: EdgeInsets.all(4),
+          decoration: BoxDecoration(
+            color: Colors.blue,
+            borderRadius: BorderRadius.circular(4),
+            border: Border.all(
+              color: Colors.blue,
+              width: 4,
+            ),
+          ),
+          child: Image(
+            image: AssetImage(
+              myProvider.displayTipImage
+              ? getImageAssetName(myProvider.image)
+              : 'assets/ui/tip-hidden.png'
+            ),
+            width: _tipImageSize,
+            height: _tipImageSize,
+            fit: BoxFit.fill
+          ),
         ),
-      ),
-      child: Image(
-        image: AssetImage(getImageAssetName(myProvider.image)),
-        width: _tipImageSize,
-        height: _tipImageSize,
-        fit: BoxFit.fill
+        onPressed: () => toggleDisplayTipImage(myProvider),
       ),
     );
   }
@@ -291,7 +302,7 @@ class Home extends StatelessWidget {
 
     var content;
 
-    double _selectorImageSize = MediaQuery.of(context).size.width / 3;
+    double _selectorImageSize = (MediaQuery.of(context).size.width - 140) / _selectImageColumnsCount;
     double _tileImageSize = (MediaQuery.of(context).size.width - 70) / _myProvider.tilesCount;
 
     if (_myProvider.shuffling) {

pubspec.yaml

@@ -21,3 +21,4 @@ flutter:
   assets:
     - assets/files/
     - assets/images/
+    - assets/ui/

scripts/01_optimize_images.sh

@@ -10,8 +10,8 @@ IMAGES_RAW_FOLDER="${IMAGES_CACHE_FOLDER}/01_raw_images"
 IMAGES_OPTIMIZED_FOLDER="${IMAGES_CACHE_FOLDER}/02_optimized_images"
 
 RESIZE_OPTION="640x640"
-CROP_PARAMETERS="-auto-orient -trim +repage -gravity center -background white -extent ${RESIZE_OPTION}^"
-CONVERT_OPTIONS="-alpha off +dither -colors 256 -depth 4"
+CROP_PARAMETERS="-auto-orient +repage -gravity center -background white -extent ${RESIZE_OPTION}^"
+CONVERT_OPTIONS="-alpha off -dither FloydSteinberg -colors 256 -depth 4"
 
 OPTIPNG_OPTIONS="-preserve -quiet -o7"
 
@@ -26,8 +26,10 @@ IMAGES="$(find "${IMAGES_RAW_FOLDER}" -type f -name "*.??g" | sort)"
 
 while read -r INPUT_FILE; do
   if [[ -n "${INPUT_FILE}" ]]; then
+    CATEGORY="$(basename "$(dirname "${INPUT_FILE}")")"
+    echo "CATEGORY: ${CATEGORY}"
     HASH="$(echo "${INPUT_FILE%.*}" | md5sum | cut -c1-32)"
-    OUTPUT_FILE="${IMAGES_OPTIMIZED_FOLDER}/${HASH}.png"
+    OUTPUT_FILE="${IMAGES_OPTIMIZED_FOLDER}/${CATEGORY}_${HASH}.png"
     echo "  OUTPUT_FILE: ${OUTPUT_FILE}"
 
     if [[ -f "${OUTPUT_FILE}" ]]; then