Skip to content

Commit

Permalink
fix: [MDS-602] Fix Bottomsheet bugs (#216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@GittHub-d
GittHub-d committed Jul 26, 2023
1 parent 0362bbd commit 9743bc3
Show file tree
Hide file tree
Showing 9 changed files with 341 additions and 407 deletions.
143 changes: 90 additions & 53 deletions example/lib/src/storybook/stories/bottom_sheet.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,96 +10,133 @@ class BottomSheetStory extends Story {
builder: (context) {
final backgroundColorsKnob = context.knobs.nullable.options(
label: "backgroundColor",
description: "MoonColors variants for MoonModal background.",
description: "MoonColors variants for MoonBottomSheet background.",
enabled: false,
initial: 0, // piccolo
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.",
description: "MoonColors variants for MoonBottomSheet barrier.",
enabled: false,
initial: 0, // piccolo
initial: 0,
// piccolo
options: colorOptions,
);

final barrierColor = colorTable(context)[barrierColorsKnob ?? 40];

final borderRadiusKnob = context.knobs.nullable.sliderInt(
label: "borderRadius",
description: "Border radius for MoonModal.",
description: "Border radius for MoonBottomSheet.",
enabled: false,
initial: 8,
max: 32,
);

final heightKnob = context.knobs.nullable.slider(
label: "height",
description: "Height of the bottomsheet.",
enabled: false,
initial: 0.64,
min: 0.1,
);

final closeProgressThresholdKnob = context.knobs.nullable.slider(
label: "closeProgressThreshold",
description: "Close progress threshold for MoonBottomSheet.",
enabled: false,
initial: 0.6,
);

Future<dynamic> bottomSheetBuilder(BuildContext context) {
return showMoonModalBottomSheet(
context: context,
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.moonColors!.beerus,
shape: const StadiumBorder(),
height: heightKnob != null
? MediaQuery.of(context).size.height * heightKnob
: MediaQuery.of(context).size.height * 0.7,
closeProgressThreshold: closeProgressThresholdKnob,
borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null,
builder: (BuildContext context) => Column(
children: [
Container(
height: 4,
width: 40,
margin: const EdgeInsets.only(top: 8, bottom: 8),
decoration: ShapeDecoration(
color: context.moonColors!.beerus,
shape: const StadiumBorder(),
),
),
Row(
children: [
const SizedBox(width: 48),
Expanded(
child: Center(
child: Text(
'Pick your choice!',
style: MoonTypography.typography.heading.text16,
),
),
),
),
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"),
],
SizedBox(
width: 48,
height: 48,
child: Align(
alignment: Alignment.centerLeft,
child: MoonButton.icon(
icon: const MoonIcon(MoonIcons.close_small_16),
buttonSize: MoonButtonSize.sm,
backgroundColor: context.moonColors!.beerus,
borderRadius: BorderRadius.circular(24),
onTap: () => Navigator.of(context).pop(),
),
),
)
],
),
Divider(
height: 0,
thickness: 1,
color: context.moonColors!.beerus,
),
Expanded(
child: ListView.builder(
primary: true,
itemCount: 100,
padding: EdgeInsets.zero,
itemBuilder: (BuildContext _, int index) => Padding(
padding: const EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text("Item nr:"),
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),
],
child: Builder(
builder: (BuildContext context) {
return MoonFilledButton(
label: const Text("Tap me"),
onTap: () => bottomSheetBuilder(context),
);
},
),
);
},
Expand Down
40 changes: 0 additions & 40 deletions lib/src/theme/bottom_sheet/bottom_sheet_size_properties.dart
View file

This file was deleted.

76 changes: 0 additions & 76 deletions lib/src/theme/bottom_sheet/bottom_sheet_sizes.dart
View file

This file was deleted.

18 changes: 4 additions & 14 deletions lib/src/theme/bottom_sheet/bottom_sheet_theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import 'package:flutter/material.dart';

import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_colors.dart';
import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_properties.dart';
import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_sizes.dart';
import 'package:moon_design/src/theme/tokens/tokens.dart';

@immutable
Expand All @@ -17,14 +16,10 @@ class MoonBottomSheetTheme extends ThemeExtension<MoonBottomSheetTheme> with Dia
/// BottomSheet properties.
final MoonBottomSheetProperties properties;

/// BottomSheet sizes.
final MoonBottomSheetSizes sizes;

MoonBottomSheetTheme({
required this.tokens,
MoonBottomSheetColors? colors,
MoonBottomSheetProperties? properties,
MoonBottomSheetSizes? sizes,
}) : colors = colors ??
MoonBottomSheetColors(
textColor: tokens.colors.textPrimary,
Expand All @@ -35,24 +30,21 @@ class MoonBottomSheetTheme extends ThemeExtension<MoonBottomSheetTheme> with Dia
properties = properties ??
MoonBottomSheetProperties(
borderRadius: tokens.borders.surfaceLg,
transitionDuration: tokens.transitions.defaultTransitionDuration,
transitionCurve: tokens.transitions.defaultTransitionCurve,
transitionDuration: const Duration(milliseconds: 350),
transitionCurve: const Cubic(0.0, 0.0, 0.2, 1.0),
textStyle: tokens.typography.body.textDefault,
),
sizes = sizes ?? MoonBottomSheetSizes(tokens: tokens);
);

@override
MoonBottomSheetTheme copyWith({
MoonTokens? tokens,
MoonBottomSheetColors? colors,
MoonBottomSheetProperties? properties,
MoonBottomSheetSizes? sizes,
}) {
return MoonBottomSheetTheme(
tokens: tokens ?? this.tokens,
colors: colors ?? this.colors,
properties: properties ?? this.properties,
sizes: sizes ?? this.sizes,
);
}

Expand All @@ -64,7 +56,6 @@ class MoonBottomSheetTheme extends ThemeExtension<MoonBottomSheetTheme> with Dia
tokens: tokens.lerp(other.tokens, t),
colors: colors.lerp(other.colors, t),
properties: properties.lerp(other.properties, t),
sizes: sizes.lerp(other.sizes, t),
);
}

Expand All @@ -75,7 +66,6 @@ class MoonBottomSheetTheme extends ThemeExtension<MoonBottomSheetTheme> with Dia
..add(DiagnosticsProperty("type", "MoonBottomSheetTheme"))
..add(DiagnosticsProperty<MoonTokens>("tokens", tokens))
..add(DiagnosticsProperty<MoonBottomSheetColors>("colors", colors))
..add(DiagnosticsProperty<MoonBottomSheetProperties>("properties", properties))
..add(DiagnosticsProperty<MoonBottomSheetSizes>("sizes", sizes));
..add(DiagnosticsProperty<MoonBottomSheetProperties>("properties", properties));
}
}
Loading

0 comments on commit 9743bc3

Please sign in to comment.