feat: [MDS-552] Create BottomSheet widget (#198)

example/lib/src/storybook/stories/bottom_sheet.dart

@@ -0,0 +1,107 @@
+import 'package:example/src/storybook/common/color_options.dart';
+import 'package:flutter/material.dart';
+import 'package:moon_design/moon_design.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+class BottomSheetStory extends Story {
+  BottomSheetStory()
+      : super(
+          name: "BottomSheet",
+          builder: (context) {
+            final backgroundColorsKnob = context.knobs.nullable.options(
+              label: "backgroundColor",
+              description: "MoonColors variants for MoonModal background.",
+              enabled: false,
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final backgroundColor = colorTable(context)[backgroundColorsKnob ?? 40];
+
+            final barrierColorsKnob = context.knobs.nullable.options(
+              label: "barrierColor",
+              description: "MoonColors variants for MoonModal barrier.",
+              enabled: false,
+              initial: 0, // piccolo
+              options: colorOptions,
+            );
+
+            final barrierColor = colorTable(context)[barrierColorsKnob ?? 40];
+
+            final borderRadiusKnob = context.knobs.nullable.sliderInt(
+              label: "borderRadius",
+              description: "Border radius for MoonModal.",
+              enabled: false,
+              initial: 8,
+              max: 32,
+            );
+
+            Future<dynamic> bottomSheetBuilder(BuildContext context) {
+              return showMoonModalBottomSheet(
+                backgroundColor: backgroundColor,
+                barrierColor: barrierColor,
+                borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
+                context: context,
+                enableDrag: true,
+                isDismissible: true,
+                builder: (context) => SizedBox(
+                  height: 600,
+                  child: Column(
+                    children: [
+                      Center(
+                        child: Container(
+                          margin: const EdgeInsets.only(
+                            top: 8,
+                            bottom: 16,
+                          ),
+                          height: 4,
+                          width: 41,
+                          decoration: ShapeDecoration(
+                            color: context.moonTheme!.colors.beerus,
+                            shape: const StadiumBorder(),
+                          ),
+                        ),
+                      ),
+                      Expanded(
+                        child: ListView.builder(
+                          padding: EdgeInsets.zero,
+                          itemCount: 100,
+                          itemBuilder: (_, index) => Container(
+                            color: Colors.transparent,
+                            padding: const EdgeInsets.all(16),
+                            child: Row(
+                              children: [
+                                const Text("Item nr:"),
+                                const Spacer(),
+                                Text("$index"),
+                              ],
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              );
+            }
+
+            return Center(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  const SizedBox(height: 64),
+                  Builder(
+                    builder: (context) {
+                      return MoonFilledButton(
+                        label: const Text("Tap me"),
+                        onTap: () => bottomSheetBuilder(context),
+                      );
+                    },
+                  ),
+                  const SizedBox(height: 64),
+                ],
+              ),
+            );
+          },
+        );
+}

example/lib/src/storybook/storybook.dart

@@ -3,6 +3,7 @@ import 'package:example/src/storybook/stories/accordion.dart';
 import 'package:example/src/storybook/stories/alert.dart';
 import 'package:example/src/storybook/stories/authcode.dart';
 import 'package:example/src/storybook/stories/avatar.dart';
+import 'package:example/src/storybook/stories/bottom_sheet.dart';
 import 'package:example/src/storybook/stories/button.dart';
 import 'package:example/src/storybook/stories/checkbox.dart';
 import 'package:example/src/storybook/stories/chip.dart';
@@ -84,6 +85,7 @@ class StorybookPage extends StatelessWidget {
             AlertStory(),
             AuthCodeStory(),
             AvatarStory(),
+            BottomSheetStory(),
             ButtonStory(),
             CheckboxStory(),
             ChipStory(),

lib/moon_design.dart

@@ -6,6 +6,7 @@ export 'package:moon_design/src/theme/alert/alert_theme.dart';
 export 'package:moon_design/src/theme/authcode/authcode_theme.dart';
 export 'package:moon_design/src/theme/avatar/avatar_theme.dart';
 export 'package:moon_design/src/theme/borders.dart';
+export 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart';
 export 'package:moon_design/src/theme/button/button_theme.dart';
 export 'package:moon_design/src/theme/checkbox/checkbox_theme.dart';
 export 'package:moon_design/src/theme/chip/chip_theme.dart';
@@ -48,6 +49,8 @@ export 'package:moon_design/src/widgets/alert/filled_alert.dart';
 export 'package:moon_design/src/widgets/alert/outlined_alert.dart';
 export 'package:moon_design/src/widgets/authcode/authcode.dart';
 export 'package:moon_design/src/widgets/avatar/avatar.dart';
+export 'package:moon_design/src/widgets/bottom_sheet/bottom_sheet.dart';
+export 'package:moon_design/src/widgets/bottom_sheet/modal_bottom_sheet.dart';
 export 'package:moon_design/src/widgets/buttons/button.dart';
 export 'package:moon_design/src/widgets/buttons/filled_button.dart';
 export 'package:moon_design/src/widgets/buttons/outlined_button.dart';

lib/src/theme/bottom_sheet/bottom_sheet_colors.dart

@@ -0,0 +1,81 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/colors.dart';
+import 'package:moon_design/src/theme/icons/icon_theme.dart';
+import 'package:moon_design/src/theme/typography/typography.dart';
+import 'package:moon_design/src/utils/color_premul_lerp.dart';
+
+@immutable
+class MoonBottomSheetColors extends ThemeExtension<MoonBottomSheetColors> with DiagnosticableTreeMixin {
+  static final light = MoonBottomSheetColors(
+    textColor: MoonTypography.light.colors.bodyPrimary,
+    iconColor: MoonIconTheme.light.colors.primaryColor,
+    backgroundColor: MoonColors.light.gohan,
+    barrierColor: MoonColors.light.zeno,
+  );
+
+  static final dark = MoonBottomSheetColors(
+    textColor: MoonTypography.dark.colors.bodyPrimary,
+    iconColor: MoonIconTheme.dark.colors.primaryColor,
+    backgroundColor: MoonColors.dark.gohan,
+    barrierColor: MoonColors.dark.zeno,
+  );
+
+  /// BottomSheet text color.
+  final Color textColor;
+
+  /// BottomSheet icon color.
+  final Color iconColor;
+
+  /// BottomSheet background color.
+  final Color backgroundColor;
+
+  /// BottomSheet barrier color.
+  final Color barrierColor;
+
+  const MoonBottomSheetColors({
+    required this.textColor,
+    required this.iconColor,
+    required this.backgroundColor,
+    required this.barrierColor,
+  });
+
+  @override
+  MoonBottomSheetColors copyWith({
+    Color? textColor,
+    Color? iconColor,
+    Color? backgroundColor,
+    Color? barrierColor,
+  }) {
+    return MoonBottomSheetColors(
+      textColor: textColor ?? this.textColor,
+      iconColor: iconColor ?? this.iconColor,
+      backgroundColor: backgroundColor ?? this.backgroundColor,
+      barrierColor: barrierColor ?? this.barrierColor,
+    );
+  }
+
+  @override
+  MoonBottomSheetColors lerp(ThemeExtension<MoonBottomSheetColors>? other, double t) {
+    if (other is! MoonBottomSheetColors) return this;
+
+    return MoonBottomSheetColors(
+      textColor: colorPremulLerp(textColor, other.textColor, t)!,
+      iconColor: colorPremulLerp(iconColor, other.iconColor, t)!,
+      backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!,
+      barrierColor: colorPremulLerp(barrierColor, other.barrierColor, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonBottomSheetColors"))
+      ..add(ColorProperty("textColor", textColor))
+      ..add(ColorProperty("iconColor", iconColor))
+      ..add(ColorProperty("backgroundColor", backgroundColor))
+      ..add(ColorProperty("barrierColor", barrierColor));
+  }
+}

lib/src/theme/bottom_sheet/bottom_sheet_properties.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:moon_design/src/theme/borders.dart';
+import 'package:moon_design/src/theme/typography/text_styles.dart';
+
+@immutable
+class MoonBottomSheetProperties extends ThemeExtension<MoonBottomSheetProperties> with DiagnosticableTreeMixin {
+  static final properties = MoonBottomSheetProperties(
+    borderRadius: MoonBorders.borders.surfaceLg,
+    transitionDuration: const Duration(milliseconds: 200),
+    transitionCurve: Curves.easeInOutCubic,
+    textStyle: MoonTextStyles.body.textDefault,
+  );
+
+  /// BottomSheet border radius.
+  final BorderRadiusGeometry borderRadius;
+
+  /// BottomSheet transition duration.
+  final Duration transitionDuration;
+
+  /// BottomSheet transition curve.
+  final Curve transitionCurve;
+
+  /// BottomSheet text style.
+  final TextStyle textStyle;
+
+  const MoonBottomSheetProperties({
+    required this.borderRadius,
+    required this.transitionDuration,
+    required this.transitionCurve,
+    required this.textStyle,
+  });
+
+  @override
+  MoonBottomSheetProperties copyWith({
+    BorderRadiusGeometry? borderRadius,
+    Duration? transitionDuration,
+    Curve? transitionCurve,
+    TextStyle? textStyle,
+  }) {
+    return MoonBottomSheetProperties(
+      borderRadius: borderRadius ?? this.borderRadius,
+      transitionDuration: transitionDuration ?? this.transitionDuration,
+      transitionCurve: transitionCurve ?? this.transitionCurve,
+      textStyle: textStyle ?? this.textStyle,
+    );
+  }
+
+  @override
+  MoonBottomSheetProperties lerp(ThemeExtension<MoonBottomSheetProperties>? other, double t) {
+    if (other is! MoonBottomSheetProperties) return this;
+
+    return MoonBottomSheetProperties(
+      borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!,
+      transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t),
+      transitionCurve: other.transitionCurve,
+      textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonBottomSheetProperties"))
+      ..add(DiagnosticsProperty<BorderRadiusGeometry>("borderRadius", borderRadius))
+      ..add(DiagnosticsProperty<Duration>("transitionDuration", transitionDuration))
+      ..add(DiagnosticsProperty<Curve>("transitionCurve", transitionCurve))
+      ..add(DiagnosticsProperty<TextStyle>("textStyle", textStyle));
+  }
+}

lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart

@@ -0,0 +1,56 @@
+import 'dart:ui';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+@immutable
+class MoonBottomSheetSizeProperties extends ThemeExtension<MoonBottomSheetSizeProperties> with DiagnosticableTreeMixin {
+  static const sm = MoonBottomSheetSizeProperties(
+    normalisedHeight: 0.32,
+  );
+
+  static const md = MoonBottomSheetSizeProperties(
+    normalisedHeight: 0.64,
+  );
+
+  static const lg = MoonBottomSheetSizeProperties(
+    normalisedHeight: 0.88,
+  );
+
+  static const fullScreen = MoonBottomSheetSizeProperties(
+    normalisedHeight: 1.0,
+  );
+
+  /// The normalised percentage value of the BottomSheet height.
+  final double normalisedHeight;
+
+  const MoonBottomSheetSizeProperties({
+    required this.normalisedHeight,
+  });
+
+  @override
+  MoonBottomSheetSizeProperties copyWith({
+    double? normalisedHeight,
+  }) {
+    return MoonBottomSheetSizeProperties(
+      normalisedHeight: normalisedHeight ?? this.normalisedHeight,
+    );
+  }
+
+  @override
+  MoonBottomSheetSizeProperties lerp(ThemeExtension<MoonBottomSheetSizeProperties>? other, double t) {
+    if (other is! MoonBottomSheetSizeProperties) return this;
+
+    return MoonBottomSheetSizeProperties(
+      normalisedHeight: lerpDouble(normalisedHeight, other.normalisedHeight, t)!,
+    );
+  }
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties
+      ..add(DiagnosticsProperty("type", "MoonBottomSheetSizeProperties"))
+      ..add(DoubleProperty("normalisedHeight", normalisedHeight));
+  }
+}