From 5c9f0dce951990511f35396b86398d861cc842db Mon Sep 17 00:00:00 2001 From: Prajapati Chintan Date: Sat, 21 Jan 2023 17:54:56 +0530 Subject: [PATCH 1/3] Added: Code preview and Inputs code snippets, Tabs, app expansion panel --- .../widgets/atoms/app_expansion_panel.dart | 35 ++- .../widgets/atoms/tab_options.dart | 60 +++++ .../pages/ui/components/code_preview.dart | 34 +++ .../pages/ui/components/inputs/defaults.dart | 47 +++- .../pages/ui/components/inputs/icons.dart | 87 ++++++- .../pages/ui/components/inputs/inputs.dart | 100 +++++--- .../pages/ui/components/inputs/sizes.dart | 32 ++- .../pages/ui/components/themecolors.dart | 217 ++++++------------ 8 files changed, 415 insertions(+), 197 deletions(-) create mode 100644 lib/vaahextendflutter/widgets/atoms/tab_options.dart create mode 100644 lib/views/pages/ui/components/code_preview.dart diff --git a/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart b/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart index 41030ba9..c4ded39b 100644 --- a/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart +++ b/lib/vaahextendflutter/widgets/atoms/app_expansion_panel.dart @@ -1,6 +1,8 @@ import 'package:flutter/material.dart' hide ExpansionPanel; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:team/vaahextendflutter/app_theme.dart'; +import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; final _expansionTween = CurveTween(curve: Curves.fastOutSlowIn); final _iconTurnTween = Tween(begin: 0.0, end: 0.5) // @@ -16,19 +18,23 @@ typedef ExpansionHeaderBuilder = Widget Function(BuildContext context, Expansion class AppExpansionPanel extends StatefulWidget { const AppExpansionPanel({ Key? key, - required this.headerBuilder, + this.headerBuilder, + this.heading, required this.children, this.expanded = false, this.padding = EdgeInsets.zero, this.border = true, + this.backgroundColor, this.textStyle, }) : super(key: key); - final ExpansionHeaderBuilder headerBuilder; + final ExpansionHeaderBuilder? headerBuilder; + final String? heading; final List children; final bool expanded; final EdgeInsets padding; final bool border; + final Color? backgroundColor; final TextStyle? textStyle; @override @@ -86,12 +92,16 @@ class _AppExpansionPanelState extends State Widget build(BuildContext context) { return Material( type: widget.border ? MaterialType.canvas : MaterialType.transparency, + color: widget.backgroundColor ?? AppTheme.colors['black']!.shade50.withOpacity(0.5), shape: widget.border ? AppTheme.panelBorder : null, textStyle: widget.textStyle, child: Column( mainAxisSize: MainAxisSize.min, children: [ - widget.headerBuilder(context, this), + if (widget.headerBuilder != null) + widget.headerBuilder!(context, this) + else + defaultHeaderBuilder(context, this), SizeTransition( axis: Axis.vertical, axisAlignment: -1.0, @@ -109,6 +119,25 @@ class _AppExpansionPanelState extends State ), ); } + + Widget defaultHeaderBuilder(BuildContext context, ExpansionControl control) { + return InkWell( + onTap: () { + control.expanded = !control.expanded; + }, + child: Padding( + padding: allPadding16, + child: Row( + children: [ + Expanded( + child: Text(widget.heading ?? '', style: TextStyles.bold5), + ), + const AppExpansionPanelIcon(), + ], + ), + ), + ); + } } @immutable diff --git a/lib/vaahextendflutter/widgets/atoms/tab_options.dart b/lib/vaahextendflutter/widgets/atoms/tab_options.dart new file mode 100644 index 00000000..be7cd0de --- /dev/null +++ b/lib/vaahextendflutter/widgets/atoms/tab_options.dart @@ -0,0 +1,60 @@ +import 'package:flutter/cupertino.dart'; +import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/views/pages/ui/components/section_title_selector.dart'; + +class TabOption { + final String name; + final Widget tab; + + const TabOption({ + required this.name, + required this.tab, + }); +} + +class TabOptions extends StatefulWidget { + const TabOptions({ + Key? key, + required this.tabs, + }) : super(key: key); + + final List tabs; + + @override + State createState() => _TabOptionsState(); +} + +class _TabOptionsState extends State { + int _selectedIndex = 0; + + @override + Widget build(BuildContext context) { + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Wrap( + crossAxisAlignment: WrapCrossAlignment.end, + children: [ + for (int i = 0; i < widget.tabs.length; i++) ...[ + sectionTitleSelector( + title: widget.tabs[i].name, + condition: _selectedIndex == i, + callback: () { + setState(() { + _selectedIndex = i; + }); + }, + ), + verticalMargin12, + horizontalMargin12, + ], + ], + ), + verticalMargin24, + widget.tabs[_selectedIndex].tab, + verticalMargin24, + ], + ); + } +} diff --git a/lib/views/pages/ui/components/code_preview.dart b/lib/views/pages/ui/components/code_preview.dart new file mode 100644 index 00000000..d9b26c42 --- /dev/null +++ b/lib/views/pages/ui/components/code_preview.dart @@ -0,0 +1,34 @@ +import 'package:flutter/cupertino.dart'; +import 'package:team/vaahextendflutter/app_theme.dart'; +import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; +import 'package:team/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart'; + +class CodePreview extends StatelessWidget { + final List code; + + const CodePreview({Key? key, required this.code}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ContainerWithRoundedBorder( + width: double.infinity, + color: AppTheme.colors['black']!.withOpacity(0.8), + padding: allPadding12, + borderRadius: 6, + child: SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + for (final line in code) + Text( + line, + style: TextStyles.regular2?.copyWith(color: AppTheme.colors['white']), + ), + ], + ), + ), + ); + } +} diff --git a/lib/views/pages/ui/components/inputs/defaults.dart b/lib/views/pages/ui/components/inputs/defaults.dart index ba53e230..512c4bdf 100644 --- a/lib/views/pages/ui/components/inputs/defaults.dart +++ b/lib/views/pages/ui/components/inputs/defaults.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; import 'package:team/vaahextendflutter/widgets/atoms/inputs.dart'; +import 'package:team/views/pages/ui/components/code_preview.dart'; import 'package:team/views/pages/ui/components/commons.dart'; -class DefaultTextInputs extends StatelessWidget { - const DefaultTextInputs({Key? key}) : super(key: key); +class DefaultTextInputsPreview extends StatelessWidget { + const DefaultTextInputsPreview({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -32,3 +34,44 @@ class DefaultTextInputs extends StatelessWidget { ); } } + +class DefaultTextInputsCode extends StatelessWidget { + const DefaultTextInputsCode({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('Simple', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const TextInput(label: 'Simple'),"]), + verticalMargin8, + Text('Disabled', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const TextInput(label: 'Disabled', isEnabled: false),"]), + verticalMargin8, + Text('Invalid', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "TextInput(", + " label: 'Invalid',", + " validator: (value) {", + " if (value!.isEmpty) {", + " return 'Field is empty';", + " }", + " return null;", + " },", + "),", + "", + "", + "// Call below method to validate, also wrap the input with form and key", + "formKey.currentState?.validate()" + ], + ), + ], + ); + } +} diff --git a/lib/views/pages/ui/components/inputs/icons.dart b/lib/views/pages/ui/components/inputs/icons.dart index f5cfeedb..e52d7bd5 100644 --- a/lib/views/pages/ui/components/inputs/icons.dart +++ b/lib/views/pages/ui/components/inputs/icons.dart @@ -3,11 +3,13 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:team/vaahextendflutter/app_theme.dart'; import 'package:team/vaahextendflutter/helpers/alerts.dart'; import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; import 'package:team/vaahextendflutter/widgets/atoms/inputs.dart'; +import 'package:team/views/pages/ui/components/code_preview.dart'; import 'package:team/views/pages/ui/components/commons.dart'; -class InputIcons extends StatelessWidget { - const InputIcons({Key? key}) : super(key: key); +class InputIconsPreview extends StatelessWidget { + const InputIconsPreview({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -57,3 +59,84 @@ class InputIcons extends StatelessWidget { ); } } + +class InputIconsCode extends StatelessWidget { + const InputIconsCode({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('Small', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const TextInput(", + " size: InputSize.small,", + " label: 'Small',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Medium', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const TextInput(", + " size: InputSize.medium,", + " label: 'Medium',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Large', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const TextInput(", + " size: InputSize.large,", + " label: 'Large',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Suffix icon', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const TextInput(", + " label: 'Search',", + " suffixIcon: FontAwesomeIcons.magnifyingGlass,", + "),", + ], + ), + verticalMargin8, + Text('Icon On Tap', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const TextInput(", + " label: 'Search',", + " prefixOnTap: () {", + " Alerts.showSuccessToast!(content: 'Prefix icon onTap');", + " },", + " suffixOnTap: () {", + " Alerts.showErrorToast!(content: 'Suffix icon onTap');", + " },", + " prefixIcon: FontAwesomeIcons.user,", + " prefixIconColor: AppTheme.colors['primary'],", + " suffixIcon: FontAwesomeIcons.magnifyingGlass,", + " suffixIconColor: AppTheme.colors['primary'],", + "),", + ], + ), + verticalMargin8, + ], + ); + } +} diff --git a/lib/views/pages/ui/components/inputs/inputs.dart b/lib/views/pages/ui/components/inputs/inputs.dart index df5a3928..83fefb34 100644 --- a/lib/views/pages/ui/components/inputs/inputs.dart +++ b/lib/views/pages/ui/components/inputs/inputs.dart @@ -2,11 +2,12 @@ import 'package:flutter/material.dart'; import 'package:team/vaahextendflutter/app_theme.dart'; import 'package:team/vaahextendflutter/helpers/constants.dart'; import 'package:team/vaahextendflutter/helpers/styles.dart'; +import 'package:team/vaahextendflutter/widgets/atoms/app_expansion_panel.dart'; import 'package:team/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart'; +import 'package:team/vaahextendflutter/widgets/atoms/tab_options.dart'; import 'package:team/views/pages/ui/components/inputs/defaults.dart'; import 'package:team/views/pages/ui/components/inputs/icons.dart'; import 'package:team/views/pages/ui/components/inputs/sizes.dart'; -import 'package:team/views/pages/ui/components/section_title_selector.dart'; class AppInputs extends StatefulWidget { const AppInputs({Key? key}) : super(key: key); @@ -16,8 +17,6 @@ class AppInputs extends StatefulWidget { } class _AppInputsState extends State { - int _selectedIndex = 0; - @override Widget build(BuildContext context) { return ContainerWithRoundedBorder( @@ -29,45 +28,72 @@ class _AppInputsState extends State { children: [ Text('Text Inputs', style: TextStyles.semiBold7), verticalMargin24, - tabOptions(), - Divider(color: AppTheme.colors['primary']!.shade200), - verticalMargin24, - const DefaultTextInputs(), - verticalMargin24, - const InputSizes(), - verticalMargin24, - const InputIcons(), - verticalMargin24, + TabOptions( + tabs: [ + TabOption( + name: 'Preview', + tab: Column( + children: const [ + DefaultTextInputsPreview(), + verticalMargin24, + InputSizesPreview(), + verticalMargin24, + InputIconsPreview(), + ], + ), + ), + TabOption( + name: 'Code', + tab: Column( + children: const [ + ExpansionPanelWrap( + title: 'Defaults', + child: DefaultTextInputsCode(), + ), + verticalMargin8, + ExpansionPanelWrap( + title: 'Input Sizes', + child: InputSizesCode(), + ), + verticalMargin8, + ExpansionPanelWrap( + title: 'Input Icons', + child: InputIconsCode(), + ), + ], + ), + ), + ], + ), ], ), ); } +} + +@immutable +class ExpansionPanelWrap extends StatelessWidget { + const ExpansionPanelWrap({ + Key? key, + required this.title, + required this.child, + }) : super(key: key); - Widget tabOptions() { - return Wrap( - crossAxisAlignment: WrapCrossAlignment.end, - children: [ - sectionTitleSelector( - title: 'Preview', - condition: _selectedIndex == 0, - callback: () { - setState(() { - _selectedIndex = 0; - }); - }, - ), - verticalMargin12, - horizontalMargin12, - sectionTitleSelector( - title: 'Code', - condition: _selectedIndex == 1, - callback: () { - setState(() { - _selectedIndex = 1; - }); - }, - ), - ], + final String title; + final Widget child; + + @override + Widget build(BuildContext context) { + return Padding( + padding: bottomPadding1, + child: AppExpansionPanel( + padding: allPadding16, + textStyle: TextStyles.regular4?.copyWith(color: AppTheme.colors['primary']), + heading: title, + children: [ + child, + ], + ), ); } } diff --git a/lib/views/pages/ui/components/inputs/sizes.dart b/lib/views/pages/ui/components/inputs/sizes.dart index 3fab3c52..45a5c688 100644 --- a/lib/views/pages/ui/components/inputs/sizes.dart +++ b/lib/views/pages/ui/components/inputs/sizes.dart @@ -1,10 +1,12 @@ import 'package:flutter/material.dart'; import 'package:team/vaahextendflutter/helpers/constants.dart'; +import 'package:team/vaahextendflutter/helpers/styles.dart'; import 'package:team/vaahextendflutter/widgets/atoms/inputs.dart'; +import 'package:team/views/pages/ui/components/code_preview.dart'; import 'package:team/views/pages/ui/components/commons.dart'; -class InputSizes extends StatelessWidget { - const InputSizes({Key? key}) : super(key: key); +class InputSizesPreview extends StatelessWidget { + const InputSizesPreview({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -23,3 +25,29 @@ class InputSizes extends StatelessWidget { ); } } + +class InputSizesCode extends StatelessWidget { + const InputSizesCode({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text('Small', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const TextInput(size: InputSize.small, label: 'Small'),"]), + verticalMargin8, + Text('Medium', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const TextInput(size: InputSize.medium, label: 'Medium'),"]), + verticalMargin8, + Text('Large', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const TextInput(size: InputSize.large, label: 'Large'),"]), + verticalMargin8, + ], + ); + } +} diff --git a/lib/views/pages/ui/components/themecolors.dart b/lib/views/pages/ui/components/themecolors.dart index 7556e42c..92d328f6 100644 --- a/lib/views/pages/ui/components/themecolors.dart +++ b/lib/views/pages/ui/components/themecolors.dart @@ -4,7 +4,8 @@ import 'package:team/vaahextendflutter/helpers/constants.dart'; import 'package:team/vaahextendflutter/helpers/styles.dart'; import 'package:team/vaahextendflutter/widgets/atoms/app_expansion_panel.dart'; import 'package:team/vaahextendflutter/widgets/atoms/container_with_rounded_border.dart'; -import 'package:team/views/pages/ui/components/section_title_selector.dart'; +import 'package:team/vaahextendflutter/widgets/atoms/tab_options.dart'; +import 'package:team/views/pages/ui/components/code_preview.dart'; class AppThemeColors extends StatefulWidget { const AppThemeColors({Key? key}) : super(key: key); @@ -14,8 +15,6 @@ class AppThemeColors extends StatefulWidget { } class _AppThemeColorsState extends State { - int _selectedIndex = 0; - @override Widget build(BuildContext context) { return ContainerWithRoundedBorder( @@ -27,86 +26,54 @@ class _AppThemeColorsState extends State { children: [ Text('AppTheme.colors', style: TextStyles.semiBold7), verticalMargin24, - tabOptions(), - Divider(color: AppTheme.colors['primary']!.shade200), - verticalMargin16, - _selectedIndex == 0 ? preview() : code(), + TabOptions( + tabs: [ + TabOption( + name: 'Preview', + tab: Column( + children: [ + ColorPalette(title: 'Primary', color: AppTheme.colors['primary']!), + verticalMargin8, + ColorPalette(title: 'Info', color: AppTheme.colors['info']!), + verticalMargin8, + ColorPalette(title: 'Success', color: AppTheme.colors['success']!), + verticalMargin8, + ColorPalette(title: 'Warning', color: AppTheme.colors['warning']!), + verticalMargin8, + ColorPalette(title: 'Danger', color: AppTheme.colors['danger']!), + verticalMargin8, + ColorPalette(title: 'Black', color: AppTheme.colors['black']!), + verticalMargin8, + ColorPalette(title: 'White', color: AppTheme.colors['white']!), + ], + ), + ), + TabOption( + name: 'Code', + tab: Column( + children: [ + ColorCodes(title: 'Primary', color: AppTheme.colors['primary']), + verticalMargin8, + ColorCodes(title: 'Info', color: AppTheme.colors['info']), + verticalMargin8, + ColorCodes(title: 'Success', color: AppTheme.colors['success']), + verticalMargin8, + ColorCodes(title: 'Warning', color: AppTheme.colors['warning']), + verticalMargin8, + ColorCodes(title: 'Danger', color: AppTheme.colors['danger']), + verticalMargin8, + ColorCodes(title: 'Black', color: AppTheme.colors['black']), + verticalMargin8, + ColorCodes(title: 'White', color: AppTheme.colors['white']), + ], + ), + ), + ], + ), ], ), ); } - - Widget tabOptions() { - return Wrap( - crossAxisAlignment: WrapCrossAlignment.end, - children: [ - sectionTitleSelector( - title: 'Preview', - condition: _selectedIndex == 0, - callback: () { - setState(() { - _selectedIndex = 0; - }); - }, - ), - verticalMargin12, - horizontalMargin12, - sectionTitleSelector( - title: 'Code', - condition: _selectedIndex == 1, - callback: () { - setState(() { - _selectedIndex = 1; - }); - }, - ), - ], - ); - } -} - -Widget preview() { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - ColorPalette(title: 'Primary', color: AppTheme.colors['primary']!), - verticalMargin8, - ColorPalette(title: 'Info', color: AppTheme.colors['info']!), - verticalMargin8, - ColorPalette(title: 'Success', color: AppTheme.colors['success']!), - verticalMargin8, - ColorPalette(title: 'Warning', color: AppTheme.colors['warning']!), - verticalMargin8, - ColorPalette(title: 'Danger', color: AppTheme.colors['danger']!), - verticalMargin8, - ColorPalette(title: 'Black', color: AppTheme.colors['black']!), - verticalMargin8, - ColorPalette(title: 'White', color: AppTheme.colors['white']!), - ], - ); -} - -Widget code() { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - ColorCodes(title: 'Primary', color: AppTheme.colors['primary']), - verticalMargin8, - ColorCodes(title: 'Info', color: AppTheme.colors['info']), - verticalMargin8, - ColorCodes(title: 'Success', color: AppTheme.colors['success']), - verticalMargin8, - ColorCodes(title: 'Warning', color: AppTheme.colors['warning']), - verticalMargin8, - ColorCodes(title: 'Danger', color: AppTheme.colors['danger']), - verticalMargin8, - ColorCodes(title: 'Black', color: AppTheme.colors['black']), - verticalMargin8, - ColorCodes(title: 'White', color: AppTheme.colors['white']), - ], - ); } class ColorPalette extends StatelessWidget { @@ -172,85 +139,33 @@ class ColorCodes extends StatelessWidget { child: AppExpansionPanel( padding: allPadding16, textStyle: TextStyles.regular4?.copyWith(color: AppTheme.colors['primary']), - headerBuilder: (BuildContext context, ExpansionControl control) { - return InkWell( - onTap: () { - control.expanded = !control.expanded; - }, - child: Padding( - padding: allPadding16, - child: Row( - children: [ - Expanded( - child: Text(title, style: TextStyles.bold5), - ), - const AppExpansionPanelIcon(), - ], - ), - ), - ); - }, + heading: title, children: color == null ? [] : [ - Text('Primary', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}']"), - verticalMargin8, - Text('shade50', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade50"), - verticalMargin8, - Text('shade100', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade100"), - verticalMargin8, - Text('shade200', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade200"), - verticalMargin8, - Text('shade300', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade300"), - verticalMargin8, - Text('shade400', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade400"), - verticalMargin8, - Text('shade500', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade500"), - verticalMargin8, - Text('shade600', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade600"), - verticalMargin8, - Text('shad700', style: TextStyles.regular2), + Text(title, style: TextStyles.regular2), verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade700"), + CodePreview(code: ["AppTheme.colors['${title.toLowerCase()}']"]), verticalMargin8, - Text('shade800', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade800"), - verticalMargin8, - Text('shade900', style: TextStyles.regular2), - verticalMargin4, - codePreview("AppTheme.colors['${title.toLowerCase()}'].shade900"), + for (String shade in [ + 'shade50', + 'shade100', + 'shade200', + 'shade300', + 'shade400', + 'shade500', + 'shade600', + 'shade700', + 'shade800', + 'shade900', + ]) ...[ + Text(shade, style: TextStyles.regular2), + verticalMargin4, + CodePreview(code: ["AppTheme.colors['${title.toLowerCase()}'].$shade"]), + verticalMargin8, + ], ], ), ); } - - Widget codePreview(String code) { - return ContainerWithRoundedBorder( - width: double.infinity, - color: AppTheme.colors['black']!, - padding: allPadding12, - borderRadius: 6, - child: Text( - code, - style: TextStyles.regular2?.copyWith(color: AppTheme.colors['white']), - ), - ); - } } From 2f0c34cbf0b5f9373ba101a6ba59f58e0a53175b Mon Sep 17 00:00:00 2001 From: Prajapati Chintan Date: Wed, 1 Feb 2023 17:46:23 +0530 Subject: [PATCH 2/3] Fixed: tabs fix for when no tabs passed --- .../widgets/atoms/tab_options.dart | 62 +++++++++++-------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/lib/vaahextendflutter/widgets/atoms/tab_options.dart b/lib/vaahextendflutter/widgets/atoms/tab_options.dart index be7cd0de..0ab7ddbf 100644 --- a/lib/vaahextendflutter/widgets/atoms/tab_options.dart +++ b/lib/vaahextendflutter/widgets/atoms/tab_options.dart @@ -25,36 +25,48 @@ class TabOptions extends StatefulWidget { } class _TabOptionsState extends State { + bool hasError = false; + + @override + void initState() { + if (widget.tabs.isEmpty) { + hasError = true; + } + super.initState(); + } + int _selectedIndex = 0; @override Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisSize: MainAxisSize.min, - children: [ - Wrap( - crossAxisAlignment: WrapCrossAlignment.end, - children: [ - for (int i = 0; i < widget.tabs.length; i++) ...[ - sectionTitleSelector( - title: widget.tabs[i].name, - condition: _selectedIndex == i, - callback: () { - setState(() { - _selectedIndex = i; - }); - }, + return hasError + ? const Text('Something went wrong!') + : Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisSize: MainAxisSize.min, + children: [ + Wrap( + crossAxisAlignment: WrapCrossAlignment.end, + children: [ + for (int i = 0; i < widget.tabs.length; i++) ...[ + sectionTitleSelector( + title: widget.tabs[i].name, + condition: _selectedIndex == i, + callback: () { + setState(() { + _selectedIndex = i; + }); + }, + ), + verticalMargin12, + horizontalMargin12, + ], + ], ), - verticalMargin12, - horizontalMargin12, + verticalMargin24, + widget.tabs[_selectedIndex].tab, + verticalMargin24, ], - ], - ), - verticalMargin24, - widget.tabs[_selectedIndex].tab, - verticalMargin24, - ], - ); + ); } } From ff95130e05cb8d35fc72f5b8a085faa9ae076865 Mon Sep 17 00:00:00 2001 From: Prajapati Chintan Date: Thu, 2 Feb 2023 11:34:30 +0530 Subject: [PATCH 3/3] Updated: fix for naming conventions --- .../widgets/atoms/inputs.dart | 4 ++-- .../pages/ui/components/inputs/defaults.dart | 22 +++++++++---------- .../pages/ui/components/inputs/icons.dart | 20 ++++++++--------- .../pages/ui/components/inputs/inputs.dart | 8 +++---- .../pages/ui/components/inputs/sizes.dart | 12 +++++----- 5 files changed, 33 insertions(+), 33 deletions(-) diff --git a/lib/vaahextendflutter/widgets/atoms/inputs.dart b/lib/vaahextendflutter/widgets/atoms/inputs.dart index 5d19c82a..e5588e75 100644 --- a/lib/vaahextendflutter/widgets/atoms/inputs.dart +++ b/lib/vaahextendflutter/widgets/atoms/inputs.dart @@ -6,7 +6,7 @@ import 'package:team/vaahextendflutter/helpers/constants.dart'; enum InputSize { extraSmall, small, medium, large, extraLarge } -class TextInput extends StatelessWidget { +class InputText extends StatelessWidget { final String? label; final EdgeInsets padding; final double borderRadius; @@ -27,7 +27,7 @@ class TextInput extends StatelessWidget { final int? minLines; final int? maxLines; - const TextInput({ + const InputText({ super.key, this.label, this.padding = allPadding12, diff --git a/lib/views/pages/ui/components/inputs/defaults.dart b/lib/views/pages/ui/components/inputs/defaults.dart index 512c4bdf..287ccd2c 100644 --- a/lib/views/pages/ui/components/inputs/defaults.dart +++ b/lib/views/pages/ui/components/inputs/defaults.dart @@ -5,8 +5,8 @@ import 'package:team/vaahextendflutter/widgets/atoms/inputs.dart'; import 'package:team/views/pages/ui/components/code_preview.dart'; import 'package:team/views/pages/ui/components/commons.dart'; -class DefaultTextInputsPreview extends StatelessWidget { - const DefaultTextInputsPreview({Key? key}) : super(key: key); +class InputTextPreview extends StatelessWidget { + const InputTextPreview({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -17,13 +17,13 @@ class DefaultTextInputsPreview extends StatelessWidget { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('Defaults', style: heading), + Text('Input Text', style: heading), verticalMargin16, - const TextInput(label: 'Default'), + const InputText(label: 'Default'), verticalMargin8, - const TextInput(label: 'Disabled', isEnabled: false), + const InputText(label: 'Disabled', isEnabled: false), verticalMargin8, - TextInput(label: 'Invalid', validator: (_) => 'Message'), + InputText(label: 'Invalid', validator: (_) => 'Message'), verticalMargin8, ElevatedButton( onPressed: () => formKey.currentState?.validate(), @@ -35,8 +35,8 @@ class DefaultTextInputsPreview extends StatelessWidget { } } -class DefaultTextInputsCode extends StatelessWidget { - const DefaultTextInputsCode({Key? key}) : super(key: key); +class InputTextCode extends StatelessWidget { + const InputTextCode({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -46,17 +46,17 @@ class DefaultTextInputsCode extends StatelessWidget { children: [ Text('Simple', style: TextStyles.regular2), verticalMargin4, - const CodePreview(code: ["const TextInput(label: 'Simple'),"]), + const CodePreview(code: ["const InputText(label: 'Simple'),"]), verticalMargin8, Text('Disabled', style: TextStyles.regular2), verticalMargin4, - const CodePreview(code: ["const TextInput(label: 'Disabled', isEnabled: false),"]), + const CodePreview(code: ["const InputText(label: 'Disabled', isEnabled: false),"]), verticalMargin8, Text('Invalid', style: TextStyles.regular2), verticalMargin4, const CodePreview( code: [ - "TextInput(", + "InputText(", " label: 'Invalid',", " validator: (value) {", " if (value!.isEmpty) {", diff --git a/lib/views/pages/ui/components/inputs/icons.dart b/lib/views/pages/ui/components/inputs/icons.dart index e52d7bd5..6f399525 100644 --- a/lib/views/pages/ui/components/inputs/icons.dart +++ b/lib/views/pages/ui/components/inputs/icons.dart @@ -19,30 +19,30 @@ class InputIconsPreview extends StatelessWidget { children: [ Text('Input Icons', style: heading), verticalMargin16, - const TextInput( + const InputText( size: InputSize.small, label: 'Small', prefixIcon: FontAwesomeIcons.user, ), verticalMargin8, - const TextInput( + const InputText( size: InputSize.medium, label: 'Medium', prefixIcon: FontAwesomeIcons.user, ), verticalMargin8, - const TextInput( + const InputText( size: InputSize.large, label: 'Large', prefixIcon: FontAwesomeIcons.user, ), verticalMargin8, - const TextInput( + const InputText( label: 'Search', suffixIcon: FontAwesomeIcons.magnifyingGlass, ), verticalMargin8, - TextInput( + InputText( label: 'Search', prefixOnTap: () { Alerts.showSuccessToast!(content: 'Prefix icon onTap'); @@ -73,7 +73,7 @@ class InputIconsCode extends StatelessWidget { verticalMargin4, const CodePreview( code: [ - "const TextInput(", + "const InputText(", " size: InputSize.small,", " label: 'Small',", " prefixIcon: FontAwesomeIcons.user,", @@ -85,7 +85,7 @@ class InputIconsCode extends StatelessWidget { verticalMargin4, const CodePreview( code: [ - "const TextInput(", + "const InputText(", " size: InputSize.medium,", " label: 'Medium',", " prefixIcon: FontAwesomeIcons.user,", @@ -97,7 +97,7 @@ class InputIconsCode extends StatelessWidget { verticalMargin4, const CodePreview( code: [ - "const TextInput(", + "const InputText(", " size: InputSize.large,", " label: 'Large',", " prefixIcon: FontAwesomeIcons.user,", @@ -109,7 +109,7 @@ class InputIconsCode extends StatelessWidget { verticalMargin4, const CodePreview( code: [ - "const TextInput(", + "const InputText(", " label: 'Search',", " suffixIcon: FontAwesomeIcons.magnifyingGlass,", "),", @@ -120,7 +120,7 @@ class InputIconsCode extends StatelessWidget { verticalMargin4, const CodePreview( code: [ - "const TextInput(", + "const InputText(", " label: 'Search',", " prefixOnTap: () {", " Alerts.showSuccessToast!(content: 'Prefix icon onTap');", diff --git a/lib/views/pages/ui/components/inputs/inputs.dart b/lib/views/pages/ui/components/inputs/inputs.dart index 83fefb34..854ba478 100644 --- a/lib/views/pages/ui/components/inputs/inputs.dart +++ b/lib/views/pages/ui/components/inputs/inputs.dart @@ -26,7 +26,7 @@ class _AppInputsState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('Text Inputs', style: TextStyles.semiBold7), + Text('Inputs', style: TextStyles.semiBold7), verticalMargin24, TabOptions( tabs: [ @@ -34,7 +34,7 @@ class _AppInputsState extends State { name: 'Preview', tab: Column( children: const [ - DefaultTextInputsPreview(), + InputTextPreview(), verticalMargin24, InputSizesPreview(), verticalMargin24, @@ -47,8 +47,8 @@ class _AppInputsState extends State { tab: Column( children: const [ ExpansionPanelWrap( - title: 'Defaults', - child: DefaultTextInputsCode(), + title: 'Input Text', + child: InputTextCode(), ), verticalMargin8, ExpansionPanelWrap( diff --git a/lib/views/pages/ui/components/inputs/sizes.dart b/lib/views/pages/ui/components/inputs/sizes.dart index 45a5c688..9242d5f2 100644 --- a/lib/views/pages/ui/components/inputs/sizes.dart +++ b/lib/views/pages/ui/components/inputs/sizes.dart @@ -16,11 +16,11 @@ class InputSizesPreview extends StatelessWidget { children: [ Text('Input Sizes', style: heading), verticalMargin16, - const TextInput(size: InputSize.small, label: 'Small'), + const InputText(size: InputSize.small, label: 'Small'), verticalMargin8, - const TextInput(size: InputSize.medium, label: 'Medium'), + const InputText(size: InputSize.medium, label: 'Medium'), verticalMargin8, - const TextInput(size: InputSize.large, label: 'Large'), + const InputText(size: InputSize.large, label: 'Large'), ], ); } @@ -37,15 +37,15 @@ class InputSizesCode extends StatelessWidget { children: [ Text('Small', style: TextStyles.regular2), verticalMargin4, - const CodePreview(code: ["const TextInput(size: InputSize.small, label: 'Small'),"]), + const CodePreview(code: ["const InputText(size: InputSize.small, label: 'Small'),"]), verticalMargin8, Text('Medium', style: TextStyles.regular2), verticalMargin4, - const CodePreview(code: ["const TextInput(size: InputSize.medium, label: 'Medium'),"]), + const CodePreview(code: ["const InputText(size: InputSize.medium, label: 'Medium'),"]), verticalMargin8, Text('Large', style: TextStyles.regular2), verticalMargin4, - const CodePreview(code: ["const TextInput(size: InputSize.large, label: 'Large'),"]), + const CodePreview(code: ["const InputText(size: InputSize.large, label: 'Large'),"]), verticalMargin8, ], );