Created input card with fields

Tomasz Kądziołka · Tomasz Kądziołka · commit 3dc60d64a953 · 2022-12-04T09:43:06.000+01:00
diff --git a/flutter_module/lib/presentation/screens/login_screen.dart b/flutter_module/lib/presentation/screens/login_screen.dart
@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:flutter_module/presentation/navigation/login/login_navigator.dart';
 import 'package:flutter_module/presentation/screens/named_screen.dart';
+import 'package:flutter_module/presentation/styles/padding_styles.dart';
+import 'package:flutter_module/presentation/widgets/login_input_card.dart';
 import 'package:flutter_module/utils/hooks/use_navigator.dart';
 import 'package:go_router/go_router.dart';
 import 'package:go_router_plus/go_router_plus.dart';
@@ -27,13 +29,22 @@ class _MainPage extends HookWidget {
   Widget build(BuildContext context) {
     useNavigator([navigator]);
 
+    final login = useState("");
+    final password = useState("");
+
     return Scaffold(
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: [
             // TODO Extract strings
             Text(LoginScreen.name),
+            PaddingStyles.regular(
+              LoginInputCard(
+                onLoginChanged: (value) => login.value = value,
+                onPasswordChanged: (value) => password.value = value,
+              ),
+            ),
             MaterialButton(
               child: const Text("Navigate to login"),
               onPressed: navigator.login,
diff --git a/flutter_module/lib/presentation/styles/dimens.dart b/flutter_module/lib/presentation/styles/dimens.dart
@@ -4,4 +4,6 @@ class Dimens {
   static const l = 16.0;
   static const xl = 24.0;
   static const xxl = 32.0;
+
+  static const inputBorderWidth = 0.5;
 }
diff --git a/flutter_module/lib/presentation/widgets/login_input_card.dart b/flutter_module/lib/presentation/widgets/login_input_card.dart
@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_module/presentation/styles/dimens.dart';
+import 'package:flutter_module/presentation/styles/padding_styles.dart';
+import 'package:flutter_module/presentation/styles/surface_styles.dart';
+import 'package:flutter_module/presentation/widgets/text_input_field.dart';
+
+class LoginInputCard extends StatelessWidget {
+  const LoginInputCard({
+    Key? key,
+    required this.onLoginChanged,
+    required this.onPasswordChanged,
+  }) : super(key: key);
+
+  final TextInputCallback onLoginChanged;
+  final TextInputCallback onPasswordChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return SurfaceStyles.snippetCard(
+      child: PaddingStyles.regular(
+        Column(
+          children: [
+            const SizedBox(height: Dimens.l),
+            TextInputField(
+              label: 'Login',
+              onChanged: onLoginChanged,
+            ),
+            const SizedBox(height: Dimens.xl),
+            TextInputField(
+              label: 'Password',
+              onChanged: onPasswordChanged,
+              isPassword: true,
+            ),
+            const SizedBox(height: Dimens.l),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/flutter_module/lib/presentation/widgets/text_input_field.dart b/flutter_module/lib/presentation/widgets/text_input_field.dart
@@ -0,0 +1,63 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:flutter_module/presentation/styles/color_styles.dart';
+import 'package:flutter_module/presentation/styles/dimens.dart';
+
+typedef TextInputCallback = Function(String value);
+
+class TextInputField extends HookWidget {
+  const TextInputField({
+    Key? key,
+    required this.label,
+    this.isPassword = false,
+    this.onChanged,
+  }) : super(key: key);
+
+  final String label;
+  final bool isPassword;
+  final TextInputCallback? onChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    final controller = useTextEditingController();
+    final value = useValueListenable(controller);
+    final shouldShow = useState(false);
+    final passwordVisible = shouldShow.value;
+
+    useEffect(() {
+      onChanged?.call(value.text);
+      return null;
+    }, [value.text]);
+
+    return TextField(
+      obscureText: isPassword && !shouldShow.value,
+      controller: controller,
+      cursorColor: ColorStyles.accent(),
+      decoration: InputDecoration(
+        labelText: label,
+        floatingLabelStyle: TextStyle(color: ColorStyles.accent()),
+        border: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: ColorStyles.pageBackground(),
+            width: Dimens.inputBorderWidth,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: ColorStyles.accent(),
+            width: Dimens.inputBorderWidth,
+          ),
+        ),
+        suffixIcon: isPassword
+            ? InkWell(
+                radius: Dimens.xl,
+                onTap: () => shouldShow.value = !passwordVisible,
+                child: passwordVisible
+                    ? const Icon(Icons.visibility_off, color: Colors.black)
+                    : const Icon(Icons.visibility, color: Colors.black),
+              )
+            : null,
+      ),
+    );
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,6 @@ class Dimens {`
`4`	`4`	`static const l = 16.0;`
`5`	`5`	`static const xl = 24.0;`
`6`	`6`	`static const xxl = 32.0;`
	`7`	`+`
	`8`	`+ static const inputBorderWidth = 0.5;`
`7`	`9`	`}`