Merge branch '12-improve-clean-layout' into 'master'

Resolve "Improve/clean layout"

Closes #12

See merge request !13

android/gradle.properties

 org.gradle.jvmargs=-Xmx1536M
 android.useAndroidX=true
 android.enableJetifier=true
-app.versionName=1.2.4
-app.versionCode=10
+app.versionName=1.2.5
+app.versionCode=11

lib/screens/home.dart

@@ -16,15 +16,15 @@ class Home extends StatelessWidget {
   Timer _timer;
   int _countdownStart = 10;
 
-  Future<void> startMiniGame(BuildContext context, Data myProvider) async {
+  Future<void> startMiniGame(Data myProvider) async {
     if (myProvider.countdown == 0) {
-      pickCategory(context, myProvider);
-      pickLetter(context, myProvider);
-      startTimer(context, myProvider);
+      pickCategory(myProvider);
+      pickLetter(myProvider);
+      startTimer(myProvider);
     }
   }
 
-  Future<void> startTimer(BuildContext context, Data myProvider) async {
+  Future<void> startTimer(Data myProvider) async {
     const oneSec = const Duration(seconds: 1);
     if (_timer != null) {
       dispose();
@@ -49,7 +49,7 @@ class Home extends StatelessWidget {
     _timer.cancel();
   }
 
-  Future<void> pickCategory(BuildContext context, Data myProvider) async {
+  Future<void> pickCategory(Data myProvider) async {
     myProvider.searchingCategory = true;
     RandomPickCategory randomPickCategory;
     int attempts = 0;
@@ -65,7 +65,7 @@ class Home extends StatelessWidget {
     } while (attempts < 3);
   }
 
-  Future<void> pickLetter(BuildContext context, Data myProvider) async {
+  Future<void> pickLetter(Data myProvider) async {
     myProvider.searchingLetter = true;
     RandomPickLetter randomPickLetter;
     int attempts = 0;
@@ -81,80 +81,139 @@ class Home extends StatelessWidget {
     } while (attempts < 3);
   }
 
+  Color darken(Color baseColor, {double amount = 0.2}) {
+    final hsl = HSLColor.fromColor(baseColor);
+    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
+    return hslDark.toColor();
+  }
 
-  @override
-  Widget build(BuildContext context) {
-    Data _myProvider = Provider.of<Data>(context);
+  Container _buildPickedLetterContainer(Data myProvider, Color backgroundColor) {
+    Color borderColor = darken(backgroundColor);
 
-    return Scaffold(
-      appBar: AppBar(
-        title: Text('Petit bac'),
-      ),
-      body: Center(
+    return Container(
       child: Column(
+        mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                Text(
-                  _myProvider.letter,
-                  style: Theme.of(context).textTheme.headline2,
+        children: [
+          FlatButton(
+            onPressed: () => pickLetter(myProvider),
+            child: Text("🔀"),
+          ),
+          myProvider.letter == '' ? null : Container(
+            margin: EdgeInsets.all(5),
+            padding: EdgeInsets.all(5),
+            decoration: BoxDecoration(
+              color: backgroundColor,
+              borderRadius: BorderRadius.circular(4),
+              border: Border.all(
+                color: borderColor,
+                width: 4,
+              ),
+            ),
+            child: Text(
+              myProvider.letter,
+              style: TextStyle(
+                fontSize: 40,
+                fontWeight: FontWeight.w600,
+                color: Colors.black,
               ),
-                RaisedButton(
-                  onPressed: () => pickLetter(context, _myProvider),
-                  color: Colors.orange,
-                  padding: EdgeInsets.all(10.0),
-                  child: Row(
-                    children: <Widget>[
-                      Icon(Icons.shuffle),
-                      Text("Piocher une lettre")
-                    ],
             ),
           ),
         ],
       ),
-            SizedBox(height: 20),
-            Column(
+    );
+  }
+
+
+  Container _buildPickedCategoryContainer(Data myProvider, Color backgroundColor) {
+    Color borderColor = darken(backgroundColor);
+
+    return Container(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                Text(
-                  _myProvider.category,
-                  style: Theme.of(context).textTheme.headline3,
-                ),
+        children: [
           FlatButton(
-                  onPressed: () => pickCategory(context, _myProvider),
-                  color: Colors.orange,
-                  padding: EdgeInsets.all(10.0),
-                  child: Row(
-                    children: <Widget>[
-                      Icon(Icons.shuffle),
-                      Text("Piocher une catégorie")
-                    ],
+            onPressed: () => pickCategory(myProvider),
+            child: Text("🔀"),
+          ),
+          myProvider.category == '' ? null : Container(
+            margin: EdgeInsets.all(5),
+            padding: EdgeInsets.all(5),
+            decoration: BoxDecoration(
+              color: backgroundColor,
+              borderRadius: BorderRadius.circular(4),
+              border: Border.all(
+                color: borderColor,
+                width: 4,
+              ),
+            ),
+            child: Text(
+              myProvider.category,
+              style: TextStyle(
+                fontSize: 40,
+                fontWeight: FontWeight.w600,
+                color: Colors.black,
+              ),
             ),
           ),
         ],
       ),
-            SizedBox(height: 40),
-            Column(
+    );
+  }
+
+  Container _buildMiniGameContainer(Data myProvider, Color backgroundColor) {
+    Color borderColor = darken(backgroundColor);
+
+    return Container(
+      margin: EdgeInsets.all(5),
+      padding: EdgeInsets.all(5),
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        borderRadius: BorderRadius.circular(4),
+        border: Border.all(
+          color: borderColor,
+          width: 4,
+        ),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
         mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
+        children: [
           FlatButton(
-                  onPressed: (_myProvider.countdown != 0) ? null : () => startMiniGame(context, _myProvider),
-                  color: Colors.blue,
+            onPressed: (myProvider.countdown != 0) ? null : () => startMiniGame(myProvider),
             padding: EdgeInsets.all(10.0),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: <Widget>[
-                      Text(
-                        _myProvider.countdown.toString(),
-                        style: Theme.of(context).textTheme.headline2,
+            child: Text(
+              (myProvider.countdown != 0) ? myProvider.countdown.toString() : '🎲',
+              style: TextStyle(
+                fontSize: 50,
+                fontWeight: FontWeight.w600,
+                color: Colors.black,
               ),
-                    ],
             ),
           ),
         ],
       ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Data _myProvider = Provider.of<Data>(context);
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Petit bac'),
+      ),
+      body: Center(
+        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),
           ],
         ),
       ),