Add custom text box, use card for port option

basharno82 · Jan 13, 2022 · 789b48f · 789b48f
1 parent c1d96d6
commit 789b48f
Show file tree

Hide file tree

Showing 3 changed files with 709 additions and 8 deletions.
diff --git a/lib/screens/settings.dart b/lib/screens/settings.dart
@@ -13,6 +13,8 @@ import 'package:wsa_pacman/widget/adaptive_icon.dart';
 import 'package:wsa_pacman/widget/fluent_card.dart';
 import 'package:wsa_pacman/widget/fluent_combo_box.dart';
 import 'package:wsa_pacman/widget/fluent_expander.dart';
+import 'package:wsa_pacman/widget/fluent_icon_button.dart';
+import 'package:wsa_pacman/widget/fluent_text_box.dart';
 import 'package:wsa_pacman/windows/win_info.dart';
 
 import '/utils/string_utils.dart';
@@ -171,11 +173,11 @@ class ScreenSettingsState extends State<ScreenSettings> {
         ),
         controller: controller,
         children: [
-          Text(lang.settings_port, style: theme.typography.bodyLarge),
           spacer,
-          Padding(
-            padding: const EdgeInsets.only(bottom: 8.0),
-            child: TextBox(
+          FluentCard(
+            leading: const Icon(Mdi.networkOutline , size: 23),
+            content: Text(lang.settings_port),
+            trailing: SizedBox(width: 300, height: 32, child: FluentTextBox(
               inputFormatters: [
                 TextInputFormatter.withFunction((oldValue, newValue) {
                   var androidPortVal = (newValue.text.isNumeric()) ? (newValue.text.length > 5 || (newValue.text.isEmpty ? 58526 : int.parse(newValue.text)) <= 65535 ? newValue : TextEditingValue(text: "65535", selection: newValue.selection)) : 
@@ -192,14 +194,15 @@ class ScreenSettingsState extends State<ScreenSettings> {
               onChanged: (value)=>androidPortUpdater.update(value.isEmpty ? 58526 : int.parse(value)),
               enableSuggestions: false,
               keyboardType: const TextInputType.numberWithOptions(signed: true, decimal: true),
-              prefix: const Padding(padding: EdgeInsets.only(left: 10), child: Text("127.0.0.1 :")),
-              suffix: IconButton(
+              prefix: const Padding(padding: EdgeInsetsDirectional.only(start: 10), child: Text("127.0.0.1 :")),
+              suffix: FluentIconButton(
+                iconButtonMode: IconButtonMode.SMALL,
                 icon: const Icon(FluentIcons.reset),
                 onPressed: () {GState.androidPortPending.update((_) => 58526.toString()); androidPortUpdater.instant(58526); setState((){});},
               )
-            ),
+            )),
           ),
-          biggerSpacer,
+          smallSpacer,
           FluentCard(
             leading: const Icon(Mdi.powerStandby , size: 23),
             content: Text(lang.settings_autostart),

diff --git a/lib/widget/fluent_icon_button.dart b/lib/widget/fluent_icon_button.dart
@@ -0,0 +1,61 @@
+// ignore_for_file: constant_identifier_names
+
+import 'package:fluent_ui/fluent_ui.dart';
+
+enum IconButtonMode {
+  TINY, SMALL, LARGE
+}
+
+class FluentIconButton extends BaseButton {
+  const FluentIconButton({
+    Key? key,
+    required Widget icon,
+    required VoidCallback? onPressed,
+    VoidCallback? onLongPress,
+    FocusNode? focusNode,
+    bool autofocus = false,
+    ButtonStyle? style,
+    this.iconButtonMode,
+  }) : super(
+          key: key,
+          child: icon,
+          focusNode: focusNode,
+          autofocus: autofocus,
+          onLongPress: onLongPress,
+          onPressed: onPressed,
+          style: style,
+        );
+
+  final IconButtonMode? iconButtonMode;
+
+  @override
+  ButtonStyle defaultStyleOf(BuildContext context) {
+    assert(debugCheckHasFluentTheme(context));
+    final theme = FluentTheme.of(context);
+    final isIconSmall = iconButtonMode == IconButtonMode.TINY;
+    final isSmall = iconButtonMode != null ? iconButtonMode != IconButtonMode.LARGE : SmallIconButton.of(context) != null;
+    return ButtonStyle(
+      iconSize: ButtonState.all(isIconSmall ? 12.0 : null),
+      padding: ButtonState.all(isSmall
+          ? const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0)
+          : const EdgeInsets.all(8.0)),
+      backgroundColor: ButtonState.resolveWith((states) {
+        return states.isDisabled
+            ? ButtonThemeData.buttonColor(theme.brightness, states)
+            : ButtonThemeData.uncheckedInputColor(theme, states);
+      }),
+      foregroundColor: ButtonState.resolveWith((states) {
+        if (states.isDisabled) return theme.disabledColor;
+      }),
+      shape: ButtonState.all(RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(4.0),
+      )),
+    );
+  }
+
+  @override
+  ButtonStyle? themeStyleOf(BuildContext context) {
+    assert(debugCheckHasFluentTheme(context));
+    return ButtonTheme.of(context).iconButtonStyle;
+  }
+}