add dynamic color change, separate colorpicker package

Catrobat · Feb 23, 2024 · f7526f5 · f7526f5
1 parent 0c15732
commit f7526f5
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 24 deletions.
diff --git a/packages/colorpicker/assets/img/checkerboard.png b/packages/colorpicker/assets/img/checkerboard.png
diff --git a/packages/colorpicker/lib/src/colorpicker.dart b/packages/colorpicker/lib/src/colorpicker.dart
@@ -1,7 +1,7 @@
 import 'package:colorpicker/src/constants/colors.dart';
 import 'package:colorpicker/src/components/color_compare.dart';
 import 'package:colorpicker/src/components/slider.dart';
-import 'package:component_library/component_library.dart';
+import 'package:colorpicker/utils/assets.dart';
 import 'package:flutter/material.dart';
 
 class ColorPicker extends StatefulWidget {
@@ -65,7 +65,7 @@ class _ColorPickerState extends State<ColorPicker> {
                   return Container(
                     decoration: BoxDecoration(
                       image: DecorationImage(
-                        image: CheckerboardImg.getCheckerboardImgAsset(),
+                        image: PackageAssets.getCheckerboardImgAsset(),
                         fit: BoxFit.contain,
                         repeat: ImageRepeat.repeat,
                       ),

diff --git a/packages/colorpicker/lib/src/components/slider.dart b/packages/colorpicker/lib/src/components/slider.dart
@@ -1,5 +1,5 @@
 import 'package:colorpicker/src/components/slider_indicator.dart';
-import 'package:component_library/component_library.dart';
+import 'package:colorpicker/utils/assets.dart';
 import 'package:flutter/material.dart';
 
 class OpacitySlider extends StatefulWidget {
@@ -45,7 +45,7 @@ class _OpacitySliderState extends State<OpacitySlider> {
       width: widgetWidth,
       decoration: BoxDecoration(
         image: DecorationImage(
-          image: CheckerboardImg.getCheckerboardImgAsset(),
+          image: PackageAssets.getCheckerboardImgAsset(),
           fit: BoxFit.fitHeight,
           repeat: ImageRepeat.repeat,
         ),

diff --git a/packages/colorpicker/lib/utils/assets.dart b/packages/colorpicker/lib/utils/assets.dart
@@ -0,0 +1,7 @@
+import 'package:flutter/material.dart';
+
+class PackageAssets {
+  static ImageProvider<Object> getCheckerboardImgAsset() {
+    return const AssetImage('packages/colorpicker/assets/img/checkerboard.png');
+  }
+}
diff --git a/packages/colorpicker/pubspec.yaml b/packages/colorpicker/pubspec.yaml
@@ -7,12 +7,11 @@ environment:
   sdk: ">=2.17.0 <3.0.0"
   flutter: ">=1.17.0"
 
+# this package should be built separately and not depend on other app modules
 dependencies:
   flutter:
     sdk: flutter
 
-  component_library:
-    path: ../component_library
 dev_dependencies:
   flutter_test:
     sdk: flutter
@@ -21,3 +20,6 @@ dev_dependencies:
 
 flutter:
   uses-material-design: true
+
+  assets:
+    - assets/img/
diff --git a/packages/component_library/lib/src/components/imgs.dart b/packages/component_library/lib/src/components/imgs.dart
@@ -3,12 +3,6 @@ import 'package:flutter/material.dart';
 class CheckerboardImg extends StatelessWidget {
   const CheckerboardImg({Key? key}) : super(key: key);
 
-  static ImageProvider<Object> getCheckerboardImgAsset() {
-    return const AssetImage(
-      'packages/component_library/assets/img/checkerboard.png',
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return SizedBox(

diff --git a/packages/features/workspace_screen/lib/src/components/bottom_bar/bottom_nav_bar.dart b/packages/features/workspace_screen/lib/src/components/bottom_bar/bottom_nav_bar.dart
@@ -32,13 +32,21 @@ class BottomNavBar extends ConsumerWidget {
             icon: BottomBarIcon(asset: currentToolData.svgAssetPath),
           ),
           NavigationDestination(
-            label: localizations.color,
-            icon: Icon(
-              Icons.check_box_outline_blank,
-              size: 24,
-              color: Theme.of(context).colorScheme.onSurface,
-            ),
-          ),
+              label: localizations.color,
+              icon: InkWell(
+                child: Container(
+                  height: 24.0,
+                  width: 24.0,
+                  decoration: BoxDecoration(
+                    color: ref.watch(brushToolStateProvider).paint.color,
+                    border: Border.all(
+                      color: Colors.white,
+                      width: 1.4,
+                    ),
+                    borderRadius: BorderRadius.circular(2.0),
+                  ),
+                ),
+              )),
           NavigationDestination(
             label: localizations.layers,
             icon: const BottomBarIcon(asset: 'assets/svg/ic_layers.svg'),
@@ -71,7 +79,7 @@ void _onNavigationItemSelected(int index, BuildContext context, WidgetRef ref) {
       _handleToolOptionsVisibility(ref);
       break;
     case BottomNavBarItem.COLOR:
-      _showColorPicker(context);
+      _showColorPicker(context, ref);
       break;
     default:
       return;
@@ -92,7 +100,7 @@ void _handleToolOptionsVisibility(WidgetRef ref) {
   ref.read(toolOptionsVisibilityStateProvider.notifier).toggleVisibility();
 }
 
-void _showColorPicker(BuildContext context) {
+void _showColorPicker(BuildContext context, WidgetRef ref) {
   showModalBottomSheet(
     context: context,
     isScrollControlled: true,
@@ -104,9 +112,11 @@ void _showColorPicker(BuildContext context) {
         borderRadius: BorderRadius.circular(16),
       ),
       child: ColorPicker(
-        currentColor: Colors.black,
-        onColorChanged: (color) {},
+        currentColor: ref.watch(brushToolStateProvider).paint.color,
+        onColorChanged: (newColor) {
+          ref.read(brushToolStateProvider.notifier).updateColor(newColor);
+        },
       ),
     ),
   );
-}
+}