redo keyboard layout page, looks way better now and also reduced dropshadow :(

lib/functions/keyboard.dart

@@ -1,52 +1,92 @@
 import 'package:flutter/material.dart';
 import 'package:jade_gui/Keymaps/keymaps.dart';
 import 'package:jade_gui/classes/keymap.dart';
-import 'package:jade_gui/functions/keymap/variant.dart';
 
-Keymap chosenLayout = Keymap();
+Keymap chosenLayout = keymaps[0];
+String chosenVariant = "none";
+
+String getChosenVariant() {
+  return chosenVariant;
+}
 
 String getChosenLayout() {
   return chosenLayout.backLayout;
 }
 
-Widget layoutOrVariant(showVariant, keymap, choseLayout, nextPage) {
+Widget variantTemplate(variant, chosenLayout, nextPage) {
-  if (choseLayout && keymap == chosenLayout) {
+  return Column(
-    return variant(chosenLayout, nextPage);
+    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-  } else {
+    crossAxisAlignment: CrossAxisAlignment.stretch,
-    return Container(
+    children: [
-      color: const Color.fromARGB(100, 169, 0, 255),
+      Container(
-      padding: const EdgeInsets.all(8),
+        padding: const EdgeInsets.all(2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(5),
+          border: Border.all(color: Colors.black45),
+          color: const Color.fromARGB(255, 30, 30, 30),
+        ),
         child: ElevatedButton(
           onPressed: () {
-          chosenLayout = keymap;
+            chosenVariant = variant;
-          showVariant();
+            nextPage();
           },
           style: TextButton.styleFrom(
             primary: Colors.white,
-          backgroundColor: const Color.fromARGB(100, 169, 0, 255),
+            backgroundColor: const Color.fromARGB(0, 169, 0, 255),
+            shadowColor: const Color.fromARGB(0, 169, 0, 255),
             padding: const EdgeInsets.all(10),
           ),
           child: Text(
-          keymap.layout,
+            variant,
             style: const TextStyle(
               fontWeight: FontWeight.bold,
             ),
           ),
         ),
+      ),
+      const SizedBox(height: 10),
+    ],
   );
 }
-}
 
-Widget layoutTemplate(Keymap keymap, showVariant, choseLayout, nextPage) {
+Widget layoutTemplate(keymap, setChosenLayout) {
-  return Container(
+  return Column(
-      color: const Color.fromARGB(100, 169, 0, 255),
+    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-      padding: const EdgeInsets.all(8),
+    crossAxisAlignment: CrossAxisAlignment.stretch,
-      child: layoutOrVariant(showVariant, keymap, choseLayout, nextPage));
+    children: [
+      Container(
+        padding: const EdgeInsets.all(2),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(5),
+          border: Border.all(color: Colors.black45),
+          color: const Color.fromARGB(255, 30, 30, 30),
+        ),
+        child: ElevatedButton(
+          onPressed: () {
+            setChosenLayout(keymap);
+          },
+          style: TextButton.styleFrom(
+            primary: Colors.white,
+            backgroundColor: const Color.fromARGB(255, 30, 30, 30),
+            shadowColor: const Color.fromARGB(100, 30, 30, 30),
+            padding: const EdgeInsets.all(10),
+          ),
+          child: Text(
+            keymap.layout,
+            style: const TextStyle(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ),
+      const SizedBox(height: 10),
+    ],
+  );
 }
 
-Widget keyboard(nextPage, showVariant, choseLayout) {
+Widget keyboard(
-  return SingleChildScrollView(
+    nextPage, showVariant, choseLayout, setChosenLayout, chosenLayout) {
-    child: Column(
+  return Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: [
       const Text(
@@ -56,19 +96,79 @@ Widget keyboard(nextPage, showVariant, choseLayout) {
             fontWeight: FontWeight.bold,
             color: Color.fromARGB(255, 169, 0, 255)),
       ),
-        GridView.count(
+      const SizedBox(height: 20),
+      Expanded(
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            const SizedBox(width: 40),
+            Expanded(
+              child: Container(
+                padding: const EdgeInsets.all(10),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(10),
+                  border: Border.all(color: Colors.black),
+                  color: const Color.fromARGB(255, 30, 30, 30),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Colors.black,
+                      blurRadius: 2,
+                      offset: Offset(-2, 3),
+                    ),
+                  ],
+                ),
+                child: Expanded(
+                  child: SingleChildScrollView(
                     primary: false,
-          padding: const EdgeInsets.all(20),
+                    child: Column(
-          shrinkWrap: true,
+                      //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-          crossAxisSpacing: 10,
+                      //crossAxisAlignment: CrossAxisAlignment.stretch,
-          mainAxisSpacing: 10,
-          crossAxisCount: 3,
                       children: keymaps
                           .map<Widget>((keymap) =>
-                  layoutTemplate(keymap, showVariant, choseLayout, nextPage))
+                              layoutTemplate(keymap, setChosenLayout))
+                          .toList(),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 50),
+            //Expanded(child: layouts()),
+            Expanded(
+              child: Container(
+                padding: const EdgeInsets.all(10),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(10),
+                  border: Border.all(color: Colors.black),
+                  color: const Color.fromARGB(255, 30, 30, 30),
+                  boxShadow: const [
+                    BoxShadow(
+                      color: Colors.black,
+                      blurRadius: 2,
+                      offset: Offset(-2, 3),
+                    ),
+                  ],
+                ),
+                child: Expanded(
+                  child: SingleChildScrollView(
+                    primary: false,
+                    child: Column(
+                      //mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      //crossAxisAlignment: CrossAxisAlignment.stretch,
+                      children: chosenLayout.variant
+                          .map<Widget>((map) =>
+                              variantTemplate(map, chosenLayout, nextPage))
                           .toList(),
                     ),
+                  ),
+                ),
+              ),
+            ),
+            const SizedBox(width: 40),
           ],
         ),
+      ),
+      const SizedBox(height: 20),
+    ],
   );
 }

lib/functions/users.dart

@@ -2,8 +2,22 @@ import 'package:flutter/material.dart';
 
 final _formKey = GlobalKey<FormState>();
 RegExp userRegex = RegExp(r'^[a-z_]([a-z0-9_-]{0,31}|[a-z0-9_-]{0,30}\$)$');
-Widget users(setState, enableRoot, setPass, setConfirmPass, password,
+Widget users(
-    confirmPassword, setUsername, username, next) {
+    setState,
+    enableSudo,
+    setPass,
+    setConfirmPass,
+    password,
+    confirmPassword,
+    setUsername,
+    username,
+    setRootUser,
+    enableRoot,
+    setRootPass,
+    setConfirmRootPass,
+    rootPass,
+    confirmRootPass,
+    next) {
   return Column(
     mainAxisAlignment: MainAxisAlignment.spaceBetween,
     children: [
@@ -24,8 +38,8 @@ Widget users(setState, enableRoot, setPass, setConfirmPass, password,
           boxShadow: [
             BoxShadow(
               color: Colors.black,
-              blurRadius: 10,
+              blurRadius: 2,
-              offset: Offset(-5, 10),
+              offset: Offset(-2, 3),
             ),
           ],
         ),
@@ -54,8 +68,8 @@ Widget users(setState, enableRoot, setPass, setConfirmPass, password,
                   boxShadow: const [
                     BoxShadow(
                       color: Colors.black,
-                      blurRadius: 10,
+                      blurRadius: 2,
-                      offset: Offset(-5, 10),
+                      offset: Offset(-2, 3),
                     ),
                   ],
                 ),
@@ -157,9 +171,9 @@ Widget users(setState, enableRoot, setPass, setConfirmPass, password,
                           color: const Color.fromARGB(100, 30, 30, 30),
                         ),
                         child: CheckboxListTile(
-                          title: const Text('Enable root for user',
+                          title: const Text('Enable sudo for user',
                               style: TextStyle(color: Colors.white)),
-                          value: enableRoot,
+                          value: enableSudo,
                           onChanged: (bool? value) {
                             setState(value!);
                           },
@@ -180,6 +194,106 @@ Widget users(setState, enableRoot, setPass, setConfirmPass, password,
                           ),
                         ),
                       ),
+                      const SizedBox(height: 10),
+                      Container(
+                        padding: const EdgeInsets.all(2),
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(5),
+                          border: Border.all(color: Colors.black45),
+                          color: const Color.fromARGB(100, 30, 30, 30),
+                        ),
+                        child: CheckboxListTile(
+                          title: const Text('Enable root user',
+                              style: TextStyle(color: Colors.white)),
+                          value: enableRoot,
+                          onChanged: (bool? value) {
+                            setRootUser(value!);
+                          },
+                          secondary: Container(
+                            decoration: const BoxDecoration(
+                              shape: BoxShape.circle,
+                              color: Colors.white,
+                            ),
+                            padding: const EdgeInsets.fromLTRB(10, 10, 10, 13),
+                            child: const Text(
+                              '#',
+                              style: TextStyle(
+                                fontSize: 20,
+                                fontWeight: FontWeight.bold,
+                                color: Colors.black,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      Visibility(
+                          child: const SizedBox(height: 10),
+                          visible: enableRoot),
+                      Visibility(
+                        visible: enableRoot,
+                        child: TextFormField(
+                          //obscureText: true,
+                          decoration: const InputDecoration(
+                            border: OutlineInputBorder(),
+                            labelText: 'Password for root user',
+                            labelStyle: TextStyle(color: Colors.white),
+                            hintText: 'Password for the root user',
+                            iconColor: Colors.white,
+                            focusColor: Color.fromARGB(100, 169, 0, 255),
+                            hoverColor: Colors.blue,
+                            prefixIconColor: Colors.white,
+                            suffixIconColor: Colors.white,
+                          ),
+                          style: const TextStyle(
+                            color: Colors.white,
+                          ),
+                          onChanged: (String? value) {
+                            setRootPass(value);
+                            debugPrint(value);
+                            debugPrint("Root Password: $rootPass");
+                            debugPrint("Root Confirm: $confirmRootPass");
+                          },
+                        ),
+                      ),
+                      Visibility(
+                          child: const SizedBox(height: 10),
+                          visible: enableRoot),
+                      Visibility(
+                        visible: enableRoot,
+                        child: TextFormField(
+                          //obscureText: true,
+                          autovalidateMode: AutovalidateMode.always,
+                          decoration: const InputDecoration(
+                            border: OutlineInputBorder(),
+                            labelText: 'Repeat root password',
+                            labelStyle: TextStyle(color: Colors.white),
+                            hintText: 'Repeat root password',
+                            iconColor: Colors.white,
+                            focusColor: Color.fromARGB(100, 169, 0, 255),
+                            hoverColor: Colors.blue,
+                            prefixIconColor: Colors.white,
+                            suffixIconColor: Colors.white,
+                          ),
+                          style: const TextStyle(
+                            color: Colors.white,
+                          ),
+                          onChanged: (String? value) {
+                            setConfirmRootPass(value);
+                            debugPrint(password);
+                            debugPrint(confirmPassword);
+                            debugPrint(value);
+                          },
+                          validator: (String? value) {
+                            debugPrint(value);
+                            debugPrint("Root Password: $rootPass");
+                            debugPrint("Root Confirm: $confirmRootPass");
+                            return (value != rootPass)
+                                ? 'Password does not match'
+                                : null;
+                          },
+                        ),
+                      ),
+                      const SizedBox(height: 10),
                     ],
                   ),
                 ),
@@ -202,11 +316,13 @@ Widget users(setState, enableRoot, setPass, setConfirmPass, password,
                     onPressed: () {
                       next();
                     },
-                    child: const Text('Next'),
+                    child: const Text(
+                      'Next',
+                    ),
                     style: TextButton.styleFrom(
                       primary: Colors.white,
                       backgroundColor: const Color.fromARGB(255, 169, 0, 255),
-                      minimumSize: const Size(80, 50),
+                      minimumSize: const Size(100, 50),
                       padding: const EdgeInsets.all(10),
                     ),
                   ),

lib/main.dart

@@ -3,8 +3,8 @@ import 'package:jade_gui/functions/location/location.dart';
 import 'package:jade_gui/functions/welcome.dart';
 import 'package:jade_gui/functions/locale.dart';
 import 'package:jade_gui/functions/keyboard.dart';
-import 'package:jade_gui/functions/keymap/variant.dart';
 import 'package:jade_gui/functions/users.dart';
+import 'package:jade_gui/classes/keymap.dart';
 
 void main() => runApp(
       const MaterialApp(
@@ -24,10 +24,14 @@ class _JadeguiState extends State<Jadegui> {
   int _selectedIndex = 0;
   bool nextpage = false;
   bool choseLayout = false;
+  Keymap chosenLayout = Keymap();
+  bool enableSudo = false;
   bool enableRoot = false;
   String password = "";
   String confirmPassword = "";
   String username = "";
+  String rootPass = "";
+  String confirmRootPass = "";
   void nextslide() {
     setState(() {
       _selectedIndex = _selectedIndex + 1;
@@ -265,25 +269,35 @@ class _JadeguiState extends State<Jadegui> {
         print(
             "${getSelectedLocPack().region}/${getSelectedLocPack().location}");
         print(getSelectedLocPack().locale);
-        widget = keyboard(() {
+        widget = keyboard(
+          () {
             setState(() {
               _selectedIndex = _selectedIndex + 1;
             });
-        }, () {
+          },
+          () {
             setState(() {
               choseLayout = true;
             });
-        }, choseLayout);
+          },
+          choseLayout,
+          (layout) {
+            setState(() {
+              chosenLayout = layout;
+            });
+          },
+          chosenLayout,
+        );
         break;
       case 3:
         print("${getChosenLayout()} - ${getChosenVariant()}");
         widget = users(
           (value) {
             setState(() {
-              enableRoot = value;
+              enableSudo = value;
             });
           },
-          enableRoot,
+          enableSudo,
           (String? value) {
             setState(() {
               debugPrint(value);
@@ -291,9 +305,6 @@ class _JadeguiState extends State<Jadegui> {
                 password = value;
               }
             });
-            debugPrint("here");
-            debugPrint(password);
-            debugPrint(value);
           },
           (value) {
             setState(() {
@@ -308,6 +319,27 @@ class _JadeguiState extends State<Jadegui> {
             });
           },
           username,
+          (value) {
+            setState(() {
+              enableRoot = value;
+            });
+          },
+          enableRoot,
+          (String? value) {
+            setState(() {
+              debugPrint(value);
+              if (value != null) {
+                rootPass = value;
+              }
+            });
+          },
+          (value) {
+            setState(() {
+              confirmRootPass = value;
+            });
+          },
+          rootPass,
+          confirmRootPass,
           () {
             setState(() {
               _selectedIndex = _selectedIndex + 1;
@@ -316,6 +348,10 @@ class _JadeguiState extends State<Jadegui> {
         );
         break;
       case 4:
+        print("Username: $username");
+        print("Password: $password");
+        print("Confirm Password: $confirmPassword");
+        print("Enable Root: $enableSudo");
         widget = const Text(
           'Showing Users screen',
           style: TextStyle(