diff --git a/docs/docs.json b/docs/docs.json index 76940916..00050df7 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -68,6 +68,7 @@ "widgets/row", "widgets/safe_area", "widgets/sized_box", + "widgets/sliver_padding", "widgets/sliver_to_box_adapter", "widgets/spacer", "widgets/stack", diff --git a/docs/widgets/sliver_padding.mdx b/docs/widgets/sliver_padding.mdx new file mode 100644 index 00000000..5f1bfb33 --- /dev/null +++ b/docs/widgets/sliver_padding.mdx @@ -0,0 +1,43 @@ +--- +title: "SliverPadding" +description: "Documentation for SliverPadding" +--- + +The Stac SliverPadding allows you to inset a sliver widget by a given padding using JSON. It is typically used inside a `CustomScrollView`. +To know more about the sliver padding widget in Flutter, refer to +the [official documentation](https://api.flutter.dev/flutter/widgets/SliverPadding-class.html). + +## Properties + +| Property | Type | Description | +|----------|------------------------|--------------------------------------------------| +| padding | `Map` | The amount of space by which to inset the child. | +| sliver | `Map` | The sliver widget inside the padding. | + +## Example JSON + +```json +{ + "type": "sliverPadding", + "padding": 16.0, + "sliver": { + "type": "sliverToBoxAdapter", + "child": { + "type": "container", + "height": 150, + "color": "#4CAF50", + "child": { + "type": "center", + "child": { + "type": "text", + "data": "I am a Box inside a SliverPadding!", + "style": { + "color": "#FFFFFF", + "fontWeight": "bold" + } + } + } + } + } +} +``` \ No newline at end of file diff --git a/examples/stac_gallery/assets/json/home_screen.json b/examples/stac_gallery/assets/json/home_screen.json index db4b73ef..e77c04c9 100644 --- a/examples/stac_gallery/assets/json/home_screen.json +++ b/examples/stac_gallery/assets/json/home_screen.json @@ -1236,6 +1236,30 @@ } } }, + { + "type": "listTile", + "leading": { + "type": "icon", + "iconType": "cupertino", + "icon": "app_fill" + }, + "title": { + "type": "text", + "data": "Stac Sliver Padding" + }, + "subtitle": { + "type": "text", + "data": "A SliverPadding widget" + }, + "style": "list", + "onTap": { + "actionType": "navigate", + "widgetJson": { + "type": "exampleScreen", + "assetPath": "assets/json/sliver_padding_example.json" + } + } + }, { "type": "listTile", "leading": { diff --git a/examples/stac_gallery/assets/json/sliver_padding_example.json b/examples/stac_gallery/assets/json/sliver_padding_example.json new file mode 100644 index 00000000..6e0f0612 --- /dev/null +++ b/examples/stac_gallery/assets/json/sliver_padding_example.json @@ -0,0 +1,31 @@ +{ + "type": "scaffold", + "body": { + "type": "customScrollView", + "slivers": [ + { + "type": "sliverPadding", + "padding": 16.0, + "sliver": { + "type": "sliverToBoxAdapter", + "child": { + "type": "container", + "height": 150, + "color": "#4CAF50", + "child": { + "type": "center", + "child": { + "type": "text", + "data": "I am a Box inside a SliverPadding!", + "style": { + "color": "#FFFFFF", + "fontWeight": "bold" + } + } + } + } + } + } + ] + } +} \ No newline at end of file diff --git a/packages/stac/lib/src/framework/stac_service.dart b/packages/stac/lib/src/framework/stac_service.dart index b25fb945..9c42d2ad 100644 --- a/packages/stac/lib/src/framework/stac_service.dart +++ b/packages/stac/lib/src/framework/stac_service.dart @@ -114,6 +114,7 @@ class StacService { const StacRadioGroupParser(), const StacSliderParser(), const StacSliverAppBarParser(), + const StacSliverPaddingParser(), const StacSliverToBoxAdapterParser(), const StacOpacityParser(), const StacPlaceholderParser(), diff --git a/packages/stac/lib/src/parsers/widgets/stac_sliver_padding/stac_sliver_padding_parser.dart b/packages/stac/lib/src/parsers/widgets/stac_sliver_padding/stac_sliver_padding_parser.dart new file mode 100644 index 00000000..617ae99d --- /dev/null +++ b/packages/stac/lib/src/parsers/widgets/stac_sliver_padding/stac_sliver_padding_parser.dart @@ -0,0 +1,25 @@ +import 'package:flutter/material.dart'; +import 'package:stac/src/parsers/core/stac_widget_parser.dart'; + +import 'package:stac/src/parsers/foundation/geometry/stac_edge_insets_parser.dart'; +import 'package:stac_core/stac_core.dart'; +import 'package:stac_framework/stac_framework.dart'; + +class StacSliverPaddingParser extends StacParser { + const StacSliverPaddingParser(); + + @override + String get type => WidgetType.sliverPadding.name; + + @override + StacSliverPadding getModel(Map json) => + StacSliverPadding.fromJson(json); + + @override + Widget parse(BuildContext context, StacSliverPadding model) { + return SliverPadding( + padding: model.padding.parse, + sliver: model.sliver.parse(context), + ); + } +} diff --git a/packages/stac/lib/src/parsers/widgets/widgets.dart b/packages/stac/lib/src/parsers/widgets/widgets.dart index 9c993a43..b9091ea0 100644 --- a/packages/stac/lib/src/parsers/widgets/widgets.dart +++ b/packages/stac/lib/src/parsers/widgets/widgets.dart @@ -63,6 +63,7 @@ export 'package:stac/src/parsers/widgets/stac_single_child_scroll_view/stac_sing export 'package:stac/src/parsers/widgets/stac_sized_box/stac_sized_box_parser.dart'; export 'package:stac/src/parsers/widgets/stac_slider/stac_slider_parser.dart'; export 'package:stac/src/parsers/widgets/stac_sliver_app_bar/stac_sliver_app_bar_parser.dart'; +export 'package:stac/src/parsers/widgets/stac_sliver_padding/stac_sliver_padding_parser.dart'; export 'package:stac/src/parsers/widgets/stac_sliver_to_box_adapter/stac_sliver_to_box_adapter_parser.dart'; export 'package:stac/src/parsers/widgets/stac_spacer/stac_spacer_parser.dart'; export 'package:stac/src/parsers/widgets/stac_stack/stac_stack_parser.dart'; diff --git a/packages/stac_core/lib/foundation/specifications/widget_type.dart b/packages/stac_core/lib/foundation/specifications/widget_type.dart index 540ce2e5..4509faf8 100644 --- a/packages/stac_core/lib/foundation/specifications/widget_type.dart +++ b/packages/stac_core/lib/foundation/specifications/widget_type.dart @@ -207,6 +207,9 @@ enum WidgetType { /// Sliver app bar widget sliverAppBar, + /// Sliver padding widget + sliverPadding, + /// Sliver to box adapter widget sliverToBoxAdapter, diff --git a/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.dart b/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.dart new file mode 100644 index 00000000..55cb6cfc --- /dev/null +++ b/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.dart @@ -0,0 +1,73 @@ +import 'package:json_annotation/json_annotation.dart'; +import 'package:stac_core/core/stac_widget.dart'; +import 'package:stac_core/foundation/foundation.dart'; +part 'stac_sliver_padding.g.dart'; + +/// A Stac model representing Flutter's [SliverPadding] widget. +/// +/// Insets its sliver child by the given padding. +/// +/// {@tool snippet} +/// Dart Example: +/// ```dart +/// const StacSliverPadding( +/// padding: StacEdgeInsets.all(16), +/// sliver: StacSliverToBoxAdapter(...), +/// ) +/// ``` +/// {@end-tool} +/// +/// {@tool snippet} +/// JSON Example: +/// ```json +/// { +/// "type": "sliverPadding", +/// "padding": 16.0, +/// "sliver": { +/// "type": "sliverToBoxAdapter", +/// "child": { +/// "type": "container", +/// "height": 150, +/// "color": "#4CAF50", +/// "child": { +/// "type": "center", +/// "child": { +/// "type": "text", +/// "data": "I am a Box inside a SliverPadding!", +/// "style": { +/// "color": "#FFFFFF", +/// "fontWeight": "bold" +/// } +/// } +/// } +/// } +/// } +/// } +/// ``` +/// {@end-tool} +/// +/// See also: +/// * Flutter's [SliverPadding documentation](https://api.flutter.dev/flutter/widgets/SliverPadding-class.html) +@JsonSerializable() +class StacSliverPadding extends StacWidget { + /// Creates a [StacSliverPadding]. + const StacSliverPadding({required this.sliver, required this.padding}); + + /// The amount of space by which to inset the child sliver. + final StacEdgeInsets padding; + + /// The sliver to apply padding to. + final StacWidget sliver; + + /// Widget type identifier. + @override + String get type => WidgetType.sliverPadding.name; + + /// Creates a [StacSliverPadding] from a JSON map. + factory StacSliverPadding.fromJson(Map json) => + _$StacSliverPaddingFromJson(json); + + /// Converts this [StacSliverPadding] instance to JSON. + @override + Map toJson() => _$StacSliverPaddingToJson(this); +} diff --git a/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.g.dart b/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.g.dart new file mode 100644 index 00000000..a0bee456 --- /dev/null +++ b/packages/stac_core/lib/widgets/sliver_padding/stac_sliver_padding.g.dart @@ -0,0 +1,20 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'stac_sliver_padding.dart'; + +// ************************************************************************** +// JsonSerializableGenerator +// ************************************************************************** + +StacSliverPadding _$StacSliverPaddingFromJson(Map json) => + StacSliverPadding( + sliver: StacWidget.fromJson(json['sliver'] as Map), + padding: StacEdgeInsets.fromJson(json['padding']), + ); + +Map _$StacSliverPaddingToJson(StacSliverPadding instance) => + { + 'padding': instance.padding.toJson(), + 'sliver': instance.sliver.toJson(), + 'type': instance.type, + }; diff --git a/packages/stac_core/lib/widgets/widgets.dart b/packages/stac_core/lib/widgets/widgets.dart index 664bb0df..255d915d 100644 --- a/packages/stac_core/lib/widgets/widgets.dart +++ b/packages/stac_core/lib/widgets/widgets.dart @@ -67,6 +67,7 @@ export 'single_child_scroll_view/stac_single_child_scroll_view.dart'; export 'sized_box/stac_sized_box.dart'; export 'slider/stac_slider.dart'; export 'sliver_app_bar/stac_sliver_app_bar.dart'; +export 'sliver_padding/stac_sliver_padding.dart'; export 'sliver_to_box_adapter/stac_sliver_to_box_adapter.dart'; export 'spacer/stac_spacer.dart'; export 'stack/stac_stack.dart';