From b4d9680cf61059f3cfde62f22b2678ce3f0dc4fa Mon Sep 17 00:00:00 2001 From: Lenkomotive Date: Wed, 9 Oct 2024 22:35:59 +0200 Subject: [PATCH] PAINTROID-454: Flutter: Add Layers --- .../state/layer_menu_state_data.dart | 11 ++ .../state/layer_menu_state_data.freezed.dart | 135 ++++++++++++++++++ .../state/layer_menu_state_provider.dart | 18 +++ .../state/layer_menu_state_provider.g.dart | 27 ++++ .../components/bottom_bar/bottom_nav_bar.dart | 110 +++++++------- .../components/layer_menu/layer_menu.dart | 30 ++++ .../pages/workspace_page/workspace_page.dart | 6 +- lib/ui/shared/fade_in_out_widget.dart | 28 ++++ pubspec.lock | 72 ++++++---- 9 files changed, 358 insertions(+), 79 deletions(-) create mode 100644 lib/core/providers/state/layer_menu_state_data.dart create mode 100644 lib/core/providers/state/layer_menu_state_data.freezed.dart create mode 100644 lib/core/providers/state/layer_menu_state_provider.dart create mode 100644 lib/core/providers/state/layer_menu_state_provider.g.dart create mode 100644 lib/ui/pages/workspace_page/components/layer_menu/layer_menu.dart create mode 100644 lib/ui/shared/fade_in_out_widget.dart diff --git a/lib/core/providers/state/layer_menu_state_data.dart b/lib/core/providers/state/layer_menu_state_data.dart new file mode 100644 index 00000000..e5ca684c --- /dev/null +++ b/lib/core/providers/state/layer_menu_state_data.dart @@ -0,0 +1,11 @@ +import 'package:freezed_annotation/freezed_annotation.dart'; + +part 'layer_menu_state_data.freezed.dart'; + +@immutable +@freezed +class LayerMenuStateData with _$LayerMenuStateData { + const factory LayerMenuStateData({ + required bool isVisible, + }) = _LayerMenuStateData; +} diff --git a/lib/core/providers/state/layer_menu_state_data.freezed.dart b/lib/core/providers/state/layer_menu_state_data.freezed.dart new file mode 100644 index 00000000..4b19bd3d --- /dev/null +++ b/lib/core/providers/state/layer_menu_state_data.freezed.dart @@ -0,0 +1,135 @@ +// coverage:ignore-file +// GENERATED CODE - DO NOT MODIFY BY HAND +// ignore_for_file: type=lint +// ignore_for_file: unused_element, deprecated_member_use, deprecated_member_use_from_same_package, use_function_type_syntax_for_parameters, unnecessary_const, avoid_init_to_null, invalid_override_different_default_values_named, prefer_expression_function_bodies, annotate_overrides, invalid_annotation_target, unnecessary_question_mark + +part of 'layer_menu_state_data.dart'; + +// ************************************************************************** +// FreezedGenerator +// ************************************************************************** + +T _$identity(T value) => value; + +final _privateConstructorUsedError = UnsupportedError( + 'It seems like you constructed your class using `MyClass._()`. This constructor is only meant to be used by freezed and you are not supposed to need it nor use it.\nPlease check the documentation here for more information: https://github.com/rrousselGit/freezed#adding-getters-and-methods-to-our-models'); + +/// @nodoc +mixin _$LayerMenuStateData { + bool get isVisible => throw _privateConstructorUsedError; + + @JsonKey(ignore: true) + $LayerMenuStateDataCopyWith get copyWith => + throw _privateConstructorUsedError; +} + +/// @nodoc +abstract class $LayerMenuStateDataCopyWith<$Res> { + factory $LayerMenuStateDataCopyWith( + LayerMenuStateData value, $Res Function(LayerMenuStateData) then) = + _$LayerMenuStateDataCopyWithImpl<$Res, LayerMenuStateData>; + @useResult + $Res call({bool isVisible}); +} + +/// @nodoc +class _$LayerMenuStateDataCopyWithImpl<$Res, $Val extends LayerMenuStateData> + implements $LayerMenuStateDataCopyWith<$Res> { + _$LayerMenuStateDataCopyWithImpl(this._value, this._then); + + // ignore: unused_field + final $Val _value; + // ignore: unused_field + final $Res Function($Val) _then; + + @pragma('vm:prefer-inline') + @override + $Res call({ + Object? isVisible = null, + }) { + return _then(_value.copyWith( + isVisible: null == isVisible + ? _value.isVisible + : isVisible // ignore: cast_nullable_to_non_nullable + as bool, + ) as $Val); + } +} + +/// @nodoc +abstract class _$$LayerMenuStateDataImplCopyWith<$Res> + implements $LayerMenuStateDataCopyWith<$Res> { + factory _$$LayerMenuStateDataImplCopyWith(_$LayerMenuStateDataImpl value, + $Res Function(_$LayerMenuStateDataImpl) then) = + __$$LayerMenuStateDataImplCopyWithImpl<$Res>; + @override + @useResult + $Res call({bool isVisible}); +} + +/// @nodoc +class __$$LayerMenuStateDataImplCopyWithImpl<$Res> + extends _$LayerMenuStateDataCopyWithImpl<$Res, _$LayerMenuStateDataImpl> + implements _$$LayerMenuStateDataImplCopyWith<$Res> { + __$$LayerMenuStateDataImplCopyWithImpl(_$LayerMenuStateDataImpl _value, + $Res Function(_$LayerMenuStateDataImpl) _then) + : super(_value, _then); + + @pragma('vm:prefer-inline') + @override + $Res call({ + Object? isVisible = null, + }) { + return _then(_$LayerMenuStateDataImpl( + isVisible: null == isVisible + ? _value.isVisible + : isVisible // ignore: cast_nullable_to_non_nullable + as bool, + )); + } +} + +/// @nodoc + +class _$LayerMenuStateDataImpl implements _LayerMenuStateData { + const _$LayerMenuStateDataImpl({required this.isVisible}); + + @override + final bool isVisible; + + @override + String toString() { + return 'LayerMenuStateData(isVisible: $isVisible)'; + } + + @override + bool operator ==(Object other) { + return identical(this, other) || + (other.runtimeType == runtimeType && + other is _$LayerMenuStateDataImpl && + (identical(other.isVisible, isVisible) || + other.isVisible == isVisible)); + } + + @override + int get hashCode => Object.hash(runtimeType, isVisible); + + @JsonKey(ignore: true) + @override + @pragma('vm:prefer-inline') + _$$LayerMenuStateDataImplCopyWith<_$LayerMenuStateDataImpl> get copyWith => + __$$LayerMenuStateDataImplCopyWithImpl<_$LayerMenuStateDataImpl>( + this, _$identity); +} + +abstract class _LayerMenuStateData implements LayerMenuStateData { + const factory _LayerMenuStateData({required final bool isVisible}) = + _$LayerMenuStateDataImpl; + + @override + bool get isVisible; + @override + @JsonKey(ignore: true) + _$$LayerMenuStateDataImplCopyWith<_$LayerMenuStateDataImpl> get copyWith => + throw _privateConstructorUsedError; +} diff --git a/lib/core/providers/state/layer_menu_state_provider.dart b/lib/core/providers/state/layer_menu_state_provider.dart new file mode 100644 index 00000000..62bcdf91 --- /dev/null +++ b/lib/core/providers/state/layer_menu_state_provider.dart @@ -0,0 +1,18 @@ +import 'package:paintroid/core/providers/state/layer_menu_state_data.dart'; +import 'package:riverpod_annotation/riverpod_annotation.dart'; + +part 'layer_menu_state_provider.g.dart'; + +@Riverpod(keepAlive: true) +class LayerMenuStateProvider extends _$LayerMenuStateProvider { + @override + LayerMenuStateData build() { + return const LayerMenuStateData( + isVisible: false, + ); + } + + void toggleVisibility() { + state = state.copyWith(isVisible: !state.isVisible); + } +} diff --git a/lib/core/providers/state/layer_menu_state_provider.g.dart b/lib/core/providers/state/layer_menu_state_provider.g.dart new file mode 100644 index 00000000..e906cb19 --- /dev/null +++ b/lib/core/providers/state/layer_menu_state_provider.g.dart @@ -0,0 +1,27 @@ +// GENERATED CODE - DO NOT MODIFY BY HAND + +part of 'layer_menu_state_provider.dart'; + +// ************************************************************************** +// RiverpodGenerator +// ************************************************************************** + +String _$layerMenuStateProviderHash() => + r'1dc3f0fa55df98057c2b981e7b215ccea251542a'; + +/// See also [LayerMenuStateProvider]. +@ProviderFor(LayerMenuStateProvider) +final layerMenuStateProvider = + NotifierProvider.internal( + LayerMenuStateProvider.new, + name: r'layerMenuStateProvider', + debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product') + ? null + : _$layerMenuStateProviderHash, + dependencies: null, + allTransitiveDependencies: null, +); + +typedef _$LayerMenuStateProvider = Notifier; +// ignore_for_file: type=lint +// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member diff --git a/lib/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart b/lib/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart index 6f23f496..e4e83f9e 100644 --- a/lib/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart +++ b/lib/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart @@ -1,10 +1,9 @@ +import 'package:colorpicker/colorpicker.dart'; import 'package:flutter/material.dart'; - import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:colorpicker/colorpicker.dart'; - import 'package:paintroid/core/enums/tool_types.dart'; import 'package:paintroid/core/localization/app_localizations.dart'; +import 'package:paintroid/core/providers/state/layer_menu_state_provider.dart'; import 'package:paintroid/core/providers/state/paint_provider.dart'; import 'package:paintroid/core/providers/state/tool_options_visibility_state_provider.dart'; import 'package:paintroid/core/providers/state/toolbox_state_provider.dart'; @@ -78,59 +77,66 @@ class BottomNavBar extends ConsumerWidget { ); return currentToolData; } -} -void _onNavigationItemSelected(int index, BuildContext context, WidgetRef ref) { - BottomNavBarItem item = BottomNavBarItem.values[index]; - switch (item) { - case BottomNavBarItem.TOOLS: - _showToolBottomSheet(context); - break; - case BottomNavBarItem.TOOL_OPTIONS: - _handleToolOptionsVisibility(ref); - break; - case BottomNavBarItem.COLOR: - _showColorPicker(context, ref); - break; - default: - return; + void _onNavigationItemSelected( + int index, BuildContext context, WidgetRef ref) { + BottomNavBarItem item = BottomNavBarItem.values[index]; + switch (item) { + case BottomNavBarItem.TOOLS: + _showToolBottomSheet(context); + break; + case BottomNavBarItem.TOOL_OPTIONS: + _handleToolOptionsVisibility(ref); + break; + case BottomNavBarItem.COLOR: + _showColorPicker(context, ref); + break; + case BottomNavBarItem.LAYERS: + _showLayerMenu(context, ref); + default: + return; + } } -} -void _showToolBottomSheet(BuildContext context) { - double screenHeight = MediaQuery.of(context).size.height; - showModalBottomSheet( - context: context, - builder: (BuildContext context) => SizedBox( - height: screenHeight * 0.5, - child: const ToolsBottomSheet(), - ), - ); -} + void _showToolBottomSheet(BuildContext context) { + double screenHeight = MediaQuery.of(context).size.height; + showModalBottomSheet( + context: context, + builder: (BuildContext context) => SizedBox( + height: screenHeight * 0.5, + child: const ToolsBottomSheet(), + ), + ); + } -void _handleToolOptionsVisibility(WidgetRef ref) { - ref.read(toolOptionsVisibilityStateProvider.notifier).toggleVisibility(); -} + void _handleToolOptionsVisibility(WidgetRef ref) { + ref.read(toolOptionsVisibilityStateProvider.notifier).toggleVisibility(); + } -void _showColorPicker(BuildContext context, WidgetRef ref) { - showModalBottomSheet( - context: context, - isScrollControlled: true, - builder: (BuildContext dialogContext) => Container( - height: MediaQuery.of(dialogContext).size.height * 0.7, - alignment: Alignment.center, - decoration: BoxDecoration( - color: PaintroidTheme.of(dialogContext).onSurfaceColor, - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(16.0), - topRight: Radius.circular(16.0), - )), - child: ColorPicker( - currentColor: ref.watch(paintProvider).color, - onColorChanged: (newColor) { - ref.watch(paintProvider.notifier).updateColor(newColor); - }, + void _showColorPicker(BuildContext context, WidgetRef ref) { + showModalBottomSheet( + context: context, + isScrollControlled: true, + builder: (BuildContext dialogContext) => Container( + height: MediaQuery.of(dialogContext).size.height * 0.7, + alignment: Alignment.center, + decoration: BoxDecoration( + color: PaintroidTheme.of(dialogContext).onSurfaceColor, + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(16.0), + topRight: Radius.circular(16.0), + )), + child: ColorPicker( + currentColor: ref.watch(paintProvider).color, + onColorChanged: (newColor) { + ref.watch(paintProvider.notifier).updateColor(newColor); + }, + ), ), - ), - ); + ); + } + + void _showLayerMenu(BuildContext context, WidgetRef ref) { + ref.read(layerMenuStateProvider.notifier).toggleVisibility(); + } } diff --git a/lib/ui/pages/workspace_page/components/layer_menu/layer_menu.dart b/lib/ui/pages/workspace_page/components/layer_menu/layer_menu.dart new file mode 100644 index 00000000..af1f231c --- /dev/null +++ b/lib/ui/pages/workspace_page/components/layer_menu/layer_menu.dart @@ -0,0 +1,30 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:paintroid/core/providers/state/layer_menu_state_provider.dart'; +import 'package:paintroid/ui/shared/fade_in_out_widget.dart'; + +class LayerMenu extends ConsumerWidget { + const LayerMenu({super.key}); + + @override + Widget build(BuildContext context, WidgetRef ref) { + final isVisible = ref.watch( + layerMenuStateProvider.select((state) => state.isVisible), + ); + return Positioned( + top: 32, + bottom: 32, + right: 8, + child: FadeInOutWidget( + isVisible: isVisible, + child: Container( + width: 200, + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(12), + ), + ), + ), + ); + } +} diff --git a/lib/ui/pages/workspace_page/workspace_page.dart b/lib/ui/pages/workspace_page/workspace_page.dart index 6d31be18..23c5d62d 100644 --- a/lib/ui/pages/workspace_page/workspace_page.dart +++ b/lib/ui/pages/workspace_page/workspace_page.dart @@ -1,17 +1,16 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; - import 'package:flutter_riverpod/flutter_riverpod.dart'; -import 'package:toast/toast.dart'; - import 'package:paintroid/core/providers/object/io_handler.dart'; import 'package:paintroid/core/providers/state/workspace_state_notifier.dart'; import 'package:paintroid/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart'; import 'package:paintroid/ui/pages/workspace_page/components/bottom_bar/tool_options/tool_options.dart'; import 'package:paintroid/ui/pages/workspace_page/components/drawing_surface/drawing_canvas.dart'; import 'package:paintroid/ui/pages/workspace_page/components/drawing_surface/exit_fullscreen_button.dart'; +import 'package:paintroid/ui/pages/workspace_page/components/layer_menu/layer_menu.dart'; import 'package:paintroid/ui/pages/workspace_page/components/top_bar/top_app_bar.dart'; import 'package:paintroid/ui/shared/dialogs/discard_changes_dialog.dart'; +import 'package:toast/toast.dart'; class WorkspacePage extends ConsumerStatefulWidget { const WorkspacePage({super.key}); @@ -78,6 +77,7 @@ class _WorkspaceScreenState extends ConsumerState { ) else const ToolOptions(), + const LayerMenu(), ], ), bottomNavigationBar: isFullscreen ? null : const BottomNavBar(), diff --git a/lib/ui/shared/fade_in_out_widget.dart b/lib/ui/shared/fade_in_out_widget.dart new file mode 100644 index 00000000..574a266b --- /dev/null +++ b/lib/ui/shared/fade_in_out_widget.dart @@ -0,0 +1,28 @@ +import 'package:flutter/material.dart'; + +const Duration animationDuration = Duration(milliseconds: 300); +const double maxAnimationOpacity = 1.0; +const double minAnimationOpacity = 0.0; + +class FadeInOutWidget extends StatelessWidget { + final bool isVisible; + final Widget child; + + const FadeInOutWidget({ + super.key, + required this.isVisible, + required this.child, + }); + + @override + Widget build(BuildContext context) { + return IgnorePointer( + ignoring: !isVisible, + child: AnimatedOpacity( + opacity: isVisible ? maxAnimationOpacity : minAnimationOpacity, + duration: animationDuration, + child: child, + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 41146529..01c51cd8 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -292,10 +292,10 @@ packages: dependency: transitive description: name: file - sha256: "1b92bec4fc2a72f59a8e15af5f52cd441e4a7860b49499d69dfa817af20e925d" + sha256: "5fc22d7c25582e38ad9a8515372cd9a93834027aacf1801cf01164dac0ffa08c" url: "https://pub.dev" source: hosted - version: "6.1.4" + version: "7.0.0" file_picker: dependency: "direct main" description: @@ -607,10 +607,10 @@ packages: dependency: "direct main" description: name: intl - sha256: "3bc132a9dbce73a7e4a21a17d06e1878839ffbf975568bc875c60537824b0c4d" + sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf url: "https://pub.dev" source: hosted - version: "0.18.1" + version: "0.19.0" io: dependency: transitive description: @@ -651,6 +651,30 @@ packages: url: "https://pub.dev" source: hosted version: "3.0.1" + leak_tracker: + dependency: transitive + description: + name: leak_tracker + sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a" + url: "https://pub.dev" + source: hosted + version: "10.0.4" + leak_tracker_flutter_testing: + dependency: transitive + description: + name: leak_tracker_flutter_testing + sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8" + url: "https://pub.dev" + source: hosted + version: "3.0.3" + leak_tracker_testing: + dependency: transitive + description: + name: leak_tracker_testing + sha256: "6ba465d5d76e67ddf503e1161d1f4a6bc42306f9d66ca1e8f079a47290fb06d3" + url: "https://pub.dev" + source: hosted + version: "3.0.1" lints: dependency: transitive description: @@ -679,26 +703,26 @@ packages: dependency: transitive description: name: matcher - sha256: "1803e76e6653768d64ed8ff2e1e67bea3ad4b923eb5c56a295c3e634bad5960e" + sha256: d2323aa2060500f906aa31a895b4030b6da3ebdcc5619d14ce1aada65cd161cb url: "https://pub.dev" source: hosted - version: "0.12.16" + version: "0.12.16+1" material_color_utilities: dependency: transitive description: name: material_color_utilities - sha256: "9528f2f296073ff54cb9fee677df673ace1218163c3bc7628093e7eed5203d41" + sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a" url: "https://pub.dev" source: hosted - version: "0.5.0" + version: "0.8.0" meta: dependency: transitive description: name: meta - sha256: a6e590c838b18133bb482a2745ad77c5bb7715fb0451209e1a7567d416678b8e + sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136" url: "https://pub.dev" source: hosted - version: "1.10.0" + version: "1.12.0" mime: dependency: transitive description: @@ -751,10 +775,10 @@ packages: dependency: transitive description: name: path - sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917" + sha256: "087ce49c3f0dc39180befefc60fdb4acd8f8620e5682fe2476afd0b3688bb4af" url: "https://pub.dev" source: hosted - version: "1.8.3" + version: "1.9.0" path_drawing: dependency: transitive description: @@ -871,10 +895,10 @@ packages: dependency: transitive description: name: platform - sha256: ae68c7bfcd7383af3629daafb32fb4e8681c7154428da4febcff06200585f102 + sha256: "12220bb4b65720483f8fa9450b4332347737cf8213dd2840d8b2c823e47243ec" url: "https://pub.dev" source: hosted - version: "3.1.2" + version: "3.1.4" plugin_platform_interface: dependency: transitive description: @@ -895,10 +919,10 @@ packages: dependency: transitive description: name: process - sha256: "53fd8db9cec1d37b0574e12f07520d582019cb6c44abf5479a01505099a34a09" + sha256: "21e54fd2faf1b5bdd5102afd25012184a6793927648ea81eea80552ac9405b32" url: "https://pub.dev" source: hosted - version: "4.2.4" + version: "5.0.2" pub_semver: dependency: transitive description: @@ -1196,10 +1220,10 @@ packages: dependency: transitive description: name: test_api - sha256: "5c2f730018264d276c20e4f1503fd1308dfbbae39ec8ee63c5236311ac06954b" + sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f" url: "https://pub.dev" source: hosted - version: "0.6.1" + version: "0.7.0" timing: dependency: transitive description: @@ -1316,10 +1340,10 @@ packages: dependency: transitive description: name: vm_service - sha256: c538be99af830f478718b51630ec1b6bee5e74e52c8a802d328d9e71d35d2583 + sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec" url: "https://pub.dev" source: hosted - version: "11.10.0" + version: "14.2.1" watcher: dependency: transitive description: @@ -1348,10 +1372,10 @@ packages: dependency: transitive description: name: webdriver - sha256: "3c923e918918feeb90c4c9fdf1fe39220fa4c0e8e2c0fffaded174498ef86c49" + sha256: "003d7da9519e1e5f329422b36c4dcdf18d7d2978d1ba099ea4e45ba490ed845e" url: "https://pub.dev" source: hosted - version: "3.0.2" + version: "3.0.3" win32: dependency: transitive description: @@ -1393,5 +1417,5 @@ packages: source: hosted version: "3.1.2" sdks: - dart: ">=3.2.0 <4.0.0" - flutter: ">=3.16.0" + dart: ">=3.3.0 <4.0.0" + flutter: ">=3.18.0-18.0.pre.54"