TF-733 Add ColorPickerDialogBuilder to select color
This commit is contained in:
@@ -56,6 +56,7 @@ export 'presentation/views/context_menu/simple_context_menu_action_builder.dart'
|
|||||||
export 'presentation/views/dialog/downloading_file_dialog_builder.dart';
|
export 'presentation/views/dialog/downloading_file_dialog_builder.dart';
|
||||||
export 'presentation/views/dialog/confirmation_dialog_builder.dart';
|
export 'presentation/views/dialog/confirmation_dialog_builder.dart';
|
||||||
export 'presentation/views/dialog/edit_text_dialog_builder.dart';
|
export 'presentation/views/dialog/edit_text_dialog_builder.dart';
|
||||||
|
export 'presentation/views/dialog/color_picker_dialog_builder.dart';
|
||||||
export 'presentation/views/background/background_widget_builder.dart';
|
export 'presentation/views/background/background_widget_builder.dart';
|
||||||
export 'presentation/views/html_viewer/html_content_viewer_widget.dart';
|
export 'presentation/views/html_viewer/html_content_viewer_widget.dart';
|
||||||
export 'presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
|
export 'presentation/views/html_viewer/html_content_viewer_on_web_widget.dart';
|
||||||
|
|||||||
@@ -0,0 +1,117 @@
|
|||||||
|
|
||||||
|
import 'package:core/presentation/extensions/color_extension.dart';
|
||||||
|
import 'package:core/presentation/views/button/icon_button_web.dart';
|
||||||
|
import 'package:flex_color_picker/flex_color_picker.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:pointer_interceptor/pointer_interceptor.dart';
|
||||||
|
|
||||||
|
typedef SelectColorActionCallback = Function(Color? colorSelected);
|
||||||
|
|
||||||
|
class ColorPickerDialogBuilder {
|
||||||
|
|
||||||
|
final SelectColorActionCallback? setColorActionCallback;
|
||||||
|
final VoidCallback? cancelActionCallback;
|
||||||
|
final BuildContext _context;
|
||||||
|
final Color defaultColor;
|
||||||
|
final Color _currentColor;
|
||||||
|
final String? title;
|
||||||
|
final String? textActionSetColor;
|
||||||
|
final String? textActionCancel;
|
||||||
|
final String? textActionResetDefault;
|
||||||
|
|
||||||
|
Color? _colorSelected;
|
||||||
|
|
||||||
|
ColorPickerDialogBuilder(
|
||||||
|
this._context,
|
||||||
|
this._currentColor,
|
||||||
|
{
|
||||||
|
this.title,
|
||||||
|
this.textActionSetColor,
|
||||||
|
this.textActionCancel,
|
||||||
|
this.textActionResetDefault,
|
||||||
|
this.defaultColor = Colors.black,
|
||||||
|
this.setColorActionCallback,
|
||||||
|
this.cancelActionCallback
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
Future show() async {
|
||||||
|
await showDialog(context: _context, builder: (BuildContext context) {
|
||||||
|
return PointerInterceptor(
|
||||||
|
child: AlertDialog(
|
||||||
|
title: Text(title ?? '',
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
style: const TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 20,
|
||||||
|
color: Colors.black)),
|
||||||
|
titleTextStyle: const TextStyle(
|
||||||
|
fontWeight: FontWeight.bold,
|
||||||
|
fontSize: 20,
|
||||||
|
color: Colors.black),
|
||||||
|
titlePadding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
|
||||||
|
contentPadding: const EdgeInsets.symmetric(vertical: 0, horizontal: 16),
|
||||||
|
actionsPadding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
|
||||||
|
actionsAlignment: MainAxisAlignment.center,
|
||||||
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
|
||||||
|
scrollable: true,
|
||||||
|
elevation: 10,
|
||||||
|
content: ColorPicker(
|
||||||
|
color: _currentColor,
|
||||||
|
onColorChanged: (color) => _colorSelected = color,
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
spacing: 0,
|
||||||
|
runSpacing: 0,
|
||||||
|
borderRadius: 0,
|
||||||
|
wheelDiameter: 165,
|
||||||
|
enableOpacity: false,
|
||||||
|
showColorCode: true,
|
||||||
|
colorCodeHasColor: true,
|
||||||
|
pickersEnabled: const <ColorPickerType, bool>{
|
||||||
|
ColorPickerType.wheel: true,
|
||||||
|
},
|
||||||
|
copyPasteBehavior: const ColorPickerCopyPasteBehavior(
|
||||||
|
parseShortHexCode: true,
|
||||||
|
),
|
||||||
|
actionButtons: const ColorPickerActionButtons(
|
||||||
|
dialogActionButtons: true,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
actions: <Widget>[
|
||||||
|
buildButtonWrapText(
|
||||||
|
textActionCancel ?? '',
|
||||||
|
radius: 5,
|
||||||
|
height: 30,
|
||||||
|
textStyle: const TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.normal),
|
||||||
|
bgColor: AppColor.colorShadowComposer,
|
||||||
|
onTap: () => cancelActionCallback?.call()),
|
||||||
|
buildButtonWrapText(
|
||||||
|
textActionResetDefault ?? '',
|
||||||
|
radius: 5,
|
||||||
|
height: 30,
|
||||||
|
textStyle: const TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.normal),
|
||||||
|
bgColor: Colors.white,
|
||||||
|
borderColor: Colors.black26,
|
||||||
|
onTap: () => setColorActionCallback?.call(Colors.black)),
|
||||||
|
buildButtonWrapText(
|
||||||
|
textActionSetColor ?? '',
|
||||||
|
radius: 5,
|
||||||
|
height: 30,
|
||||||
|
textStyle: const TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: FontWeight.w500),
|
||||||
|
onTap: () => setColorActionCallback?.call(_colorSelected))
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -75,6 +75,8 @@ dependencies:
|
|||||||
|
|
||||||
flutter_keyboard_visibility: 5.2.0
|
flutter_keyboard_visibility: 5.2.0
|
||||||
|
|
||||||
|
flex_color_picker: 2.5.0
|
||||||
|
|
||||||
dev_dependencies:
|
dev_dependencies:
|
||||||
flutter_test:
|
flutter_test:
|
||||||
sdk: flutter
|
sdk: flutter
|
||||||
|
|||||||
Reference in New Issue
Block a user