From 871196c54022de0d997fe26cbc21f6d14b61cbe5 Mon Sep 17 00:00:00 2001 From: singlapriyanka315 Date: Wed, 24 Jul 2024 13:23:57 +0530 Subject: [PATCH 1/2] Working on Alert box --- example/lib/home.dart | 6 +- example/lib/routes/router.dart | 6 ++ .../components/widgets/alert_box_example.dart | 85 ++++++++++++++++++ .../storybook/widgets/alert_story.dart | 35 ++++++++ .../lib/widgets/storybook/widgets/public.dart | 2 + lib/gluestack_ui.dart | 1 + lib/src/provider/gluestack_provider.dart | 21 +++++ lib/src/theme/config/alert_box/alert_box.dart | 59 +++++++++++++ .../config/alert_box/alert_box_icon.dart | 59 +++++++++++++ .../config/alert_box/alert_box_text.dart | 88 +++++++++++++++++++ lib/src/theme/config/enums.dart | 15 +++- lib/src/widgets/gs_alert/gs_alert.dart | 82 +++++++++++++++++ lib/src/widgets/gs_alert/gs_alert_icon.dart | 75 ++++++++++++++++ .../widgets/gs_alert/gs_alert_icon_style.dart | 19 ++++ .../widgets/gs_alert/gs_alert_provider.dart | 28 ++++++ lib/src/widgets/gs_alert/gs_alert_style.dart | 10 +++ lib/src/widgets/gs_alert/gs_alert_text.dart | 43 +++++++++ .../widgets/gs_alert/gs_alert_text_style.dart | 9 ++ lib/src/widgets/gs_alert/public.dart | 3 + lib/src/widgets/gs_alert_dialog/public.dart | 2 +- 20 files changed, 645 insertions(+), 3 deletions(-) create mode 100644 example/lib/widgets/components/widgets/alert_box_example.dart create mode 100644 example/lib/widgets/storybook/widgets/alert_story.dart create mode 100644 lib/src/theme/config/alert_box/alert_box.dart create mode 100644 lib/src/theme/config/alert_box/alert_box_icon.dart create mode 100644 lib/src/theme/config/alert_box/alert_box_text.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_icon.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_icon_style.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_provider.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_style.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_text.dart create mode 100644 lib/src/widgets/gs_alert/gs_alert_text_style.dart create mode 100644 lib/src/widgets/gs_alert/public.dart diff --git a/example/lib/home.dart b/example/lib/home.dart index 6e555557..d4d7c93b 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -187,10 +187,14 @@ class _HomePageState extends State { title: "GS Navigation Rail", routePath: "/navigation-rail-preview", ), - const NavButton( + const NavButton( title: "GS Slider", routePath: "/slider-example", ), + const NavButton( + title: "GS Alert Box", + routePath: "/alert-box-example", + ), // // ===== Internal Testing Widgets ===== // const NavButton( diff --git a/example/lib/routes/router.dart b/example/lib/routes/router.dart index b8608de1..9e336b05 100644 --- a/example/lib/routes/router.dart +++ b/example/lib/routes/router.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:gluestack_ui_example/home.dart'; import 'package:gluestack_ui_example/widgets/components/widgets/accordian_example.dart'; +import 'package:gluestack_ui_example/widgets/components/widgets/alert_box_example.dart'; import 'package:gluestack_ui_example/widgets/components/widgets/bottom_sheet_example.dart'; import 'package:gluestack_ui_example/widgets/components/widgets/navigation_rail_example.dart'; import 'package:gluestack_ui_example/widgets/components/widgets/slider_example.dart'; @@ -199,6 +200,11 @@ final GoRouter router = GoRouter( builder: (context, state) => const SliderExample(), ), + GoRoute( + path: "alert-box-example", + builder: (context, state) => const AlertBoxExample(), + ), + // Generate individual Storybook screens for every widget. This is referenced in docs website iframe. ...kStories.map( (item) => GoRoute( diff --git a/example/lib/widgets/components/widgets/alert_box_example.dart b/example/lib/widgets/components/widgets/alert_box_example.dart new file mode 100644 index 00000000..bea62d1f --- /dev/null +++ b/example/lib/widgets/components/widgets/alert_box_example.dart @@ -0,0 +1,85 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:gluestack_ui_example/widgets/components/layout/base_layout.dart'; +import 'package:gluestack_ui_example/widgets/components/layout/custom_gs_layout.dart'; +import 'package:gluestack_ui_example/widgets/components/layout/drop_down.dart'; + +class AlertBoxExample extends StatefulWidget { + const AlertBoxExample({super.key}); + + @override + State createState() => _AlertBoxExampleState(); +} + +class _AlertBoxExampleState extends State { + final List dropdownActionOptions = [ + GSAlertBoxActions.success, + GSAlertBoxActions.info, + GSAlertBoxActions.error, + GSAlertBoxActions.warning, + GSAlertBoxActions.muted, + ]; + GSAlertBoxActions selectedActionOption = GSAlertBoxActions.muted; + + final List dropdownVariantOptions = [ + GSAlertBoxVariants.solid, + GSAlertBoxVariants.outline, + ]; + GSAlertBoxVariants selectedVariantOption = GSAlertBoxVariants.solid; + void updateVariantSelectedOption(dynamic newOption) { + setState(() { + selectedVariantOption = newOption; + }); + } + + void updateActionSelectedOption(dynamic newOption) { + setState(() { + selectedActionOption = newOption; + }); + } + + @override + Widget build(BuildContext context) { + var code = ''' + +'''; + return CustomGSLayout( + title: "AlertBox", + style: GSStyle( + dark: GSStyle(bg: $GSColors.black), + ), + body: BaseLayout( + code: code, + component: Center( + child: GSAlert( + description: const GSAlertText('Description of alert!'), + icon: const GSAlertBoxIcon( + iconData: Icons.info_outline, + ), + variant: selectedVariantOption, + action: selectedActionOption, + ), + ), + controls: Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + CustomDropDown( + title: "action", + dropdownOptions: dropdownActionOptions, + selectedOption: selectedActionOption, + onChanged: updateActionSelectedOption, + ), + const SizedBox(height: 20), + CustomDropDown( + title: "variant", + dropdownOptions: dropdownVariantOptions, + selectedOption: selectedVariantOption, + onChanged: updateVariantSelectedOption, + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/widgets/storybook/widgets/alert_story.dart b/example/lib/widgets/storybook/widgets/alert_story.dart new file mode 100644 index 00000000..9efda084 --- /dev/null +++ b/example/lib/widgets/storybook/widgets/alert_story.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'base_story_widget.dart'; +import 'package:storybook_flutter/storybook_flutter.dart'; + +final List> actionOptions = + generateEnumOptions(GSAlertBoxActions.values); +final List> variantOptions = + generateEnumOptions(GSAlertBoxVariants.values); + +final class AlertStory extends StoryWidget { + @override + Story createStoryWidget() { + return Story( + name: storyName, + builder: (context) => GSAlert( + icon: const GSAlertBoxIcon( + iconData: Icons.info_outline, + ), + action: GSAlertBoxActions.values[context.knobs + .options(label: 'Action', initial: 0, options: actionOptions)], + variant: GSAlertBoxVariants.values[context.knobs + .options(label: 'Variant', initial: 0, options: variantOptions)], + style: GSStyle(), + description: const GSAlertText("Description of Alert!"), + ), + ); + } + + @override + String get routePath => "alert-preview"; + + @override + String get storyName => "Alert"; +} diff --git a/example/lib/widgets/storybook/widgets/public.dart b/example/lib/widgets/storybook/widgets/public.dart index db3f37b5..92e44b2b 100644 --- a/example/lib/widgets/storybook/widgets/public.dart +++ b/example/lib/widgets/storybook/widgets/public.dart @@ -1,3 +1,4 @@ +import 'package:gluestack_ui_example/widgets/storybook/widgets/alert_story.dart'; import 'package:gluestack_ui_example/widgets/storybook/widgets/header_story.dart'; import 'package:gluestack_ui_example/widgets/storybook/widgets/slider_story.dart'; import 'package:gluestack_ui_example/widgets/storybook/widgets/tab_story.dart'; @@ -37,6 +38,7 @@ import 'accordion_story.dart'; final List kStories = [ AlertDialogStory(), + AlertStory(), AccordionStory(), AvatarStory(), BadgeStory(), diff --git a/lib/gluestack_ui.dart b/lib/gluestack_ui.dart index edb7233b..2f21638b 100644 --- a/lib/gluestack_ui.dart +++ b/lib/gluestack_ui.dart @@ -47,3 +47,4 @@ export 'src/widgets/gs_tabs/public.dart'; export 'src/widgets/gs_layout/public.dart'; export 'src/widgets/gs_header/public.dart'; export 'src/widgets/gs_slider/public.dart'; +export 'src/widgets/gs_alert/public.dart'; diff --git a/lib/src/provider/gluestack_provider.dart b/lib/src/provider/gluestack_provider.dart index 772523d6..0b1fc929 100644 --- a/lib/src/provider/gluestack_provider.dart +++ b/lib/src/provider/gluestack_provider.dart @@ -1,3 +1,7 @@ +import 'package:gluestack_ui/src/theme/config/alert_box/alert_box.dart'; +import 'package:gluestack_ui/src/theme/config/alert_box/alert_box_icon.dart'; +import 'package:gluestack_ui/src/theme/config/alert_box/alert_box_text.dart'; + import 'provider.dart'; final getIt = GetIt.instance; @@ -146,6 +150,11 @@ class GluestackCustomConfig { Map? sliderThumb; Map? sliderFilledTrack; + // AlertBox + Map? alert; + Map? alertIcon; + Map? alertText; + //GS Layout Map? layout; @@ -156,6 +165,12 @@ class GluestackCustomConfig { this.sliderTrack, this.sliderThumb, this.sliderFilledTrack, + + // alertBox + + this.alert, + this.alertIcon, + this.alertText, //tabs this.tabs, this.tabsTab, @@ -316,6 +331,12 @@ class GluestackCustomConfig { sliderThumb = mergeConfigs(sliderThumbData, sliderThumb); sliderFilledTrack = mergeConfigs(sliderFilledTrackData, sliderFilledTrack); + // alert box + + alert = mergeConfigs(alertBoxData, alert); + alertText = mergeConfigs(alertBoxTextData, alertText); + alertIcon = mergeConfigs(alertBoxIconData, alertIcon); + //tabs tabs = mergeConfigs(tabsData, tabs); tabsTab = mergeConfigs(tabsTabData, tabsTab); diff --git a/lib/src/theme/config/alert_box/alert_box.dart b/lib/src/theme/config/alert_box/alert_box.dart new file mode 100644 index 00000000..3365e50e --- /dev/null +++ b/lib/src/theme/config/alert_box/alert_box.dart @@ -0,0 +1,59 @@ +const Map alertBoxData = { + 'alignItems': 'center', + 'p': '\$3', + 'flexDirection': 'row', + 'borderRadius': '\$sm', + 'variants': { + 'action': { + 'error': { + 'bg': '\$backgroundError', + 'borderColor': '\$error300', + '_icon': { + 'color': '\$error500', + }, + }, + 'warning': { + 'bg': '\$backgroundWarning', + 'borderColor': '\$warning300', + '_icon': { + 'color': '\$warning500', + }, + }, + 'success': { + 'bg': '\$backgroundSuccess', + 'borderColor': '\$success300', + '_icon': { + 'color': '\$success500', + }, + }, + 'info': { + 'bg': '\$backgroundInfo', + 'borderColor': '\$info300', + '_icon': { + 'color': '\$info500', + }, + }, + 'muted': { + 'bg': '\$backgroundMuted', + 'borderColor': '\$secondary300', + '_icon': { + 'color': '\$secondary500', + }, + }, + }, + 'variant': { + 'solid': {}, + 'outline': { + 'borderWidth': '\$1', + 'bg': '\$white', + }, + 'accent': { + 'borderLeftWidth': '\$4', + }, + }, + }, + 'defaultProps': { + 'variant': 'solid', + 'action': 'info', + }, +}; \ No newline at end of file diff --git a/lib/src/theme/config/alert_box/alert_box_icon.dart b/lib/src/theme/config/alert_box/alert_box_icon.dart new file mode 100644 index 00000000..c860c1a4 --- /dev/null +++ b/lib/src/theme/config/alert_box/alert_box_icon.dart @@ -0,0 +1,59 @@ +const Map alertBoxIconData = { + "variants": { + "size": { + "2xs": { + "h": "\$3", + "w": "\$3", + "props": { + // @ts-ignore + "size": 12, + }, + }, + "xs": { + "h": "\$3.5", + "w": "\$3.5", + "props": { + // @ts-ignore + "size": 14, + }, + }, + "sm": { + "h": "\$4", + "w": "\$4", + "props": { + // @ts-ignore + "size": 16, + }, + }, + "md": { + "h": "\$4.5", + "w": "\$4.5", + "props": { + // @ts-ignore + "size": 18, + }, + }, + "lg": { + "h": "\$5", + "w": "\$5", + "props": { + // @ts-ignore + "size": 20, + }, + }, + "xl": { + "h": "\$6", + "w": "\$6", + "props": { + // @ts-ignore + "size": 24, + }, + }, + }, + }, + "props": { + "size": "md", + // @ts-ignore + "fill": "none", + }, +}; diff --git a/lib/src/theme/config/alert_box/alert_box_text.dart b/lib/src/theme/config/alert_box/alert_box_text.dart new file mode 100644 index 00000000..ff6b4b8e --- /dev/null +++ b/lib/src/theme/config/alert_box/alert_box_text.dart @@ -0,0 +1,88 @@ +const Map alertBoxTextData = { + "color": "\$text700", + "flex": "1", + "fontWeight": "\$normal", + "fontFamily": "\$body", + "fontStyle": "normal", + "letterSpacing": "\$md", + "variants": { + "isTruncated": { + "true": { + "props": { + // @ts-ignore + "numberOfLines": 1, + "ellipsizeMode": "tail", + }, + }, + }, + "bold": { + "true": { + "fontWeight": "\$bold", + }, + }, + "underline": { + "true": { + "textDecorationLine": "underline", + }, + }, + "strikeThrough": { + "true": { + "textDecorationLine": "line-through", + }, + }, + "size": { + "2xs": { + "fontSize": "\$2xs", + }, + "xs": { + "fontSize": "\$xs", + }, + "sm": { + "fontSize": "\$sm", + }, + "md": { + "fontSize": "\$md", + }, + "lg": { + "fontSize": "\$lg", + }, + "xl": { + "fontSize": "\$xl", + }, + "2xl": { + "fontSize": "\$2xl", + }, + "3xl": { + "fontSize": "\$3xl", + }, + "4xl": { + "fontSize": "\$4xl", + }, + "5xl": { + "fontSize": "\$5xl", + }, + "6xl": { + "fontSize": "\$6xl", + }, + }, + "sub": { + "true": { + "fontSize": "\$xs", + }, + }, + "italic": { + "true": { + "fontStyle": "italic", + }, + }, + "highlight": { + "true": { + "bg": "\$yellow500", + }, + }, + }, + "defaultProps": { + "size": 'md', + }, +}; + \ No newline at end of file diff --git a/lib/src/theme/config/enums.dart b/lib/src/theme/config/enums.dart index 7a7cdb7d..c4f8cd21 100644 --- a/lib/src/theme/config/enums.dart +++ b/lib/src/theme/config/enums.dart @@ -88,6 +88,11 @@ enum GSToastVariants { accent, } +enum GSAlertBoxVariants { + solid, + outline, +} + enum GSToastActions { error, warning, @@ -96,6 +101,14 @@ enum GSToastActions { attention, } +enum GSAlertBoxActions { + error, + warning, + success, + info, + muted, +} + enum GSNavigationRailSizes { $sm, $md, @@ -299,4 +312,4 @@ enum GSSliderSizes { $sm, $md, $lg, -} \ No newline at end of file +} diff --git a/lib/src/widgets/gs_alert/gs_alert.dart b/lib/src/widgets/gs_alert/gs_alert.dart new file mode 100644 index 00000000..a2f683d6 --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert.dart @@ -0,0 +1,82 @@ +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:gluestack_ui/src/style/style_resolver.dart'; +import 'package:gluestack_ui/src/widgets/gs_alert/gs_alert_provider.dart'; +import 'package:gluestack_ui/src/widgets/gs_alert/gs_alert_style.dart'; + +class GSAlert extends StatefulWidget { + final GSStyle? style; + final GSAlertText description; + final GSAlertBoxVariants? variant; + final GSAlertBoxActions? action; + final GSAlertBoxIcon? icon; + const GSAlert( + {super.key, + this.style, + required this.description, + this.variant, + this.action, + this.icon}); + + @override + State createState() => _GSAlertState(); +} + +class _GSAlertState extends State { + @override + Widget build(BuildContext context) { + return Builder(builder: (context) { + final alertBoxAction = + widget.action?.toGSAction ?? alertStyle.props?.action; + final alertBoxVariant = + widget.variant?.toGSVariant ?? alertStyle.props?.variant; + + GSConfigStyle styler = resolveStyles( + context: context, + styles: [ + alertStyle, + alertStyle.actionMap(alertBoxAction), + alertStyle.variantMap(alertBoxVariant), + ], + inlineStyle: widget.style, + ); + + return GSAncestor( + decedentStyles: styler.descendantStyles, + child: GSAlertBoxProvider( + fontSize: styler.textStyle?.fontSize, + iconSize: styler.iconSize, + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Container( + padding: styler.padding, + decoration: BoxDecoration( + color: styler.bg?.getColor(context), + border: Border.all( + style: alertBoxVariant == GSVariants.outline + ? BorderStyle.solid + : BorderStyle.none, + color: styler.borderColor?.getColor(context) ?? + styler.outlineColor?.getColor(context) ?? + const Color(0x00000000) //transparent + ), + borderRadius: BorderRadius.circular(styler.borderRadius!), + ), + child: Row( + children: [ + if (widget.icon != null) ...[ + const SizedBox(width: 2), + widget.icon as Widget, + ], + const SizedBox(width: 8.0), + widget.description, + ], + ), + ), + ], + ), + ), + ); + }); + } +} diff --git a/lib/src/widgets/gs_alert/gs_alert_icon.dart b/lib/src/widgets/gs_alert/gs_alert_icon.dart new file mode 100644 index 00000000..e906a9ce --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_icon.dart @@ -0,0 +1,75 @@ +import 'package:gluestack_ui/src/style/gs_config_style_internal.dart'; +import 'package:gluestack_ui/src/style/style_resolver.dart'; +import 'package:gluestack_ui/src/widgets/gs_alert/gs_alert_icon_style.dart'; +import 'package:gluestack_ui/src/widgets/gs_alert/gs_alert_provider.dart'; + +class GSAlertBoxIcon extends StatelessWidget { + // The icon data to display in the widget. + final IconData iconData; + /// The size of the icon, accepts [GSSizes]. + final GSSizes? iconSize; + // Custom style for the icon. + final GSStyle? style; + // Fill color for the icon. + final double? fill; + // Grade of the icon. + final double? grade; + // Optical size of the icon. + final double? opticalSize; + // Weight of the icon. + final double? weight; + // Semantic label for accessibility. + final String? semanticLabel; + // List of shadows for the icon. + final List? shadows; + // Text direction for the icon. + final TextDirection? textDirection; + + /// This widget represents an icon which is optional with GSBadge widget. It's used to display icons along with text in GSBadge widget. Following is the constructor for the same: + const GSAlertBoxIcon( + {super.key, + required this.iconData, + this.iconSize, + this.style, + this.fill, + this.grade, + this.opticalSize, + this.weight, + this.semanticLabel, + this.shadows, + this.textDirection}); + + @override + Widget build(BuildContext context) { + // Access ancestor provider to retrieve ancestor icon styles. + final ancestorStyles = GSAncestorProvider.of(context) + ?.decedentStyles?[gsAlertIconConfig.ancestorStyle.first]; + final size = GSAlertBoxIconStyle + .size[iconSize ?? GSAlertBoxProvider.of(context)?.iconSize]; + // Resolve styles for the icon using the context and provided styles. + // Resolve the final GSStyle. + final styler = resolveStyles( + context: context, + styles: [ + alertIconStyle, + alertIconStyle.sizeMap(ancestorStyles?.props?.size), + ancestorStyles, + ], + inlineStyle: style, + ); + + // Create an Icon widget with the given icon data, color, font size, etc. + return Icon( + iconData, + color: styler.color?.getColor(context), + size: size, + fill: fill, + grade: grade, + opticalSize: opticalSize, + weight: weight, + semanticLabel: semanticLabel, + textDirection: textDirection, + shadows: shadows, + ); + } +} diff --git a/lib/src/widgets/gs_alert/gs_alert_icon_style.dart b/lib/src/widgets/gs_alert/gs_alert_icon_style.dart new file mode 100644 index 00000000..578c8fa4 --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_icon_style.dart @@ -0,0 +1,19 @@ +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:gluestack_ui/src/style/gs_style_config.dart'; + +final GSConfigStyle alertIconStyle = + GSConfigStyle.fromMap(data: getIt().alertIcon); + +const GSStyleConfig gsAlertIconConfig = + GSStyleConfig(componentName: 'AlertIcon', ancestorStyle: ['_icon']); + +class GSAlertBoxIconStyle { + static Map size = { + GSSizes.$2xs: $GSFontSize.$2xs, + GSSizes.$xs: $GSFontSize.$xs, + GSSizes.$sm: $GSFontSize.$sm, + GSSizes.$md: $GSFontSize.$md, + GSSizes.$lg: $GSFontSize.$lg, + GSSizes.$xl: $GSFontSize.$xl + }; +} diff --git a/lib/src/widgets/gs_alert/gs_alert_provider.dart b/lib/src/widgets/gs_alert/gs_alert_provider.dart new file mode 100644 index 00000000..2cbfd1fa --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_provider.dart @@ -0,0 +1,28 @@ +import 'package:gluestack_ui/gluestack_ui.dart'; + +/// GSAlertBoxProvider is an InheritedWidget used to provide badge-related information to its descendants. +class GSAlertBoxProvider extends InheritedWidget { + // Font size for the badge text. + final double? fontSize; + // Icon size for the badge icon. + final GSSizes? iconSize; + + /// Constructor for GSAlertBoxProvider: + const GSAlertBoxProvider({ + super.key, + required this.fontSize, + required this.iconSize, + required super.child, + }); + + /// Overrides the method to determine whether an update notification is needed. + @override + bool updateShouldNotify(GSAlertBoxProvider oldWidget) { + return fontSize != oldWidget.fontSize || iconSize != oldWidget.iconSize; + } + + /// Static method to obtain the GSAlertBoxProvider instance from the given context. + static GSAlertBoxProvider? of(BuildContext context) { + return context.dependOnInheritedWidgetOfExactType(); + } +} diff --git a/lib/src/widgets/gs_alert/gs_alert_style.dart b/lib/src/widgets/gs_alert/gs_alert_style.dart new file mode 100644 index 00000000..43890728 --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_style.dart @@ -0,0 +1,10 @@ +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:gluestack_ui/src/style/gs_style_config.dart'; + +const GSStyleConfig gsAlertConfig = GSStyleConfig( + componentName: 'Alert', + descendantStyle: ['_icon', '_text'], +); +final GSConfigStyle alertStyle = GSConfigStyle.fromMap( + data: getIt().alert, + descendantStyle: gsAlertConfig.descendantStyle); diff --git a/lib/src/widgets/gs_alert/gs_alert_text.dart b/lib/src/widgets/gs_alert/gs_alert_text.dart new file mode 100644 index 00000000..e8324a3a --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_text.dart @@ -0,0 +1,43 @@ +import 'package:gluestack_ui/src/style/gs_config_style_internal.dart'; +import 'package:gluestack_ui/src/style/style_resolver.dart'; +import 'package:gluestack_ui/src/widgets/gs_alert/gs_alert_text_style.dart'; + +/// GSAlertText is a Flutter widget that displays a text within a GSBadge widget. +class GSAlertText extends StatelessWidget { + // The text to be displayed inside the badge. + final String text; + // Style for the badge text. Can be customized using GSStyle. + final GSStyle? style; + + /// Constructor for GSAlertText widget: + const GSAlertText( + //takes string as input just like inbuilt Text widget from flutter + this.text, { + super.key, + this.style, + }); + + @override + Widget build(BuildContext context) { + // Access the ancestor provider to retrieve ancestor text styles. + final GSConfigStyle? ancestorStyles = GSAncestorProvider.of(context) + ?.decedentStyles?[gsAlertTextConfig.ancestorStyle.first]; + // Resolve the final GSStyle. + final styler = resolveStyles( + context: context, + styles: [ + alertTextStyle, + alertTextStyle.sizeMap(ancestorStyles?.props?.size), + ancestorStyles, + ], + inlineStyle: style, + ); + + // Create a Text widget with the specified text and merged style. + return Text( + text, + style: styler.textStyle + ?.merge(TextStyle(color: styler.color?.getColor(context))), + ); + } +} diff --git a/lib/src/widgets/gs_alert/gs_alert_text_style.dart b/lib/src/widgets/gs_alert/gs_alert_text_style.dart new file mode 100644 index 00000000..1b458da8 --- /dev/null +++ b/lib/src/widgets/gs_alert/gs_alert_text_style.dart @@ -0,0 +1,9 @@ +import 'package:gluestack_ui/gluestack_ui.dart'; +import 'package:gluestack_ui/src/style/gs_style_config.dart'; + +const GSStyleConfig gsAlertTextConfig = GSStyleConfig( + componentName: 'AlertText', + ancestorStyle: ['_text'], +); +final GSConfigStyle alertTextStyle = + GSConfigStyle.fromMap(data: getIt().alertText); diff --git a/lib/src/widgets/gs_alert/public.dart b/lib/src/widgets/gs_alert/public.dart new file mode 100644 index 00000000..623a3cef --- /dev/null +++ b/lib/src/widgets/gs_alert/public.dart @@ -0,0 +1,3 @@ +export 'gs_alert.dart'; +export 'gs_alert_icon.dart'; +export 'gs_alert_text.dart'; \ No newline at end of file diff --git a/lib/src/widgets/gs_alert_dialog/public.dart b/lib/src/widgets/gs_alert_dialog/public.dart index 6523df15..2e1d15de 100644 --- a/lib/src/widgets/gs_alert_dialog/public.dart +++ b/lib/src/widgets/gs_alert_dialog/public.dart @@ -2,4 +2,4 @@ export 'gs_alert_dialog.dart'; export 'gs_alert_dialog_header.dart'; export 'gs_alert_dialog_footer.dart'; export 'gs_alert_dialog_content.dart'; -export 'gs_alert_dialog_body.dart'; +export 'gs_alert_dialog_body.dart'; \ No newline at end of file From e63b7a46674f06692058c5ecbdc5615f9c426f3e Mon Sep 17 00:00:00 2001 From: singlapriyanka315 Date: Fri, 16 Aug 2024 10:39:10 +0530 Subject: [PATCH 2/2] minor fixes --- .../lib/widgets/components/widgets/alert_box_example.dart | 8 ++++++++ lib/src/widgets/gs_app/gs_app.dart | 8 ++++---- lib/src/widgets/gs_form_control/gs_form_control.dart | 6 +++--- lib/src/widgets/gs_radio/gs_radio_icon.dart | 2 -- lib/src/widgets/gs_radio/gs_radio_raw.dart | 1 - lib/src/widgets/gs_radio/public.dart | 1 + 6 files changed, 16 insertions(+), 10 deletions(-) diff --git a/example/lib/widgets/components/widgets/alert_box_example.dart b/example/lib/widgets/components/widgets/alert_box_example.dart index bea62d1f..8c3cad98 100644 --- a/example/lib/widgets/components/widgets/alert_box_example.dart +++ b/example/lib/widgets/components/widgets/alert_box_example.dart @@ -41,6 +41,14 @@ class _AlertBoxExampleState extends State { @override Widget build(BuildContext context) { var code = ''' + GSAlert( + description: const GSAlertText('Description of alert!'), + icon: const GSAlertBoxIcon( + iconData: Icons.info_outline, + ), + variant: $selectedVariantOption, + action: $selectedActionOption, + ), '''; return CustomGSLayout( diff --git a/lib/src/widgets/gs_app/gs_app.dart b/lib/src/widgets/gs_app/gs_app.dart index fab61f54..7c047e05 100644 --- a/lib/src/widgets/gs_app/gs_app.dart +++ b/lib/src/widgets/gs_app/gs_app.dart @@ -284,8 +284,8 @@ class _GSAppState extends State { localeListResolutionCallback: widget.localeListResolutionCallback, supportedLocales: widget.supportedLocales, showPerformanceOverlay: widget.showPerformanceOverlay, - checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages, - checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers, + // checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages, + // checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers, showSemanticsDebugger: widget.showSemanticsDebugger, debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner, shortcuts: widget.shortcuts, @@ -310,8 +310,8 @@ class _GSAppState extends State { localeResolutionCallback: widget.localeResolutionCallback, supportedLocales: widget.supportedLocales, showPerformanceOverlay: widget.showPerformanceOverlay, - checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages, - checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers, + // checkerboardRasterCacheImages: widget.checkerboardRasterCacheImages, + // checkerboardOffscreenLayers: widget.checkerboardOffscreenLayers, showSemanticsDebugger: widget.showSemanticsDebugger, debugShowCheckedModeBanner: widget.debugShowCheckedModeBanner, shortcuts: widget.shortcuts, diff --git a/lib/src/widgets/gs_form_control/gs_form_control.dart b/lib/src/widgets/gs_form_control/gs_form_control.dart index bd4de956..fe5c19da 100644 --- a/lib/src/widgets/gs_form_control/gs_form_control.dart +++ b/lib/src/widgets/gs_form_control/gs_form_control.dart @@ -16,7 +16,7 @@ Form Control Compatible Components: class GSFormControl extends StatefulWidget { final GlobalKey formKey; final Widget child; - final PopInvokedCallback? onPopInvoked; + // final PopInvokedCallback? onPopInvoked; final VoidCallback? onChanged; final AutovalidateMode autovalidateMode; final bool? canPop; @@ -32,7 +32,7 @@ class GSFormControl extends StatefulWidget { const GSFormControl({ super.key, required this.child, - this.onPopInvoked, + // this.onPopInvoked, this.onChanged, this.autovalidateMode = AutovalidateMode.disabled, this.canPop, @@ -84,7 +84,7 @@ class _GSFormControlState extends State { key: widget.formKey, canPop: widget.canPop, onChanged: widget.onChanged, - onPopInvoked: widget.onPopInvoked, + // onPopInvoked: widget.onPopInvoked, autovalidateMode: widget.autovalidateMode, child: widget.child, ), diff --git a/lib/src/widgets/gs_radio/gs_radio_icon.dart b/lib/src/widgets/gs_radio/gs_radio_icon.dart index 9689cb76..6e8c1e58 100644 --- a/lib/src/widgets/gs_radio/gs_radio_icon.dart +++ b/lib/src/widgets/gs_radio/gs_radio_icon.dart @@ -2,8 +2,6 @@ import 'package:gluestack_ui/src/style/gs_config_style_internal.dart'; import 'package:gluestack_ui/src/style/style_resolver.dart'; import 'package:gluestack_ui/src/widgets/gs_radio/gs_radio_icon_style.dart'; -import 'package:gluestack_ui/src/widgets/gs_radio/gs_radio_raw.dart'; - class GSRadioIcon extends StatelessWidget { final Color? activeColor; final bool autofocus; diff --git a/lib/src/widgets/gs_radio/gs_radio_raw.dart b/lib/src/widgets/gs_radio/gs_radio_raw.dart index 4e29b440..00a078b5 100644 --- a/lib/src/widgets/gs_radio/gs_radio_raw.dart +++ b/lib/src/widgets/gs_radio/gs_radio_raw.dart @@ -1,7 +1,6 @@ import 'package:flutter/foundation.dart'; import 'package:flutter/cupertino.dart'; import 'package:gluestack_ui/gluestack_ui.dart'; -import 'gs_toggleable.dart'; const Size _size = Size(18.0, 18.0); const double _kOuterRadius = 8.0; diff --git a/lib/src/widgets/gs_radio/public.dart b/lib/src/widgets/gs_radio/public.dart index cec54ad8..35d80cfe 100644 --- a/lib/src/widgets/gs_radio/public.dart +++ b/lib/src/widgets/gs_radio/public.dart @@ -2,3 +2,4 @@ export 'gs_radio_icon.dart'; export 'gs_radio_provider.dart'; export 'gs_radio_text.dart'; export 'gs_radio.dart'; +export 'gs_radio_raw.dart';