Close color picker when click outside in composer

This commit is contained in:
dab246
2025-08-26 17:39:00 +07:00
committed by Dat H. Pham
parent ff0ac57c1d
commit a4b0885477
7 changed files with 166 additions and 150 deletions
@@ -5,7 +5,6 @@ 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:get/get.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
typedef SelectColorActionCallback = Function(Color? colorSelected);
@@ -41,117 +40,115 @@ class ColorPickerDialogBuilder {
Future<dynamic> show() async {
return Get.dialog(
PointerInterceptor(
child: AlertDialog(
title: Text(
title ?? '',
textAlign: TextAlign.center,
style: ThemeUtils.defaultTextStyleInterFont.copyWith(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black)),
titleTextStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
AlertDialog(
title: Text(
title ?? '',
textAlign: TextAlign.center,
style: ThemeUtils.defaultTextStyleInterFont.copyWith(
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,
actionsOverflowButtonSpacing: 8,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
scrollable: true,
elevation: 10,
content: ValueListenableBuilder(
valueListenable: _currentColor,
builder: (context, _, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 500,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
color: Colors.white
),
child: Center(
child: Wrap(children: AppColor.listColorsPicker
.map((color) => _itemColorWidget(context, color))
.toList(),
),
color: Colors.black)),
titleTextStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
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,
actionsOverflowButtonSpacing: 8,
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
scrollable: true,
elevation: 10,
content: ValueListenableBuilder(
valueListenable: _currentColor,
builder: (context, _, __) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 500,
decoration: const BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
color: Colors.white
),
child: Center(
child: Wrap(children: AppColor.listColorsPicker
.map((color) => _itemColorWidget(context, color))
.toList(),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: ColorCodeField(
color: _currentColor.value,
colorCodeHasColor: true,
shouldUpdate: _shouldUpdate,
onColorChanged: (Color color) {
if (AppColor.listColorsPicker.any((element) => element.toInt() == color.toInt())) {
_shouldUpdate = true;
_currentColor.value = color;
} else {
_shouldUpdate = false;
_currentColor.value = Colors.black;
_colorCode = color;
}
},
onEditFocused: (bool editInFocus) {
_shouldUpdate = editInFocus ? true : false;
},
copyPasteBehavior: const ColorPickerCopyPasteBehavior(
parseShortHexCode: true,
),
toolIcons: const ColorPickerActionButtons(
dialogActionButtons: true,
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: ColorCodeField(
color: _currentColor.value,
colorCodeHasColor: true,
shouldUpdate: _shouldUpdate,
onColorChanged: (Color color) {
if (AppColor.listColorsPicker.any((element) => element.toInt() == color.toInt())) {
_shouldUpdate = true;
_currentColor.value = color;
} else {
_shouldUpdate = false;
_currentColor.value = Colors.black;
_colorCode = color;
}
},
onEditFocused: (bool editInFocus) {
_shouldUpdate = editInFocus ? true : false;
},
copyPasteBehavior: const ColorPickerCopyPasteBehavior(
parseShortHexCode: true,
),
toolIcons: const ColorPickerActionButtons(
dialogActionButtons: true,
),
),
],
);
},
),
actions: <Widget>[
buildButtonWrapText(
textActionCancel ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal),
bgColor: AppColor.colorShadowComposer,
onTap: () => cancelActionCallback?.call()),
buildButtonWrapText(
textActionResetDefault ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal),
bgColor: Colors.white,
borderColor: Colors.black26,
onTap: () => resetToDefaultActionCallback?.call()),
buildButtonWrapText(
textActionSetColor ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500),
onTap: () {
if (!_shouldUpdate) {
setColorActionCallback?.call(_colorCode);
} else {
setColorActionCallback?.call(_currentColor.value);
}
})
],
),
],
);
},
),
actions: <Widget>[
buildButtonWrapText(
textActionCancel ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal),
bgColor: AppColor.colorShadowComposer,
onTap: () => cancelActionCallback?.call()),
buildButtonWrapText(
textActionResetDefault ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.normal),
bgColor: Colors.white,
borderColor: Colors.black26,
onTap: () => resetToDefaultActionCallback?.call()),
buildButtonWrapText(
textActionSetColor ?? '',
radius: 5,
height: 30,
textStyle: ThemeUtils.defaultTextStyleInterFont.copyWith(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w500),
onTap: () {
if (!_shouldUpdate) {
setColorActionCallback?.call(_colorCode);
} else {
setColorActionCallback?.call(_currentColor.value);
}
})
],
)
);
}