Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #720 from tilucasoli/697_new_toggle

Browse Source 
feat: implement new toggle
This commit is contained in:
Mike Wallace 2022-07-25 18:10:56 -04:00 committed by GitHub
commit ab47c1d9c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
View File

@ -1,10 +1,13 @@
import 'package:app_flowy/generated/locale_keys.g.dart';
import 'package:app_flowy/workspace/application/appearance.dart';
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
import 'package:easy_localization/easy_localization.dart';
import 'package:flowy_infra/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../widgets/toggle/toggle.dart';
class SettingsAppearanceView extends StatelessWidget {
const SettingsAppearanceView({Key? key}) : super(key: key);
@ -25,11 +28,12 @@ class SettingsAppearanceView extends StatelessWidget {
fontWeight: FontWeight.w500,
),
),
Switch(
Toggle(
value: theme.isDark,
onChanged: (val) {
context.read<AppearanceSettingModel>().swapTheme();
},
style: ToggleStyle.big(theme),
),
Text(
LocaleKeys.settings_appearance_darkLabel.tr(),

52
frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle.dart Normal file
View File

@ -0,0 +1,52 @@
import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
import 'package:flutter/widgets.dart';
class Toggle extends StatelessWidget {
final ToggleStyle style;
final bool value;
final void Function(bool) onChanged;
final EdgeInsets padding;
const Toggle({
Key? key,
required this.value,
required this.onChanged,
required this.style,
this.padding = const EdgeInsets.all(8.0),
}) : super(key: key);
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (() => onChanged(value)),
child: Padding(
padding: padding,
child: Stack(
children: [
Container(
height: style.height,
width: style.width,
decoration: BoxDecoration(
color: value ? style.activeBackgroundColor : style.inactiveBackgroundColor,
borderRadius: BorderRadius.circular(style.height / 2),
),
),
AnimatedPositioned(
duration: const Duration(milliseconds: 150),
top: (style.height - style.thumbRadius) / 2,
left: value ? style.width - style.thumbRadius - 1 : 1,
child: Container(
height: style.thumbRadius,
width: style.thumbRadius,
decoration: BoxDecoration(
color: style.thumbColor,
borderRadius: BorderRadius.circular(style.thumbRadius / 2),
),
),
),
],
),
),
);
}
}

38
frontend/app_flowy/lib/workspace/presentation/widgets/toggle/toggle_style.dart Normal file
View File

@ -0,0 +1,38 @@
import 'package:flowy_infra/theme.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/widgets.dart';
class ToggleStyle {
final double height;
final double width;
final double thumbRadius;
final Color thumbColor;
final Color activeBackgroundColor;
final Color inactiveBackgroundColor;
ToggleStyle({
required this.height,
required this.width,
required this.thumbRadius,
required this.thumbColor,
required this.activeBackgroundColor,
required this.inactiveBackgroundColor,
});
ToggleStyle.big(AppTheme theme)
: height = 16,
width = 27,
thumbRadius = 14,
activeBackgroundColor = theme.main1,
inactiveBackgroundColor = theme.shader5,
thumbColor = theme.surface;
ToggleStyle.small(AppTheme theme)
: height = 10,
width = 16,
thumbRadius = 8,
activeBackgroundColor = theme.main1,
inactiveBackgroundColor = theme.shader5,
thumbColor = theme.surface;
}