Close color picker when click outside in composer
This commit is contained in:
@@ -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);
|
||||
}
|
||||
})
|
||||
],
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user