Skip to content

Commit

Permalink
fix(ui): when the device is in portrait mode, the setting buttons are…
Browse files Browse the repository at this point in the history 
… now correctly displayed
  • Loading branch information
@vareversat
vareversat committed Sep 11, 2023
1 parent c421020 commit c1477eb
Showing 1 changed file with 133 additions and 130 deletions.
263 changes: 133 additions & 130 deletions lib/widgets/bottom_sheets/settings_modal_bottom_sheet.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,146 +17,149 @@ class SettingsModalBottomSheet extends StatelessWidget {
final colorScheme = Theme.of(context).colorScheme;

return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Wrap(
direction: DeviceHelper.isPortrait(context)
? Axis.horizontal
: Axis.vertical,
alignment: WrapAlignment.center,
runSpacing: DeviceHelper.isPortrait(context) ? 0 : 50,
children: [
BlocBuilder<ThemeBloc, ThemeState>(
builder: (context, state) {
return Wrap(
direction: Axis.vertical,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 15,
children: [
Text(
AppLocalizations.of(context)!.themeSettingSubtitle,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
padding: const EdgeInsets.all(20.0),
child: Wrap(
direction:
DeviceHelper.isPortrait(context) || !DeviceHelper.isMobile(context)
? Axis.horizontal
: Axis.vertical,
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
runSpacing:
DeviceHelper.isPortrait(context) || !DeviceHelper.isMobile(context)
? 0
: 35,
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 15,
children: [
BlocBuilder<ThemeBloc, ThemeState>(
builder: (context, state) {
return Wrap(
direction: Axis.vertical,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 15,
children: [
Text(
AppLocalizations.of(context)!.themeSettingSubtitle,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
AnimatedToggleSwitch<ThemeStateStatus>.size(
current: state.status,
values: const [
ThemeStateStatus.light,
ThemeStateStatus.dark,
ThemeStateStatus.system,
],
style: ToggleStyle(
backgroundColor: colorScheme.surface,
indicatorColor: colorScheme.primary,
borderColor: colorScheme.inverseSurface,
),
borderWidth: 1.5,
indicatorSize: const Size.fromWidth(65),
iconBuilder: (value) {
return Icon(
value.icon,
color: state.status == value
? colorScheme.onPrimary
: colorScheme.onSurface,
);
},
onChanged: (value) =>
BlocProvider.of<ThemeBloc>(context).add(
ThemeChanged(
status: value,
),
),
),
AnimatedToggleSwitch<ThemeStateStatus>.size(
current: state.status,
values: const [
ThemeStateStatus.light,
ThemeStateStatus.dark,
ThemeStateStatus.system,
],
style: ToggleStyle(
backgroundColor: colorScheme.surface,
indicatorColor: colorScheme.primary,
borderColor: colorScheme.inverseSurface,
),
AnimatedSwitcher(
duration: const Duration(
milliseconds: CustomProperties.shortAnimationDurationMs,
),
reverseDuration: const Duration(
milliseconds: CustomProperties.shortAnimationDurationMs,
borderWidth: 1.5,
indicatorSize: const Size.fromWidth(65),
iconBuilder: (value) {
return Icon(
value.icon,
color: state.status == value
? colorScheme.onPrimary
: colorScheme.onSurface,
);
},
onChanged: (value) =>
BlocProvider.of<ThemeBloc>(context).add(
ThemeChanged(
status: value,
),
transitionBuilder:
(Widget child, Animation<double> animation) {
return SlideTransition(
position: Tween(
begin: const Offset(0.0, 1.0),
end: const Offset(0.0, 0.0),
).animate(animation),
child: FadeTransition(
opacity: CurvedAnimation(
parent: animation,
curve: Curves.easeIn,
),
child: child,
),
),
AnimatedSwitcher(
duration: const Duration(
milliseconds: CustomProperties.shortAnimationDurationMs,
),
reverseDuration: const Duration(
milliseconds: CustomProperties.shortAnimationDurationMs,
),
transitionBuilder:
(Widget child, Animation<double> animation) {
return SlideTransition(
position: Tween(
begin: const Offset(0.0, 1.0),
end: const Offset(0.0, 0.0),
).animate(animation),
child: FadeTransition(
opacity: CurvedAnimation(
parent: animation,
curve: Curves.easeIn,
),
);
},
child: Text(
key: ValueKey<String>(
state.status.text(context),
child: child,
),
);
},
child: Text(
key: ValueKey<String>(
state.status.text(context),
),
state.status.text(context),
),
],
);
},
),
DeviceHelper.isPortrait(context)
? const Padding(
padding:
EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Divider(),
)
: const SizedBox.shrink(),
BlocBuilder<TimeFormatCubit, TimeFormatState>(
builder: (context, state) {
return Wrap(
direction: Axis.vertical,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 15,
children: [
Text(
AppLocalizations.of(context)!.timeFormatSubTitle,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
),
],
);
},
),
DeviceHelper.isPortrait(context)
? const Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10),
child: Divider(),
)
: const SizedBox.shrink(),
BlocBuilder<TimeFormatCubit, TimeFormatState>(
builder: (context, state) {
return Wrap(
direction: Axis.vertical,
crossAxisAlignment: WrapCrossAlignment.center,
runAlignment: WrapAlignment.center,
spacing: 15,
children: [
AnimatedToggleSwitch<TimeFormat>.size(
current: state.timeFormat,
values: const [
TimeFormat.twelveHours,
TimeFormat.twentyFourHours,
],
style: ToggleStyle(
backgroundColor: colorScheme.surface,
indicatorColor: colorScheme.primary,
borderColor: colorScheme.inverseSurface,
),
AnimatedToggleSwitch<TimeFormat>.size(
current: state.timeFormat,
values: const [
TimeFormat.twelveHours,
TimeFormat.twentyFourHours,
],
style: ToggleStyle(
backgroundColor: colorScheme.surface,
indicatorColor: colorScheme.primary,
borderColor: colorScheme.inverseSurface,
),
borderWidth: 1.5,
indicatorSize: const Size.fromWidth(65),
iconBuilder: (value) {
return Text(
value.text,
style: TextStyle(
color: state.timeFormat == value
? colorScheme.onPrimary
: colorScheme.onSurface,
fontWeight: FontWeight.bold),
);
},
onChanged: (value) =>
context.read<TimeFormatCubit>().setTimeFormat(),
borderWidth: 1.5,
indicatorSize: const Size.fromWidth(65),
iconBuilder: (value) {
return Text(
value.text,
style: TextStyle(
color: state.timeFormat == value
? colorScheme.onPrimary
: colorScheme.onSurface,
fontWeight: FontWeight.bold),
);
},
onChanged: (value) =>
context.read<TimeFormatCubit>().setTimeFormat(),
),
Text(
AppLocalizations.of(context)!.timeFormatSubTitle,
style: const TextStyle(
fontWeight: FontWeight.bold,
),
],
);
},
),
],
),
),
],
);
},
),
],
),
);
}
Expand Down

0 comments on commit c1477eb

Please sign in to comment.