fix: create color palette based on display's supported colors (#40)

Vishveshwara · web-flow · commit 571ed9b1879d · 2025-06-03T15:11:16.000+05:30
* Fixed color palettes according to the display and set initial color to black

* Added color provider

* Fixed initialisation of color

* fixed comment

* implemented getIt for ColorPaletteProvider

* updated pubspec.yaml for getit package

* Used ChangeNotifierProvider in display_selection_screen.dart instead of main.dart and used getit to get the colors in color_picker.dart
diff --git a/lib/main.dart b/lib/main.dart
@@ -1,9 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:magic_epaper_app/provider/getitlocator.dart';
 import 'package:magic_epaper_app/provider/image_loader.dart';
 import 'package:provider/provider.dart';
 import 'package:magic_epaper_app/view/display_selection_screen.dart';
 
 void main() {
+  setupLocator();
   runApp(MultiProvider(providers: [
     ChangeNotifierProvider(create: (context) => ImageLoader()),
   ], child: const MyApp()));
diff --git a/lib/pro_image_editor/features/bottom_bar.dart b/lib/pro_image_editor/features/bottom_bar.dart
@@ -33,7 +33,6 @@ class BottomBarCustom extends StatefulWidget {
     required this.configs,
     required this.strokeWidth,
     required this.onSetLineWidth,
-    required this.initColor,
     required this.onColorChanged,
     this.iconStrokeWidthThin = ProImageEditorIcons.penSize1,
     this.iconStrokeWidthMedium = ProImageEditorIcons.penSize2,
@@ -62,7 +61,7 @@ class BottomBarCustom extends StatefulWidget {
   ///
   /// This color sets the initial paint color, providing a starting point
   /// for color customization.
-  final Color initColor;
+  final Color initColor = Colors.black;
 
   /// Callback function for handling color changes.
   ///
@@ -136,7 +135,6 @@ class _BottomBarCustomState extends State<BottomBarCustom> {
                     ? Expanded(
                         child: ColorPickerCustom(
                           onColorChanged: widget.onColorChanged,
-                          initColor: widget.initColor,
                         ),
                       )
                     : _buildLineWidths(),
diff --git a/lib/pro_image_editor/features/color_picker.dart b/lib/pro_image_editor/features/color_picker.dart
@@ -1,5 +1,7 @@
 // Flutter imports:
 import 'package:flutter/material.dart';
+import 'package:magic_epaper_app/provider/color_palette_provider.dart';
+import 'package:magic_epaper_app/provider/getitlocator.dart';
 
 /// A stateful widget that provides a color picker inspired by WhatsApp.
 ///
@@ -23,7 +25,6 @@ class ColorPickerCustom extends StatefulWidget {
   const ColorPickerCustom({
     super.key,
     required this.onColorChanged,
-    required this.initColor,
   });
 
   /// Callback for handling color changes.
@@ -36,26 +37,14 @@ class ColorPickerCustom extends StatefulWidget {
   ///
   /// This color sets the initial value of the picker, providing a starting
   /// point for color selection.
-  final Color initColor;
 
   @override
   State<ColorPickerCustom> createState() => _ColorPickerCustomState();
 }
 
 class _ColorPickerCustomState extends State<ColorPickerCustom> {
   Color _selectedColor = Colors.black;
-
-  final List<Color> _colors = [
-    Colors.white,
-    Colors.black,
-    Colors.red,
-  ];
-
-  @override
-  void initState() {
-    super.initState();
-    _selectedColor = widget.initColor;
-  }
+  final List<Color> _colors = getIt<ColorPaletteProvider>().colors;
 
   @override
   Widget build(BuildContext context) {
@@ -67,10 +56,8 @@ class _ColorPickerCustomState extends State<ColorPickerCustom> {
       itemBuilder: (context, index) {
         Color color = _colors[index];
         bool selected = _selectedColor == color;
-
         double size = !selected ? 20 : 24;
         double borderWidth = !selected ? 2.5 : 4;
-
         return Center(
           child: GestureDetector(
             onTap: () {
diff --git a/lib/pro_image_editor/features/movable_background_image.dart b/lib/pro_image_editor/features/movable_background_image.dart
@@ -443,6 +443,7 @@ class _MovableBackgroundImageExampleState
                 bodyItems: _buildPaintEditorBody,
               ),
               style: const PaintEditorStyle(
+                initialColor: Colors.black,
                 uiOverlayStyle: SystemUiOverlayStyle(
                   statusBarColor: Colors.black,
                 ),
@@ -590,7 +591,6 @@ List<ReactiveWidget> _buildPaintEditorBody(
       builder: (_) => BottomBarCustom(
         configs: paintEditor.configs,
         strokeWidth: paintEditor.paintCtrl.strokeWidth,
-        initColor: paintEditor.paintCtrl.color,
         onColorChanged: (color) {
           paintEditor.paintCtrl.setColor(color);
           paintEditor.uiPickerStream.add(null);
diff --git a/lib/pro_image_editor/features/text_bottom_bar.dart b/lib/pro_image_editor/features/text_bottom_bar.dart
@@ -124,7 +124,6 @@ class _TextBottomBarState extends State<TextBottomBar> {
                     ? Expanded(
                         child: ColorPickerCustom(
                           onColorChanged: widget.onColorChanged,
-                          initColor: widget.initColor,
                         ),
                       )
                     : Expanded(
diff --git a/lib/provider/color_palette_provider.dart b/lib/provider/color_palette_provider.dart
@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class ColorPaletteProvider extends ChangeNotifier {
+  List<Color> _colors = [];
+
+  List<Color> get colors => _colors;
+
+  void updateColors(List<Color> newColors) {
+    _colors = newColors;
+    notifyListeners();
+  }
+}
diff --git a/lib/provider/getitlocator.dart b/lib/provider/getitlocator.dart
@@ -0,0 +1,9 @@
+import 'package:get_it/get_it.dart';
+import 'package:magic_epaper_app/provider/color_palette_provider.dart';
+
+final GetIt getIt = GetIt.instance;
+
+void setupLocator() {
+  getIt.registerLazySingleton<ColorPaletteProvider>(
+      () => ColorPaletteProvider());
+}
diff --git a/lib/view/display_selection_screen.dart b/lib/view/display_selection_screen.dart
@@ -1,9 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:magic_epaper_app/constants.dart';
+import 'package:magic_epaper_app/provider/getitlocator.dart';
 import 'package:magic_epaper_app/util/epd/epd.dart';
 import 'package:magic_epaper_app/util/epd/gdey037z03.dart';
 import 'package:magic_epaper_app/util/epd/gdey037z03bw.dart';
 import 'package:magic_epaper_app/view/image_editor.dart';
+import 'package:provider/provider.dart';
+import 'package:magic_epaper_app/provider/color_palette_provider.dart';
 import 'package:magic_epaper_app/view/widget/display_card.dart';
 
 class DisplaySelectionScreen extends StatefulWidget {
@@ -19,60 +22,65 @@ class _DisplaySelectionScreenState extends State<DisplaySelectionScreen> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.white,
-      appBar: AppBar(
-        backgroundColor: colorAccent,
-        elevation: 0,
-        title: const Padding(
-          padding: EdgeInsets.fromLTRB(5, 16, 16, 5),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text('Magic ePaper',
-                  style: TextStyle(
-                    fontSize: 24,
-                    fontWeight: FontWeight.bold,
-                    color: Colors.white,
-                  )),
-              SizedBox(height: 8),
-              Text('Select your ePaper display type',
-                  style: TextStyle(
-                    fontSize: 16,
-                    color: Colors.white,
-                  )),
-            ],
-          ),
-        ),
-        toolbarHeight: 85,
-      ),
-      body: SafeArea(
-        child: Padding(
-          padding: const EdgeInsets.fromLTRB(10.0, 14, 16.0, 16.0),
-          child: Column(
-            children: [
-              Expanded(
-                child: GridView.builder(
-                  gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-                    crossAxisCount: 2,
-                    childAspectRatio: 0.6,
-                    mainAxisSpacing: 8,
-                    crossAxisSpacing: 8,
-                  ),
-                  itemCount: displays.length,
-                  itemBuilder: (context, index) => DisplayCard(
-                    display: displays[index],
-                    isSelected: selectedIndex == index,
-                    onTap: () => setState(() => selectedIndex = index),
-                  ),
+    return ChangeNotifierProvider<ColorPaletteProvider>(
+        create: (_) => getIt<ColorPaletteProvider>(),
+        builder: (context, child) {
+          return Scaffold(
+            backgroundColor: Colors.white,
+            appBar: AppBar(
+              backgroundColor: colorAccent,
+              elevation: 0,
+              title: const Padding(
+                padding: EdgeInsets.fromLTRB(5, 16, 16, 5),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text('Magic ePaper',
+                        style: TextStyle(
+                          fontSize: 24,
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white,
+                        )),
+                    SizedBox(height: 8),
+                    Text('Select your ePaper display type',
+                        style: TextStyle(
+                          fontSize: 16,
+                          color: Colors.white,
+                        )),
+                  ],
                 ),
               ),
-              _buildContinueButton(context),
-            ],
-          ),
-        ),
-      ),
-    );
+              toolbarHeight: 85,
+            ),
+            body: SafeArea(
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(10.0, 14, 16.0, 16.0),
+                child: Column(
+                  children: [
+                    Expanded(
+                      child: GridView.builder(
+                        gridDelegate:
+                            const SliverGridDelegateWithFixedCrossAxisCount(
+                          crossAxisCount: 2,
+                          childAspectRatio: 0.6,
+                          mainAxisSpacing: 8,
+                          crossAxisSpacing: 8,
+                        ),
+                        itemCount: displays.length,
+                        itemBuilder: (context, index) => DisplayCard(
+                          display: displays[index],
+                          isSelected: selectedIndex == index,
+                          onTap: () => setState(() => selectedIndex = index),
+                        ),
+                      ),
+                    ),
+                    _buildContinueButton(context),
+                  ],
+                ),
+              ),
+            ),
+          );
+        });
   }
 
   Widget _buildContinueButton(BuildContext context) {
@@ -83,6 +91,10 @@ class _DisplaySelectionScreenState extends State<DisplaySelectionScreen> {
       child: ElevatedButton(
         onPressed: isEnabled
             ? () {
+                context.read<ColorPaletteProvider>().updateColors(
+                      displays[selectedIndex].colors,
+                    );
+
                 Navigator.push(
                   context,
                   MaterialPageRoute(
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -41,6 +41,7 @@ dependencies:
   mime: ^2.0.0
   intl: ^0.19.0
   path_provider: ^2.0.15
+  get_it: ^8.0.3
 
 dev_dependencies:
   flutter_test:

Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,6 @@ class _TextBottomBarState extends State<TextBottomBar> {`
`124`	`124`	`? Expanded(`
`125`	`125`	`child: ColorPickerCustom(`
`126`	`126`	`onColorChanged: widget.onColorChanged,`
`127`		`- initColor: widget.initColor,`
`128`	`127`	`),`
`129`	`128`	`)`
`130`	`129`	`: Expanded(`