diff --git a/packages/wyatt_ui_kit/example/lib/home.dart b/packages/wyatt_ui_kit/example/lib/home.dart index cac6c236..9d772a61 100644 --- a/packages/wyatt_ui_kit/example/lib/home.dart +++ b/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 { Buttons(), Loaders(), RichTextBuilders(), + TextInputs(), ]; int currentIndex = 0; diff --git a/packages/wyatt_ui_kit/example/lib/text_input/text_inputs.dart b/packages/wyatt_ui_kit/example/lib/text_input/text_inputs.dart new file mode 100644 index 00000000..7d568abd --- /dev/null +++ b/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 createState() => _TextInputsCoreState(); +} + +class _TextInputsCoreState extends State { + final _formKey = GlobalKey(); + final _controller = TextEditingController(); + final _focusNode = FocusNode(); + + final _formKey2 = GlobalKey(); + final _controller2 = TextEditingController(); + final _focusNode2 = FocusNode(); + + final _formKey3 = GlobalKey(); + final _controller3 = TextEditingController(); + final _focusNode3 = FocusNode(); + + final _formKey4 = GlobalKey(); + final _controller4 = TextEditingController(); + final _focusNode4 = FocusNode(); + + final _formKey5 = GlobalKey(); + final _controller5 = TextEditingController(); + final _focusNode5 = FocusNode(); + + final _formKey6 = GlobalKey(); + final _controller6 = TextEditingController(); + final _focusNode6 = FocusNode(); + + final ValueNotifier _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), + ], + ), + ); +} diff --git a/packages/wyatt_ui_kit/example/lib/theme/text_input_theme.dart b/packages/wyatt_ui_kit/example/lib/theme/text_input_theme.dart new file mode 100644 index 00000000..93e583f4 --- /dev/null +++ b/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 . + +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 lerp( + covariant ThemeExtension? 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 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, + ); +} diff --git a/packages/wyatt_ui_kit/example/lib/theme/themes.dart b/packages/wyatt_ui_kit/example/lib/theme/themes.dart index 63ecea53..6bb52867 100644 --- a/packages/wyatt_ui_kit/example/lib/theme/themes.dart +++ b/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(), ], ); }