Button vs. text field borders (#250)

* Button vs. text field borders Fixes #244 * Fix border width and remove transparency * Lighten up dark textfields, improve example * example: add disabled button * Button vs. text field borders Fixes #244 * Fix disabled border
ubuntu · Jan 25, 2023 · 0f748b7 · 0f748b7
1 parent 6f64f20
commit 0f748b7
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 16 deletions.
diff --git a/example/lib/view/inputs_view.dart b/example/lib/view/inputs_view.dart
@@ -9,30 +9,66 @@ class InputsView extends StatelessWidget {
   InputsView({super.key});
   @override
   Widget build(BuildContext context) {
+    final buttonTextFieldRow = SizedBox(
+      width: 500,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Expanded(
+            child: OutlinedButton(
+              onPressed: () {},
+              child: const Text('Outlined Button'),
+            ),
+          ),
+          const SizedBox(
+            width: 10,
+          ),
+          const Expanded(
+            child: OutlinedButton(
+              onPressed: null,
+              child: Text('Outlined Button'),
+            ),
+          ),
+          const SizedBox(
+            width: 10,
+          ),
+          const Expanded(
+            child: TextField(
+              autofocus: true,
+              decoration: InputDecoration(
+                prefix: Padding(
+                  padding: EdgeInsets.only(right: 5),
+                  child: Icon(
+                    Icons.text_fields,
+                    size: 16,
+                  ),
+                ),
+                prefixIconConstraints: BoxConstraints(minHeight: 100),
+                hintText: 'Awesome Textfield',
+                labelText: 'Awesome Textfield',
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
     return Padding(
       padding: const EdgeInsets.all(18.0),
       child: ListView(
         children: [
+          buttonTextFieldRow,
           const SizedBox(height: 15),
           const TextField(
-            autofocus: true,
             decoration: InputDecoration(
-              prefix: Padding(
-                padding: EdgeInsets.only(right: 5),
-                child: Icon(
-                  Icons.text_fields,
-                  size: 16,
-                ),
-              ),
-              prefixIconConstraints: BoxConstraints(minHeight: 100),
-              hintText: 'Awesome Textfield',
-              labelText: 'All TextFields have a border in Yaru',
+              labelText: 'Username',
             ),
           ),
           const SizedBox(height: 15),
           const TextField(
+            enabled: false,
+            onChanged: null,
             decoration: InputDecoration(
-              labelText: 'Username',
+              labelText: 'Disabled',
             ),
           ),
           const SizedBox(height: 15),
@@ -56,6 +92,18 @@ class InputsView extends StatelessWidget {
             maxLines: 5,
           ),
           const SizedBox(height: 15),
+          OutlinedButton(
+            onPressed: () => showDialog(
+              context: context,
+              builder: (context) {
+                return SimpleDialog(
+                  contentPadding: const EdgeInsets.all(20),
+                  children: [buttonTextFieldRow],
+                );
+              },
+            ),
+            child: const Text('Check in dialog'),
+          )
         ],
       ),
     );

diff --git a/lib/src/themes/common_themes.dart b/lib/src/themes/common_themes.dart
@@ -47,10 +47,49 @@ AppBarTheme _createDarkAppBarTheme(ColorScheme colorScheme) {
   );
 }
 
-InputDecorationTheme _createInputDecorationTheme(ColorScheme colorScheme) {
+InputDecorationTheme _createInputDecorationTheme(
+  ColorScheme colorScheme,
+  Brightness brightness,
+) {
+  final radius = BorderRadius.circular(kButtonRadius);
+  const width = 1.0;
+  final light = brightness == Brightness.light;
+  final fill =
+      light ? const Color(0xFFededed) : const Color.fromARGB(255, 56, 56, 56);
+  final border = light
+      ? const Color.fromARGB(255, 226, 226, 226)
+      : const Color.fromARGB(255, 83, 83, 83);
+  final disabledBorder = light
+      ? const Color.fromARGB(255, 237, 237, 237)
+      : const Color.fromARGB(255, 67, 67, 67);
   return InputDecorationTheme(
+    filled: true,
+    fillColor: fill,
     border: OutlineInputBorder(
-      borderRadius: BorderRadius.circular(kButtonRadius),
+      borderSide: BorderSide(
+        width: width,
+        color: border,
+      ),
+      borderRadius: radius,
+    ),
+    focusedBorder: OutlineInputBorder(
+      borderSide: BorderSide(width: width, color: colorScheme.primary),
+      borderRadius: radius,
+    ),
+    enabledBorder: OutlineInputBorder(
+      borderSide: BorderSide(
+        width: width,
+        color: border,
+      ),
+      borderRadius: radius,
+    ),
+    errorBorder: OutlineInputBorder(
+      borderSide: BorderSide(width: width, color: colorScheme.error),
+      borderRadius: radius,
+    ),
+    disabledBorder: OutlineInputBorder(
+      borderSide: BorderSide(width: width, color: disabledBorder),
+      borderRadius: radius,
     ),
     isDense: true,
     iconColor: colorScheme.onSurface,
@@ -301,7 +340,8 @@ ThemeData createYaruLightTheme({
       selectedItemColor: colorScheme.primary,
       unselectedItemColor: colorScheme.onSurface.withOpacity(0.8),
     ),
-    inputDecorationTheme: _createInputDecorationTheme(colorScheme),
+    inputDecorationTheme:
+        _createInputDecorationTheme(colorScheme, Brightness.light),
     toggleButtonsTheme: _createToggleButtonsTheme(colorScheme),
     textSelectionTheme: _createTextSelectionTheme(colorScheme),
     popupMenuTheme: _createPopupMenuThemeData(colorScheme, Brightness.light),
@@ -354,7 +394,8 @@ ThemeData createYaruDarkTheme({
       selectedItemColor: colorScheme.primary,
       unselectedItemColor: Colors.white.withOpacity(0.8),
     ),
-    inputDecorationTheme: _createInputDecorationTheme(colorScheme),
+    inputDecorationTheme:
+        _createInputDecorationTheme(colorScheme, Brightness.dark),
     toggleButtonsTheme: _createToggleButtonsTheme(colorScheme),
     textSelectionTheme: _createTextSelectionTheme(colorScheme),
     popupMenuTheme: _createPopupMenuThemeData(colorScheme, Brightness.dark),