packages/wyatt_ui_kit/example/lib/home.dart

@@ -6,6 +6,7 @@ import 'package:wyatt_ui_kit_example/cards/cards.dart';
 import 'package:wyatt_ui_kit_example/demo_page.dart';
 import 'package:wyatt_ui_kit_example/loaders/loaders.dart';
 import 'package:wyatt_ui_kit_example/rich_text_builders/rich_text_builders.dart';
+import 'package:wyatt_ui_kit_example/text_input/text_inputs.dart';
 import 'package:wyatt_ui_kit_example/theme/themes.dart';
 
 const String title = 'Wyatt UIKit Example';
@@ -26,6 +27,7 @@ class _HomeState extends State<Home> {
     Buttons(),
     Loaders(),
     RichTextBuilders(),
+    TextInputs(),
   ];
 
   int currentIndex = 0;

packages/wyatt_ui_kit/example/lib/text_input/text_inputs.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+import 'package:wyatt_ui_kit_example/demo_page.dart';
+
+class TextInputs extends DemoPage {
+  const TextInputs({super.key});
+
+  @override
+  Widget build(BuildContext context) => const TextInputsCore();
+
+  @override
+  String get title => 'Text Inputs';
+}
+
+class TextInputsCore extends StatefulWidget {
+  const TextInputsCore({super.key});
+
+  @override
+  State<TextInputsCore> createState() => _TextInputsCoreState();
+}
+
+class _TextInputsCoreState extends State<TextInputsCore> {
+  final _formKey = GlobalKey<FormState>();
+  final _controller = TextEditingController();
+  final _focusNode = FocusNode();
+
+  final _formKey2 = GlobalKey<FormState>();
+  final _controller2 = TextEditingController();
+  final _focusNode2 = FocusNode();
+
+  final _formKey3 = GlobalKey<FormState>();
+  final _controller3 = TextEditingController();
+  final _focusNode3 = FocusNode();
+
+  final _formKey4 = GlobalKey<FormState>();
+  final _controller4 = TextEditingController();
+  final _focusNode4 = FocusNode();
+
+  final _formKey5 = GlobalKey<FormState>();
+  final _controller5 = TextEditingController();
+  final _focusNode5 = FocusNode();
+
+  final _formKey6 = GlobalKey<FormState>();
+  final _controller6 = TextEditingController();
+  final _focusNode6 = FocusNode();
+
+  final ValueNotifier<bool> _enable = ValueNotifier(true);
+
+  @override
+  void initState() {
+    super.initState();
+    Future.delayed(const Duration(milliseconds: 500), () {
+      setState(() {
+        _enable.value = false;
+      });
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) => Form(
+        child: ListView(
+          cacheExtent: 1000,
+          children: [
+            const Gap(20),
+            Align(
+              child: Text(
+                'Text inputs',
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey6,
+              controller: _controller6,
+              focusNode: _focusNode6,
+              label: 'Nom / Prénom'.wrap(),
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey,
+              enabled: _enable,
+              controller: _controller,
+              focusNode: _focusNode,
+              label: 'Nom / Prénom'.wrap(),
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey2,
+              controller: _controller2,
+              focusNode: _focusNode2,
+              maxLines: 3,
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+              onChanged: (value) {},
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey3,
+              controller: _controller3,
+              focusNode: _focusNode3,
+              expand: false,
+              label: 'Nom / Prénom'.wrap(),
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+              onChanged: (value) {},
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey4,
+              expand: false,
+              controller: _controller4,
+              focusNode: _focusNode4,
+              label: 'Nom / Prénom'.wrap(),
+              maxLines: 3,
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+              onChanged: (value) {},
+            ),
+            const Gap(20),
+            TextInput(
+              key: _formKey5,
+              prefixIcon: const Icon(Icons.architecture),
+              suffixIcon: const Icon(Icons.architecture),
+              controller: _controller5,
+              focusNode: _focusNode5,
+              label: 'Nom / Prénom'.wrap(),
+              onError: (value) => 'Erreur : ${value.length} > 5.',
+              validator: (value) => value.length > 5,
+            ),
+            const Gap(20),
+          ],
+        ),
+      );
+}

packages/wyatt_ui_kit/example/lib/theme/text_input_theme.dart

@@ -0,0 +1,181 @@
+// Copyright (C) 2023 WYATT GROUP
+// Please see the AUTHORS file for details.
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:wyatt_ui_components/wyatt_wyatt_ui_components.dart';
+import 'package:wyatt_ui_kit/wyatt_ui_kit.dart';
+
+class TextInputTheme extends TextInputThemeExtension {
+  const TextInputTheme({
+    super.normalStyle,
+    super.focusedStyle,
+    super.disableStyle,
+    super.errorStyle,
+  });
+
+  factory TextInputTheme.light() => TextInputTheme(
+        normalStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor([
+            Color.fromRGBO(221, 224, 227, 1),
+            Color.fromRGBO(202, 204, 212, 1),
+          ]),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(55, 65, 81, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(55, 65, 81, 1),
+          ),
+        ),
+        focusedStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor([
+            Color.fromRGBO(60, 125, 251, 1),
+            Color.fromRGBO(68, 109, 244, 1),
+          ]),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(55, 65, 81, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(55, 65, 81, 1),
+          ),
+        ),
+        errorStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor([
+            Color.fromRGBO(251, 94, 60, 1),
+            Color.fromRGBO(244, 68, 100, 1),
+          ]),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(244, 68, 100, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(55, 65, 81, 1),
+          ),
+        ),
+        disableStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors:
+              const MultiColor.single(Color.fromRGBO(229, 231, 235, 1)),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(156, 163, 175, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(156, 163, 175, 1),
+          ),
+        ),
+      );
+
+  factory TextInputTheme.dark() => TextInputTheme(
+        normalStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor.single(
+            Color.fromRGBO(96, 101, 106, 1),
+          ),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(204, 204, 204, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(255, 255, 255, 1),
+          ),
+        ),
+        focusedStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor([
+            Color.fromRGBO(60, 125, 251, 1),
+            Color.fromRGBO(68, 109, 244, 1),
+          ]),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(204, 204, 204, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(255, 255, 255, 1),
+          ),
+        ),
+        errorStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor([
+            Color.fromRGBO(251, 94, 60, 1),
+            Color.fromRGBO(244, 68, 100, 1),
+          ]),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(244, 68, 100, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(255, 255, 255, 1),
+          ),
+        ),
+        disableStyle: TextInputStyle(
+          radius: BorderRadius.circular(12),
+          borderColors: const MultiColor.single(
+            Color.fromRGBO(96, 101, 106, 1),
+          ),
+          labelStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(96, 101, 106, 1),
+          ),
+          inputStyle: GoogleFonts.montserrat(
+            fontWeight: FontWeight.w300,
+            color: const Color.fromRGBO(255, 255, 255, 1),
+          ),
+        ),
+      );
+
+  @override
+  ThemeExtension<TextInputThemeExtension> lerp(
+    covariant ThemeExtension<TextInputThemeExtension>? other,
+    double t,
+  ) {
+    if (other is! TextInputTheme) {
+      return this;
+    }
+    return TextInputTheme(
+      normalStyle: TextInputStyle.lerp(normalStyle, other.normalStyle, t),
+      focusedStyle: TextInputStyle.lerp(focusedStyle, other.focusedStyle, t),
+      disableStyle: TextInputStyle.lerp(disableStyle, other.disableStyle, t),
+      errorStyle: TextInputStyle.lerp(errorStyle, other.errorStyle, t),
+    );
+  }
+
+  @override
+  ThemeExtension<TextInputThemeExtension> copyWith({
+    TextInputStyle? normalStyle,
+    TextInputStyle? focusedStyle,
+    TextInputStyle? disableStyle,
+    TextInputStyle? errorStyle,
+  }) =>
+      TextInputTheme(
+        normalStyle: normalStyle ?? this.normalStyle,
+        focusedStyle: focusedStyle ?? this.focusedStyle,
+        disableStyle: disableStyle ?? this.disableStyle,
+        errorStyle: errorStyle ?? this.errorStyle,
+      );
+}

packages/wyatt_ui_kit/example/lib/theme/themes.dart

@@ -24,6 +24,7 @@ import 'package:wyatt_ui_kit_example/theme/loader_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/rich_text_builder_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/simple_icon_button_theme.dart';
 import 'package:wyatt_ui_kit_example/theme/symbol_button_theme.dart';
+import 'package:wyatt_ui_kit_example/theme/text_input_theme.dart';
 
 /// Easely switch between Material and Studio themes.
 abstract class Themes {
@@ -90,6 +91,7 @@ abstract class Themes {
           LoaderTheme.light(),
           // Rich Text
           RichTextBuilderTheme.light(),
+          TextInputTheme.light(),
         ],
       );
 
@@ -121,6 +123,7 @@ abstract class Themes {
           LoaderTheme.dark(),
           // Rich Text
           RichTextBuilderTheme.dark(),
+          TextInputTheme.dark(),
         ],
       );
 }