Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
AsCress merged 7 commits into from
Jun 3, 2025
Merged

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

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
84cf3d8
Fixed color palettes according to the display and set initial color t…
Vishveshwara May 31, 2025
565af5b
Added color provider
Vishveshwara May 31, 2025
0186bdc
Fixed initialisation of color
Vishveshwara May 31, 2025
c3560e9
fixed comment
Vishveshwara May 31, 2025
e26f341
implemented getIt for ColorPaletteProvider
Vishveshwara Jun 2, 2025
67ab9f5
updated pubspec.yaml for getit package
Vishveshwara Jun 2, 2025
2e3cb63
Used ChangeNotifierProvider in display_selection_screen.dart instead …
Vishveshwara Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import 'package:flutter/material.dart';
import 'package:magic_epaper_app/provider/image_loader.dart';
import 'package:magic_epaper_app/provider/color_palette_provider.dart';
import 'package:provider/provider.dart';
import 'package:magic_epaper_app/view/display_selection_screen.dart';

void main() {
runApp(MultiProvider(providers: [
ChangeNotifierProvider(create: (context) => ImageLoader()),
ChangeNotifierProvider(create: (context) => ColorPaletteProvider()),
Copy link
Copy Markdown
Contributor

@AsCress AsCress May 31, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to add this as a ChangeNotiferProvider for the whole app if we're using this only in a certain screen ?

Copy link
Copy Markdown
Contributor Author

@Vishveshwara Vishveshwara Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @AsCress , i am planning to add color channel adjustments, to control red , black , white threshold , so this provider should work for image_editor.dart as well, where i am planning to add it.

Copy link
Copy Markdown
Contributor

@AsCress AsCress Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Vishveshwara Then maybe inject it using getIt ?

Copy link
Copy Markdown
Contributor Author

@Vishveshwara Vishveshwara Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

okay , I will try using getIt and update this pr

Copy link
Copy Markdown
Contributor Author

@Vishveshwara Vishveshwara Jun 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have implemented it using getIt below, since i am updating the colors of the ColorPaletteProvider in only the display_selection_screen , what is the actual benifit using getIt ? since provider can do the same function, can you please explain this

], child: const MyApp()));
}

Expand Down
4 changes: 1 addition & 3 deletions lib/pro_image_editor/features/bottom_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
///
Expand Down Expand Up @@ -136,7 +135,6 @@ class _BottomBarCustomState extends State<BottomBarCustom> {
? Expanded(
child: ColorPickerCustom(
onColorChanged: widget.onColorChanged,
initColor: widget.initColor,
),
)
: _buildLineWidths(),
Expand Down
15 changes: 6 additions & 9 deletions lib/pro_image_editor/features/color_picker.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
// Flutter imports:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:magic_epaper_app/provider/color_palette_provider.dart';

/// A stateful widget that provides a color picker inspired by WhatsApp.
///
Expand All @@ -23,7 +25,6 @@ class ColorPickerCustom extends StatefulWidget {
const ColorPickerCustom({
super.key,
required this.onColorChanged,
required this.initColor,
});

/// Callback for handling color changes.
Expand All @@ -36,20 +37,15 @@ class ColorPickerCustom extends StatefulWidget {
///
/// This color sets the initial value of the picker, providing a starting
/// point for color selection.
final Color initColor;
final Color initColor = Colors.black;

@override
State<ColorPickerCustom> createState() => _ColorPickerCustomState();
}

class _ColorPickerCustomState extends State<ColorPickerCustom> {
Color _selectedColor = Colors.black;

final List<Color> _colors = [
Colors.white,
Colors.black,
Colors.red,
];
late Color _selectedColor;
List<Color> _colors = [];

@override
void initState() {
Expand All @@ -59,6 +55,7 @@ class _ColorPickerCustomState extends State<ColorPickerCustom> {

@override
Widget build(BuildContext context) {
_colors = context.watch<ColorPaletteProvider>().colors;
return ListView.builder(
padding: const EdgeInsets.symmetric(horizontal: 14),
scrollDirection: Axis.horizontal,
Expand Down
2 changes: 1 addition & 1 deletion lib/pro_image_editor/features/movable_background_image.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -439,6 +439,7 @@ class _MovableBackgroundImageExampleState
bodyItems: _buildPaintEditorBody,
),
style: const PaintEditorStyle(
initialColor: Colors.black,
uiOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Colors.black,
),
Expand Down Expand Up @@ -586,7 +587,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);
Expand Down
1 change: 0 additions & 1 deletion lib/pro_image_editor/features/text_bottom_bar.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ class _TextBottomBarState extends State<TextBottomBar> {
? Expanded(
child: ColorPickerCustom(
onColorChanged: widget.onColorChanged,
initColor: widget.initColor,
),
)
: Expanded(
Expand Down
12 changes: 12 additions & 0 deletions lib/provider/color_palette_provider.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
}
}
6 changes: 6 additions & 0 deletions lib/view/display_selection_screen.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ 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 {
Expand Down Expand Up @@ -83,6 +85,10 @@ class _DisplaySelectionScreenState extends State<DisplaySelectionScreen> {
child: ElevatedButton(
onPressed: isEnabled
? () {
context.read<ColorPaletteProvider>().updateColors(
displays[selectedIndex].colors,
);

Navigator.push(
context,
MaterialPageRoute(
Expand Down