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/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/vaahextendflutter/widgets/atoms/tab_options.dart b/lib/vaahextendflutter/widgets/atoms/tab_options.dart new file mode 100644 index 00000000..0ab7ddbf --- /dev/null +++ b/lib/vaahextendflutter/widgets/atoms/tab_options.dart @@ -0,0 +1,72 @@ +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 { + bool hasError = false; + + @override + void initState() { + if (widget.tabs.isEmpty) { + hasError = true; + } + super.initState(); + } + + int _selectedIndex = 0; + + @override + Widget build(BuildContext context) { + 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, + ], + ], + ), + 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..287ccd2c 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 InputTextPreview extends StatelessWidget { + const InputTextPreview({Key? key}) : super(key: key); @override Widget build(BuildContext context) { @@ -15,13 +17,13 @@ class DefaultTextInputs 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(), @@ -32,3 +34,44 @@ class DefaultTextInputs extends StatelessWidget { ); } } + +class InputTextCode extends StatelessWidget { + const InputTextCode({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 InputText(label: 'Simple'),"]), + verticalMargin8, + Text('Disabled', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const InputText(label: 'Disabled', isEnabled: false),"]), + verticalMargin8, + Text('Invalid', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "InputText(", + " 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..6f399525 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) { @@ -17,30 +19,30 @@ class InputIcons 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'); @@ -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 InputText(", + " size: InputSize.small,", + " label: 'Small',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Medium', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const InputText(", + " size: InputSize.medium,", + " label: 'Medium',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Large', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const InputText(", + " size: InputSize.large,", + " label: 'Large',", + " prefixIcon: FontAwesomeIcons.user,", + "),", + ], + ), + verticalMargin8, + Text('Suffix icon', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const InputText(", + " label: 'Search',", + " suffixIcon: FontAwesomeIcons.magnifyingGlass,", + "),", + ], + ), + verticalMargin8, + Text('Icon On Tap', style: TextStyles.regular2), + verticalMargin4, + const CodePreview( + code: [ + "const InputText(", + " 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..854ba478 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( @@ -27,47 +26,74 @@ class _AppInputsState extends State { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ - Text('Text Inputs', style: TextStyles.semiBold7), - verticalMargin24, - tabOptions(), - Divider(color: AppTheme.colors['primary']!.shade200), - verticalMargin24, - const DefaultTextInputs(), - verticalMargin24, - const InputSizes(), - verticalMargin24, - const InputIcons(), + Text('Inputs', style: TextStyles.semiBold7), verticalMargin24, + TabOptions( + tabs: [ + TabOption( + name: 'Preview', + tab: Column( + children: const [ + InputTextPreview(), + verticalMargin24, + InputSizesPreview(), + verticalMargin24, + InputIconsPreview(), + ], + ), + ), + TabOption( + name: 'Code', + tab: Column( + children: const [ + ExpansionPanelWrap( + title: 'Input Text', + child: InputTextCode(), + ), + 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..9242d5f2 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) { @@ -14,11 +16,37 @@ class InputSizes 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 InputText(size: InputSize.large, label: 'Large'), + ], + ); + } +} + +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 InputText(size: InputSize.small, label: 'Small'),"]), + verticalMargin8, + Text('Medium', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const InputText(size: InputSize.medium, label: 'Medium'),"]), + verticalMargin8, + Text('Large', style: TextStyles.regular2), + verticalMargin4, + const CodePreview(code: ["const InputText(size: InputSize.large, label: 'Large'),"]), verticalMargin8, - const TextInput(size: InputSize.large, label: 'Large'), ], ); } 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']), - ), - ); - } }