PAINTROID-799 Add white background to color preview for transparency

Author: this-is-varunxyz

lib/ui/pages/workspace_page/components/bottom_bar/bottom_nav_bar.dart

@@ -43,19 +43,22 @@ class BottomNavBar extends ConsumerWidget {
           ),
           NavigationDestination(
             label: localizations.color,
-            icon: InkWell(
-              child: Container(
-                height: 24.0,
-                width: 24.0,
-                decoration: BoxDecoration(
-                  color: currentPaint.color,
-                  border: Border.all(
-                    color: PaintroidTheme.of(context).onSurfaceColor,
-                    width: 1.4,
-                  ),
-                  borderRadius: BorderRadius.circular(2.0),
+            icon: Container(
+
+              height: 24.0,
+              width: 24.0,
+              clipBehavior: Clip.antiAlias,
+              decoration: BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.circular(2.0),
+                border: Border.all(
+                  color: PaintroidTheme.of(context).onSurfaceColor,
+                  width: 1.4,
                 ),
               ),
+              child: Container(
+                color: currentPaint.color,
+              ),
             ),
           ),
           NavigationDestination(
@@ -72,16 +75,15 @@ class BottomNavBar extends ConsumerWidget {
       toolBoxStateProvider.select((value) => value.currentTool.type),
     );
 
-    final currentToolData = ToolData.allToolsData.firstWhere(
+    return ToolData.allToolsData.firstWhere(
       (toolData) => toolData.type == currentToolType,
       orElse: () => ToolData.BRUSH,
     );
-    return currentToolData;
   }
 }
 
 void _onNavigationItemSelected(int index, BuildContext context, WidgetRef ref) {
-  BottomNavBarItem item = BottomNavBarItem.values[index];
+  final BottomNavBarItem item = BottomNavBarItem.values[index];
   switch (item) {
     case BottomNavBarItem.TOOLS:
       _showToolBottomSheet(context);
@@ -98,7 +100,7 @@ void _onNavigationItemSelected(int index, BuildContext context, WidgetRef ref) {
 }
 
 void _showToolBottomSheet(BuildContext context) {
-  double screenHeight = MediaQuery.of(context).size.height;
+  final double screenHeight = MediaQuery.of(context).size.height;
   showModalBottomSheet(
     context: context,
     builder: (BuildContext context) => SizedBox(

packages/colorpicker/lib/src/components/color_square.dart

@@ -11,16 +11,21 @@ class ColorSquare extends ConsumerWidget {
   final Color color;
 
   @override
-  Widget build(BuildContext context, WidgetRef ref) {
-    return GestureDetector(
-      onTap: () {
-        ref.read(colorPickerStateProvider.notifier).updateColor(color);
-      },
-      child: Container(
-        decoration: BoxDecoration(
-          color: color,
+Widget build(BuildContext context, WidgetRef ref) {
+  return GestureDetector(
+    onTap: () {
+      ref.read(colorPickerStateProvider.notifier).updateColor(color);
+    },
+    child: Stack( 
+      children: [
+        Container(color: Colors.white),
+        Container(
+          decoration: BoxDecoration(
+            color: color, 
+          ),
         ),
-      ),
-    );
-  }
+      ],
+    ),
+  );
+}
 }

test/utils/bottom_nav_bar_interactions.dart

@@ -32,7 +32,7 @@ class BottomNavBarInteractions {
 
     final toolIconButton = _findIconButtonWithLabel(toolData.name);
     expect(toolIconButton, findsOneWidget);
-
+    
     await _tester.tap(toolIconButton);
     await _tester.pumpAndSettle();
     return this;
@@ -49,10 +49,10 @@ class BottomNavBarInteractions {
 
   Future<BottomNavBarInteractions> selectColor(Color color) async {
     await openColorPicker();
-
-    final colorButton = _findButtonWithColor(color);
+    
+        final colorButton = _findButtonWithColor(color);
     expect(colorButton, findsOneWidget);
-
+    
     await _tester.tap(colorButton);
     await _tester.pumpAndSettle();
     final applyButton = find.descendant(
@@ -71,29 +71,22 @@ class BottomNavBarInteractions {
   Future<BottomNavBarInteractions> checkActiveColor(Color color) async {
     final thirdNavDestination = find.byType(NavigationDestination).at(2);
     final activeColor = find.descendant(
-        of: thirdNavDestination,
-        matching: find.byWidgetPredicate((Widget widget) =>
-            widget is InkWell &&
-            widget.child is Container &&
-            (widget.child as Container).decoration is BoxDecoration &&
-            ((widget.child as Container).decoration as BoxDecoration)
-                    .color
-                    ?.toValue() ==
-                color.toValue()));
-
+      of: thirdNavDestination,
+      matching: find.byWidgetPredicate((Widget widget) =>
+          widget is Container && widget.color?.toValue() == color.toValue()),
+    );
     expect(activeColor, findsOneWidget);
     return this;
   }
 
   Finder _findButtonWithColor(Color color) {
     return find.descendant(
-      of: find.byWidgetPredicate((Widget widget) =>
-          widget is GestureDetector &&
-          widget.child is Container &&
-          (widget.child as Container).decoration is BoxDecoration &&
-          ((widget.child as Container).decoration as BoxDecoration).color ==
-              color),
-      matching: find.byType(Container),
+      of: find.byType(Stack),
+      matching: find.byWidgetPredicate((Widget widget) =>
+          widget is Container &&
+          widget.decoration is BoxDecoration &&
+          (widget.decoration as BoxDecoration).color?.toValue() ==
+              color.toValue()),
     );
   }
 

test/widget/workspace_page/bottom_control_navigation_bar_test.dart

@@ -171,8 +171,8 @@ void main() {
       expect(animatedOpacityWidget.opacity, equals(VISIBLE));
     });
   });
-
-  group('BottomNavBarItem.COLOR', () {
+  
+group('BottomNavBarItem.COLOR', () {
     testWidgets('Test if color changes on selection',
         (WidgetTester tester) async {
       const blueColor = Color(0xff0073cc);
@@ -184,5 +184,21 @@ void main() {
           (bottomNavBarInteractions) =>
               bottomNavBarInteractions.checkActiveColor(blueColor));
     });
+
+    testWidgets('Verify color preview has a white background layer for transparency',
+        (WidgetTester tester) async {
+      await tester.pumpWidget(sut);
+
+      final thirdNavDestination = find.byType(NavigationDestination).at(2);
+      final whiteBackgroundFinder = find.descendant(
+        of: thirdNavDestination,
+        matching: find.byWidgetPredicate((widget) =>
+            widget is Container &&
+            widget.decoration is BoxDecoration &&
+            (widget.decoration as BoxDecoration).color == Colors.white),
+      );
+
+      expect(whiteBackgroundFinder, findsOneWidget);
+    });
   });
-}
+}