master #81
@ -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/demo_page.dart';
|
||||||
import 'package:wyatt_ui_kit_example/loaders/loaders.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/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';
|
import 'package:wyatt_ui_kit_example/theme/themes.dart';
|
||||||
|
|
||||||
const String title = 'Wyatt UIKit Example';
|
const String title = 'Wyatt UIKit Example';
|
||||||
@ -26,6 +27,7 @@ class _HomeState extends State<Home> {
|
|||||||
Buttons(),
|
Buttons(),
|
||||||
Loaders(),
|
Loaders(),
|
||||||
RichTextBuilders(),
|
RichTextBuilders(),
|
||||||
|
TextInputs(),
|
||||||
];
|
];
|
||||||
|
|
||||||
int currentIndex = 0;
|
int currentIndex = 0;
|
||||||
|
|||||||
140
packages/wyatt_ui_kit/example/lib/text_input/text_inputs.dart
Normal file
140
packages/wyatt_ui_kit/example/lib/text_input/text_inputs.dart
Normal file
@ -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),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
181
packages/wyatt_ui_kit/example/lib/theme/text_input_theme.dart
Normal file
181
packages/wyatt_ui_kit/example/lib/theme/text_input_theme.dart
Normal file
@ -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,
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -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/rich_text_builder_theme.dart';
|
||||||
import 'package:wyatt_ui_kit_example/theme/simple_icon_button_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/symbol_button_theme.dart';
|
||||||
|
import 'package:wyatt_ui_kit_example/theme/text_input_theme.dart';
|
||||||
|
|
||||||
/// Easely switch between Material and Studio themes.
|
/// Easely switch between Material and Studio themes.
|
||||||
abstract class Themes {
|
abstract class Themes {
|
||||||
@ -90,6 +91,7 @@ abstract class Themes {
|
|||||||
LoaderTheme.light(),
|
LoaderTheme.light(),
|
||||||
// Rich Text
|
// Rich Text
|
||||||
RichTextBuilderTheme.light(),
|
RichTextBuilderTheme.light(),
|
||||||
|
TextInputTheme.light(),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -121,6 +123,7 @@ abstract class Themes {
|
|||||||
LoaderTheme.dark(),
|
LoaderTheme.dark(),
|
||||||
// Rich Text
|
// Rich Text
|
||||||
RichTextBuilderTheme.dark(),
|
RichTextBuilderTheme.dark(),
|
||||||
|
TextInputTheme.dark(),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user