Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: [MDS-602] Fix Bottomsheet bugs #216

Merged
merged 1 commit into from
Jul 26, 2023
Merged

fix: [MDS-602] Fix Bottomsheet bugs #216

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
143 changes: 90 additions & 53 deletions example/lib/src/storybook/stories/bottom_sheet.dart
View file
Open in desktop
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
Open in desktop

This file was deleted.

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

This file was deleted.

18 changes: 4 additions & 14 deletions lib/src/theme/bottom_sheet/bottom_sheet_theme.dart
View file
Open in desktop
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
Loading