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

feat: implement new toggle

Browse Source
This commit is contained in:
Lucas Oliveira 2022-07-25 13:58:03 -03:00
parent e640cf2890
commit 02e3e7c49a
3 changed files with 92 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: style.backgroundColor,
borderRadius: BorderRadius.circular(style.height / 2),
),
),
AnimatedPositioned(
duration: const Duration(milliseconds: 150),
top: (style.height - style.thumbRadius) / 2,
left: value ? 1 : style.width - style.thumbRadius - 1,
child: Container(
height: style.thumbRadius,
width: style.thumbRadius,
decoration: BoxDecoration(
color: style.thumbColor,
borderRadius: BorderRadius.circular(style.thumbRadius / 2),
),
),
),
],
),
),
);
}
}

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

@ -0,0 +1,35 @@
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 backgroundColor;
final Color thumbColor;
ToggleStyle({
required this.height,
required this.width,
required this.thumbRadius,
required this.backgroundColor,
required this.thumbColor,
});
ToggleStyle.big(AppTheme theme)
: height = 16,
width = 27,
thumbRadius = 14,
backgroundColor = theme.main1,
thumbColor = theme.surface;
ToggleStyle.small(AppTheme theme)
: height = 10,
width = 16,
thumbRadius = 8,
backgroundColor = theme.main1,
thumbColor = theme.surface;
}