Fix layout, improve gameplay

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.2.7
-app.versionCode=13
+app.versionName=1.2.8
+app.versionCode=14

lib/provider/data.dart

@@ -7,7 +7,7 @@ class Data extends ChangeNotifier {
   bool _searchingLetter = false;
   String _category = '';
   String _letter = '';
-  int _countdown = 0;
+  int _countdown = -1;
 
   bool get searchingCategory => _searchingCategory;
 

lib/screens/home.dart

@@ -17,7 +17,7 @@ class Home extends StatelessWidget {
   int _countdownStart = 10;
 
   Future<void> startMiniGame(Data myProvider) async {
-    if (myProvider.countdown == 0) {
+    if (myProvider.countdown <= 0) {
       pickCategory(myProvider);
       pickLetter(myProvider);
       startTimer(myProvider);
@@ -34,7 +34,7 @@ class Home extends StatelessWidget {
     _timer = new Timer.periodic(
       oneSec,
       (Timer timer) {
-        if (_countdownStart == 0) {
+        if (_countdownStart < 0) {
           timer.cancel();
         } else {
           _countdownStart--;
@@ -87,7 +87,7 @@ class Home extends StatelessWidget {
     return hslDark.toColor();
   }
 
-  Container _buildPickedLetterContainer(Data myProvider, Color backgroundColor) {
+  Container _buildPickedLetterContainer(Data myProvider, Color backgroundColor, double borderWidth) {
     Color borderColor = darken(backgroundColor);
 
     return Container(
@@ -96,14 +96,14 @@ class Home extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Container(
-            margin: EdgeInsets.all(15),
-            padding: EdgeInsets.all(15),
+            margin: EdgeInsets.all(borderWidth),
+            padding: EdgeInsets.all(borderWidth),
             decoration: BoxDecoration(
               color: backgroundColor,
-              borderRadius: BorderRadius.circular(4),
+              borderRadius: BorderRadius.circular(borderWidth),
               border: Border.all(
                 color: borderColor,
-                width: 4,
+                width: borderWidth,
               ),
             ),
             child: FlatButton(
@@ -123,8 +123,7 @@ class Home extends StatelessWidget {
     );
   }
 
-
-  Container _buildPickedCategoryContainer(Data myProvider, Color backgroundColor) {
+  Container _buildPickedCategoryContainer(Data myProvider, Color backgroundColor, double borderWidth) {
     Color borderColor = darken(backgroundColor);
 
     return Container(
@@ -133,22 +132,23 @@ class Home extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Container(
-            margin: EdgeInsets.all(5),
-            padding: EdgeInsets.all(5),
+            margin: EdgeInsets.all(borderWidth),
+            padding: EdgeInsets.all(borderWidth),
             decoration: BoxDecoration(
               color: backgroundColor,
-              borderRadius: BorderRadius.circular(4),
+              borderRadius: BorderRadius.circular(borderWidth),
               border: Border.all(
                 color: borderColor,
-                width: 4,
+                width: borderWidth,
               ),
             ),
             child: FlatButton(
               onPressed: () => pickCategory(myProvider),
               child: Text(
                 myProvider.category == '' ? "🔀" : myProvider.category,
+                textAlign: TextAlign.center,
                 style: TextStyle(
-                  fontSize: 40,
+                  fontSize: 30,
                   fontWeight: FontWeight.w600,
                   color: Colors.black,
                 ),
@@ -160,33 +160,40 @@ class Home extends StatelessWidget {
     );
   }
 
-  Container _buildMiniGameContainer(Data myProvider, Color backgroundColor) {
+  Container _buildMiniGameContainer(Data myProvider, Color backgroundColor, double borderWidth) {
     Color borderColor = darken(backgroundColor);
 
+    Color countDownColor = Colors.black;
+    if (myProvider.countdown == 0) {
+      countDownColor = Colors.red;
+    }
+
     return Container(
-      margin: EdgeInsets.all(5),
-      padding: EdgeInsets.all(5),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Container(
+            margin: EdgeInsets.all(borderWidth),
+            padding: EdgeInsets.all(borderWidth),
             decoration: BoxDecoration(
               color: backgroundColor,
-        borderRadius: BorderRadius.circular(4),
+              borderRadius: BorderRadius.circular(borderWidth),
               border: Border.all(
                 color: borderColor,
-          width: 4,
+                width: borderWidth,
               ),
             ),
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          FlatButton(
-            onPressed: (myProvider.countdown != 0) ? null : () => startMiniGame(myProvider),
-            padding: EdgeInsets.all(10.0),
+            child: FlatButton(
+              onPressed: (myProvider.countdown >= 0) ? null : () => startMiniGame(myProvider),
               child: Text(
-              (myProvider.countdown != 0) ? myProvider.countdown.toString() : '🎲',
+                (myProvider.countdown >= 0) ? myProvider.countdown.toString() : '🎲',
+                textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 50,
                   fontWeight: FontWeight.w600,
-                color: Colors.black,
+                  color: countDownColor,
+                ),
               ),
             ),
           ),
@@ -198,6 +205,7 @@ class Home extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     Data _myProvider = Provider.of<Data>(context);
+    double borderWidth = 8;
 
     return Scaffold(
       appBar: AppBar(
@@ -207,11 +215,11 @@ class Home extends StatelessWidget {
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            _buildPickedLetterContainer(_myProvider, Colors.orange),
-            SizedBox(height: 20),
-            _buildPickedCategoryContainer(_myProvider, Colors.green),
-            SizedBox(height: 40),
-            _buildMiniGameContainer(_myProvider, Colors.blue),
+            _buildPickedLetterContainer(_myProvider, Colors.orange, borderWidth),
+            SizedBox(height: 5),
+            _buildMiniGameContainer(_myProvider, Colors.blue, borderWidth),
+            SizedBox(height: 5),
+            _buildPickedCategoryContainer(_myProvider, Colors.green, borderWidth),
           ],
         ),
       ),