diff --git a/packages/catalog/lib/main.dart b/packages/catalog/lib/main.dart index 1befe24..e23e4e5 100644 --- a/packages/catalog/lib/main.dart +++ b/packages/catalog/lib/main.dart @@ -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: [ @@ -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), ); }, diff --git a/packages/catalog/lib/usecases/text_field.dart b/packages/catalog/lib/usecases/text_field.dart new file mode 100644 index 0000000..244fe24 --- /dev/null +++ b/packages/catalog/lib/usecases/text_field.dart @@ -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 seneatorofthenbu@gmail.com', + ), + 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', + ), + ], + ), + ), + ), + ); + }); +} diff --git a/packages/catalog/pubspec.lock b/packages/catalog/pubspec.lock index ba078b4..3d5c938 100644 --- a/packages/catalog/pubspec.lock +++ b/packages/catalog/pubspec.lock @@ -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: diff --git a/packages/cave/lib/themes/text_field_theme.dart b/packages/cave/lib/themes/text_field_theme.dart index 73aa0bb..a723cbf 100644 --- a/packages/cave/lib/themes/text_field_theme.dart +++ b/packages/cave/lib/themes/text_field_theme.dart @@ -1,61 +1,125 @@ +import 'package:control_style/control_style.dart'; import 'package:flutter/material.dart'; import 'colors.dart'; +import 'effects.dart'; @immutable class DevfestTextFieldTheme extends ThemeExtension { 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, ), ); @@ -63,13 +127,19 @@ class DevfestTextFieldTheme extends ThemeExtension { ThemeExtension 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, ); } diff --git a/packages/cave/lib/themes/theme_data.dart b/packages/cave/lib/themes/theme_data.dart index c65f8e6..7fb35f2 100644 --- a/packages/cave/lib/themes/theme_data.dart +++ b/packages/cave/lib/themes/theme_data.dart @@ -34,14 +34,14 @@ class DevFestTheme extends ThemeExtension { 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(), diff --git a/packages/cave/lib/widgets/text_field.dart b/packages/cave/lib/widgets/text_field.dart index 8b13789..b0d41c2 100644 --- a/packages/cave/lib/widgets/text_field.dart +++ b/packages/cave/lib/widgets/text_field.dart @@ -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? 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, + ], + ); + } +} diff --git a/packages/cave/lib/widgets/widgets.dart b/packages/cave/lib/widgets/widgets.dart index d51dc65..1c836cc 100644 --- a/packages/cave/lib/widgets/widgets.dart +++ b/packages/cave/lib/widgets/widgets.dart @@ -1,2 +1,3 @@ export 'bottom_nav.dart'; export 'buttons.dart'; +export 'text_field.dart'; diff --git a/packages/cave/pubspec.yaml b/packages/cave/pubspec.yaml index fb5f133..aff6aed 100644 --- a/packages/cave/pubspec.yaml +++ b/packages/cave/pubspec.yaml @@ -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 diff --git a/packages/conferenceapp/pubspec.lock b/packages/conferenceapp/pubspec.lock index e776e50..f28e73e 100644 --- a/packages/conferenceapp/pubspec.lock +++ b/packages/conferenceapp/pubspec.lock @@ -44,10 +44,18 @@ packages: dependency: transitive description: name: collection - sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a + sha256: a1ace0a119f20aabc852d165077c036cd864315bd99b7eaa10a60100341941bf url: "https://pub.dev" source: hosted - version: "1.18.0" + version: "1.19.0" + control_style: + dependency: transitive + description: + name: control_style + sha256: "4b27dad0c87a7bce81319676b717c8134996450595b1e5cbb0cebdaa8131492a" + url: "https://pub.dev" + source: hosted + version: "0.1.0" cupertino_icons: dependency: "direct main" description: @@ -102,18 +110,18 @@ packages: dependency: transitive description: name: leak_tracker - sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05" + sha256: "7bb2830ebd849694d1ec25bf1f44582d6ac531a57a365a803a6034ff751d2d06" url: "https://pub.dev" source: hosted - version: "10.0.5" + version: "10.0.7" leak_tracker_flutter_testing: dependency: transitive description: name: leak_tracker_flutter_testing - sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806" + sha256: "9491a714cca3667b60b5c420da8217e6de0d1ba7a5ec322fab01758f6998f379" url: "https://pub.dev" source: hosted - version: "3.0.5" + version: "3.0.8" leak_tracker_testing: dependency: transitive description: @@ -166,7 +174,7 @@ packages: dependency: transitive description: flutter source: sdk - version: "0.0.99" + version: "0.0.0" source_span: dependency: transitive description: @@ -195,10 +203,10 @@ packages: dependency: transitive description: name: string_scanner - sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde" + sha256: "688af5ed3402a4bde5b3a6c15fd768dbf2621a614950b17f04626c431ab3c4c3" url: "https://pub.dev" source: hosted - version: "1.2.0" + version: "1.3.0" term_glyph: dependency: transitive description: @@ -211,10 +219,10 @@ packages: dependency: transitive description: name: test_api - sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb" + sha256: "664d3a9a64782fcdeb83ce9c6b39e78fd2971d4e37827b9b06c3aa1edc5e760c" url: "https://pub.dev" source: hosted - version: "0.7.2" + version: "0.7.3" vector_math: dependency: transitive description: diff --git a/packages/volunteerapp/pubspec.lock b/packages/volunteerapp/pubspec.lock index e776e50..f28e73e 100644 --- a/packages/volunteerapp/pubspec.lock +++ b/packages/volunteerapp/pubspec.lock @@ -44,10 +44,18 @@ packages: dependency: transitive description: name: collection - sha256: ee67cb0715911d28db6bf4af1026078bd6f0128b07a5f66fb2ed94ec6783c09a + sha256: a1ace0a119f20aabc852d165077c036cd864315bd99b7eaa10a60100341941bf url: "https://pub.dev" source: hosted - version: "1.18.0" + version: "1.19.0" + control_style: + dependency: transitive + description: + name: control_style + sha256: "4b27dad0c87a7bce81319676b717c8134996450595b1e5cbb0cebdaa8131492a" + url: "https://pub.dev" + source: hosted + version: "0.1.0" cupertino_icons: dependency: "direct main" description: @@ -102,18 +110,18 @@ packages: dependency: transitive description: name: leak_tracker - sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05" + sha256: "7bb2830ebd849694d1ec25bf1f44582d6ac531a57a365a803a6034ff751d2d06" url: "https://pub.dev" source: hosted - version: "10.0.5" + version: "10.0.7" leak_tracker_flutter_testing: dependency: transitive description: name: leak_tracker_flutter_testing - sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806" + sha256: "9491a714cca3667b60b5c420da8217e6de0d1ba7a5ec322fab01758f6998f379" url: "https://pub.dev" source: hosted - version: "3.0.5" + version: "3.0.8" leak_tracker_testing: dependency: transitive description: @@ -166,7 +174,7 @@ packages: dependency: transitive description: flutter source: sdk - version: "0.0.99" + version: "0.0.0" source_span: dependency: transitive description: @@ -195,10 +203,10 @@ packages: dependency: transitive description: name: string_scanner - sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde" + sha256: "688af5ed3402a4bde5b3a6c15fd768dbf2621a614950b17f04626c431ab3c4c3" url: "https://pub.dev" source: hosted - version: "1.2.0" + version: "1.3.0" term_glyph: dependency: transitive description: @@ -211,10 +219,10 @@ packages: dependency: transitive description: name: test_api - sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb" + sha256: "664d3a9a64782fcdeb83ce9c6b39e78fd2971d4e37827b9b06c3aa1edc5e760c" url: "https://pub.dev" source: hosted - version: "0.7.2" + version: "0.7.3" vector_math: dependency: transitive description: