Skip to content

Commit

Permalink
feat: textfields
Browse files Browse the repository at this point in the history
  • Loading branch information
Mastersam07 committed Sep 4, 2024
1 parent 3f06181 commit 6b3d198
Show file tree
Hide file tree
Showing 10 changed files with 260 additions and 52 deletions.
9 changes: 5 additions & 4 deletions packages/catalog/lib/main.dart
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ class WidgetbookApp extends StatelessWidget {
Widget build(BuildContext context) {
return Widgetbook.material(
directories: directories,
initialRoute: '/?path=widgets/devfestbottomnav/devfest-bottom-nav',
addons: [
DeviceFrameAddon(
devices: [
Expand Down Expand Up @@ -79,9 +78,11 @@ class WidgetbookApp extends StatelessWidget {
builder: (context, child) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: theme.copyWith(extensions: [
isDark ? DevFestTheme.dark() : DevFestTheme.light()
]),
theme: theme.copyWith(
extensions: [
isDark ? DevFestTheme.dark() : DevFestTheme.light()
],
),
home: Material(child: child),
);
},
Expand Down
37 changes: 37 additions & 0 deletions packages/catalog/lib/usecases/text_field.dart
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import 'package:cave/cave.dart';
import 'package:flutter/material.dart';
import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

@widgetbook.UseCase(
name: 'DevFest FormField',
type: DevfestTextFormField,
)
Widget devfestTextField(BuildContext context) {
return StatefulBuilder(builder: (context, setState) {
return Scaffold(
backgroundColor: DevFestTheme.of(context).backgroundColor,
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const DevfestTextFormField(
title: 'Email Address',
hint: 'eg [email protected]',
),
const SizedBox(height: 16),
DevfestTextFormField(
title: 'Ticket ID',
hint: 'eg 413-012-ABC',
autovalidateMode: AutovalidateMode.always,
validator: (value) =>
'The ticket ID or Email address is incorrect. Please try again',
),
],
),
),
),
);
});
}
8 changes: 8 additions & 0 deletions packages/catalog/pubspec.lock
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,14 @@ packages:
url: "https://pub.dev"
source: hosted
version: "1.18.0"
control_style:
dependency: transitive
description:
name: control_style
sha256: "4b27dad0c87a7bce81319676b717c8134996450595b1e5cbb0cebdaa8131492a"
url: "https://pub.dev"
source: hosted
version: "0.1.0"
convert:
dependency: transitive
description:
Expand Down
114 changes: 92 additions & 22 deletions packages/cave/lib/themes/text_field_theme.dart
Original file line number Diff line number Diff line change
@@ -1,75 +1,145 @@
import 'package:control_style/control_style.dart';
import 'package:flutter/material.dart';

import 'colors.dart';
import 'effects.dart';

@immutable
class DevfestTextFieldTheme extends ThemeExtension<DevfestTextFieldTheme> {
final InputBorder border;
final InputBorder enabledBorder;
final InputBorder focusedBorder;
final InputBorder errorBorder;
final TextStyle errorStyle;
final TextStyle hintStyle;
final TextStyle style;

const DevfestTextFieldTheme._(
{required this.border,
required this.focusedBorder,
required this.hintStyle,
required this.style});
const DevfestTextFieldTheme._({
required this.border,
required this.enabledBorder,
required this.errorBorder,
required this.focusedBorder,
required this.errorStyle,
required this.hintStyle,
required this.style,
});

const DevfestTextFieldTheme.light()
DevfestTextFieldTheme.light()
: this._(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide: BorderSide(color: DevfestColors.grey90, width: 1.5),
borderSide: BorderSide(color: DevfestColors.grey80, width: 1.4),
),
focusedBorder: const OutlineInputBorder(
enabledBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide: BorderSide(color: DevfestColors.grey40, width: 1.5),
borderSide: BorderSide(color: DevfestColors.grey80, width: 1.4),
),
focusedBorder: DecoratedInputBorder(
shadow: const [
AppEffectStyles.activeInputShadowEffect0,
],
child: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide:
BorderSide(color: DevfestColors.primariesBlue80, width: 2),
),
),
errorBorder: DecoratedInputBorder(
shadow: const [
AppEffectStyles.errorStateShadowEffect0,
],
child: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide:
BorderSide(color: DevfestColors.primariesRed80, width: 2),
),
),
hintStyle: const TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.grey40,
color: DevfestColors.grey60,
),
style: const TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.grey40,
color: DevfestColors.grey10,
),
errorStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.error60,
),
);

const DevfestTextFieldTheme.dark()
DevfestTextFieldTheme.dark()
: this._(
border: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide: BorderSide(color: DevfestColors.grey90),
borderSide: BorderSide(color: DevfestColors.grey80, width: 1.4),
),
focusedBorder: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide: BorderSide(color: DevfestColors.grey100),
enabledBorder: DecoratedInputBorder(
shadow: const [
AppEffectStyles.filledInputShadowEffect0,
],
child: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide: BorderSide(color: DevfestColors.grey70, width: 2),
),
),
focusedBorder: DecoratedInputBorder(
shadow: const [
AppEffectStyles.activeInputShadowEffect0,
],
child: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide:
BorderSide(color: DevfestColors.primariesBlue80, width: 2),
),
),
errorBorder: DecoratedInputBorder(
shadow: const [
AppEffectStyles.errorStateShadowEffect0,
],
child: const OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(16)),
borderSide:
BorderSide(color: DevfestColors.primariesRed80, width: 2),
),
),
hintStyle: const TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.grey100,
color: DevfestColors.grey60,
),
style: const TextStyle(
fontSize: 18,
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.grey10,
),
errorStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: DevfestColors.grey100,
color: DevfestColors.error60,
),
);

@override
ThemeExtension<DevfestTextFieldTheme> copyWith({
InputBorder? border,
InputBorder? focusedBorder,
InputBorder? enabledBorder,
InputBorder? errorBorder,
TextStyle? hintStyle,
TextStyle? errorStyle,
TextStyle? style,
}) {
return DevfestTextFieldTheme._(
border: border ?? this.border,
enabledBorder: enabledBorder ?? this.enabledBorder,
focusedBorder: focusedBorder ?? this.focusedBorder,
errorBorder: errorBorder ?? this.errorBorder,
hintStyle: hintStyle ?? this.hintStyle,
errorStyle: errorStyle ?? this.errorStyle,
style: style ?? this.style,
);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/cave/lib/themes/theme_data.dart
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,14 @@ class DevFestTheme extends ThemeExtension<DevFestTheme> {
buttonTheme: const DevfestButtonTheme.light(),
outlinedButtonTheme: const DevfestOutlinedButtonTheme.light(),
bottomNavTheme: const DevfestBottomNavTheme.light(),
textFieldTheme: const DevfestTextFieldTheme.light(),
textFieldTheme: DevfestTextFieldTheme.light(),
);

DevFestTheme.dark()
: this(
textTheme: const DevfestTextTheme.responsive(),
backgroundColor: DevfestColors.backgroundDark,
textFieldTheme: const DevfestTextFieldTheme.dark(),
textFieldTheme: DevfestTextFieldTheme.dark(),
buttonTheme: const DevfestButtonTheme.dark(),
outlinedButtonTheme: const DevfestOutlinedButtonTheme.dark(),
bottomNavTheme: const DevfestBottomNavTheme.dark(),
Expand Down
74 changes: 74 additions & 0 deletions packages/cave/lib/widgets/text_field.dart
Original file line number Diff line number Diff line change
@@ -1 +1,75 @@
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

import '../constants.dart';
import '../themes/colors.dart';
import '../themes/text_field_theme.dart';
import '../themes/theme_data.dart';

class DevfestTextFormField extends StatelessWidget {
const DevfestTextFormField({
super.key,
this.title,
this.controller,
this.hint,
this.info,
TextInputType? keyboardType,
Color? iconColor,
this.onChanged,
this.validator,
this.textInputAction,
this.autovalidateMode,
}) : keyboardType = keyboardType ?? TextInputType.text,
iconColor = iconColor ?? DevfestColors.grey10;
final String? title;
final String? info;
final String? hint;
final TextEditingController? controller;
final TextInputType keyboardType;
final Color iconColor;
final ValueChanged<String>? onChanged;
final String? Function(String?)? validator;
final TextInputAction? textInputAction;
final AutovalidateMode? autovalidateMode;

@override
Widget build(BuildContext context) {
final textFieldTheme = DevFestTheme.of(context).textFieldTheme ??
DevfestTextFieldTheme.light();
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (title != null) ...[
Text(
title!,
style: DevFestTheme.of(context).textTheme?.bodyBody3Medium,
),
Constants.smallVerticalGutter.verticalSpace,
],
TextFormField(
controller: controller,
keyboardType: keyboardType,
onChanged: onChanged,
validator: validator,
textInputAction: textInputAction,
autovalidateMode: autovalidateMode ?? AutovalidateMode.disabled,
// cursorColor: DevFestTheme.of(context).onBackgroundColor,
style: textFieldTheme.style,
decoration: InputDecoration(
hintText: hint,
hintStyle: textFieldTheme.hintStyle,
errorStyle: textFieldTheme.errorStyle,
errorMaxLines: 2,
contentPadding: const EdgeInsets.all(16),
border: textFieldTheme.border,
enabledBorder: textFieldTheme.enabledBorder,
focusedBorder: textFieldTheme.focusedBorder,
errorBorder: textFieldTheme.errorBorder,
focusedErrorBorder: textFieldTheme.errorBorder,
),
),
Constants.largeVerticalGutter.verticalSpace,
],
);
}
}
1 change: 1 addition & 0 deletions packages/cave/lib/widgets/widgets.dart
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export 'bottom_nav.dart';
export 'buttons.dart';
export 'text_field.dart';
5 changes: 3 additions & 2 deletions packages/cave/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,16 @@ environment:
flutter: ">=1.17.0"

dependencies:
control_style: ^0.1.0
ficonsax: ^0.0.3
flutter:
sdk: flutter
ficonsax: ^0.0.3
flutter_screenutil: ^5.9.3

dev_dependencies:
flutter_lints: ^3.0.0
flutter_test:
sdk: flutter
flutter_lints: ^3.0.0

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
Expand Down
Loading

0 comments on commit 6b3d198

Please sign in to comment.