feat(ui_kit): update example (#138)
This commit is contained in:
parent
1edb1f7324
commit
b57500b854
@ -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;
|
||||
|
||||
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/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(),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user