Kibővített színválasztó widget: 24 szín és az utolsó 5 kiemelve
This commit is contained in:
@@ -51,6 +51,7 @@ import 'package:terepi_seged/widgets/map/all_layer_overlay.dart';
|
|||||||
import 'package:terepi_seged/widgets/map/imported_layer_overlay.dart';
|
import 'package:terepi_seged/widgets/map/imported_layer_overlay.dart';
|
||||||
import 'package:terepi_seged/widgets/map/team_member_widget.dart';
|
import 'package:terepi_seged/widgets/map/team_member_widget.dart';
|
||||||
import 'package:terepi_seged/widgets/map_edit_tools/color_row.dart';
|
import 'package:terepi_seged/widgets/map_edit_tools/color_row.dart';
|
||||||
|
import 'package:terepi_seged/widgets/map_edit_tools/color_row_extended.dart';
|
||||||
import 'package:terepi_seged/widgets/map_edit_tools/map_feature_save_sheet.dart';
|
import 'package:terepi_seged/widgets/map_edit_tools/map_feature_save_sheet.dart';
|
||||||
import 'package:terepi_seged/widgets/map_edit_tools/note_item_list_sheet.dart';
|
import 'package:terepi_seged/widgets/map_edit_tools/note_item_list_sheet.dart';
|
||||||
import 'package:terepi_seged/widgets/shared_map_widgets.dart';
|
import 'package:terepi_seged/widgets/shared_map_widgets.dart';
|
||||||
@@ -1814,7 +1815,8 @@ class MapSurveyController extends GetxController implements StyleEditable {
|
|||||||
mainAxisSize: MainAxisSize.min,
|
mainAxisSize: MainAxisSize.min,
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: [
|
children: [
|
||||||
ColorRow(ctrl: this, circleSize: 34),
|
// ColorRow(ctrl: this, circleSize: 34),
|
||||||
|
ColorRowExtended(ctrl: this, circleSize: 34),
|
||||||
SizedBox(height: 8),
|
SizedBox(height: 8),
|
||||||
TextField(
|
TextField(
|
||||||
controller: labelCtrl,
|
controller: labelCtrl,
|
||||||
|
|||||||
@@ -0,0 +1,191 @@
|
|||||||
|
// Bővített színválasztó — terepi használatra optimalizálva
|
||||||
|
// Drop-in csere a ColorRow helyett — azonos konstruktor szignatúra
|
||||||
|
//
|
||||||
|
// Váltás a kódban (color_row.dart-ban):
|
||||||
|
// ColorRow(ctrl: ctrl) ← jelenlegi
|
||||||
|
// ExtendedColorRow(ctrl: ctrl) ← bővített
|
||||||
|
//
|
||||||
|
// Jellemzők:
|
||||||
|
// - 24 szín rácsban (6×4) — nagy érintési felület, kesztyűvel is kezelhető
|
||||||
|
// - Utolsó 5 használt szín külön sorban (app session alatt)
|
||||||
|
// - Animált kijelölés
|
||||||
|
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:get/get.dart';
|
||||||
|
import 'package:terepi_seged/core/style_editable.dart';
|
||||||
|
|
||||||
|
import 'style_editable.dart';
|
||||||
|
|
||||||
|
// ─── Legutóbbi színek — session szintű állapot ───────────────────────────────
|
||||||
|
|
||||||
|
class _RecentColors {
|
||||||
|
static final _list = <Color>[].obs;
|
||||||
|
static const _max = 5;
|
||||||
|
|
||||||
|
static RxList<Color> get rx => _list;
|
||||||
|
|
||||||
|
static void add(Color color) {
|
||||||
|
_list.remove(color); // duplikátum kiszűrése
|
||||||
|
_list.insert(0, color);
|
||||||
|
if (_list.length > _max) _list.removeLast();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Paletta ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
class ColorRowExtended extends StatelessWidget {
|
||||||
|
final StyleEditable ctrl;
|
||||||
|
final double circleSize;
|
||||||
|
|
||||||
|
// 24 szín — 6×4 rács
|
||||||
|
// Terepi alkalmazásra: jól elkülönülő, élénk, vakításra sem érzékeny
|
||||||
|
static const _palette = [
|
||||||
|
// Piros / narancs árnyalatok
|
||||||
|
Color(0xFFE53935), Color(0xFFFF5722),
|
||||||
|
Color(0xFFE91E8C), Color(0xFFAD1457),
|
||||||
|
// Sárga / barna
|
||||||
|
Color(0xFFFFB300), Color(0xFFF57F17),
|
||||||
|
Color(0xFF8D6E63), Color(0xFF4E342E),
|
||||||
|
// Zöld
|
||||||
|
Color(0xFF43A047), Color(0xFF1B5E20),
|
||||||
|
Color(0xFF8BC34A), Color(0xFF33691E),
|
||||||
|
// Kék / türkiz
|
||||||
|
Color(0xFF1E88E5), Color(0xFF1565C0),
|
||||||
|
Color(0xFF00897B), Color(0xFF004D40),
|
||||||
|
// Lila / indigó
|
||||||
|
Color(0xFF6C63FF), Color(0xFF4527A0),
|
||||||
|
Color(0xFF8E24AA), Color(0xFF4A148C),
|
||||||
|
// Semleges
|
||||||
|
Color(0xFF546E7A), Color(0xFF37474F),
|
||||||
|
Color(0xFFBDBDBD), Color(0xFF212121),
|
||||||
|
];
|
||||||
|
|
||||||
|
const ColorRowExtended({
|
||||||
|
required this.ctrl,
|
||||||
|
this.circleSize = 40,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
Text('Kitöltési szín',
|
||||||
|
style: TextStyle(fontSize: 13, color: Colors.grey.shade600)),
|
||||||
|
|
||||||
|
// ── Legutóbbi színek ───────────────────────────────────────
|
||||||
|
Obx(() {
|
||||||
|
final recent = _RecentColors.rx;
|
||||||
|
if (recent.isEmpty) return const SizedBox(height: 10);
|
||||||
|
return Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
Text('Legutóbbi',
|
||||||
|
style: TextStyle(fontSize: 11, color: Colors.grey.shade500)),
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
Obx(() => GridView.count(
|
||||||
|
crossAxisCount: 6,
|
||||||
|
crossAxisSpacing: 8,
|
||||||
|
mainAxisSpacing: 8,
|
||||||
|
shrinkWrap: true,
|
||||||
|
physics: const NeverScrollableScrollPhysics(),
|
||||||
|
children: recent
|
||||||
|
.map((color) => _ColorDot(
|
||||||
|
color: color,
|
||||||
|
size: circleSize,
|
||||||
|
selected: ctrl.activeEditColor.value == color,
|
||||||
|
onTap: () => _select(color),
|
||||||
|
))
|
||||||
|
.toList(),
|
||||||
|
)),
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
Text('Paletta',
|
||||||
|
style: TextStyle(fontSize: 11, color: Colors.grey.shade500)),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
|
||||||
|
const SizedBox(height: 6),
|
||||||
|
|
||||||
|
// ── Teljes paletta ─────────────────────────────────────────
|
||||||
|
Obx(() => GridView.count(
|
||||||
|
crossAxisCount: 6,
|
||||||
|
crossAxisSpacing: 8,
|
||||||
|
mainAxisSpacing: 8,
|
||||||
|
shrinkWrap: true,
|
||||||
|
physics: const NeverScrollableScrollPhysics(),
|
||||||
|
children: _palette
|
||||||
|
.map((color) => _ColorDot(
|
||||||
|
color: color,
|
||||||
|
size: circleSize,
|
||||||
|
selected: ctrl.activeEditColor.value == color,
|
||||||
|
onTap: () => _select(color),
|
||||||
|
))
|
||||||
|
.toList(),
|
||||||
|
)),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
void _select(Color color) {
|
||||||
|
ctrl.activeEditColor.value = color;
|
||||||
|
_RecentColors.add(color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Egy szín kör ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
class _ColorDot extends StatelessWidget {
|
||||||
|
final Color color;
|
||||||
|
final double size;
|
||||||
|
final bool selected;
|
||||||
|
final VoidCallback onTap;
|
||||||
|
|
||||||
|
const _ColorDot({
|
||||||
|
required this.color,
|
||||||
|
required this.size,
|
||||||
|
required this.selected,
|
||||||
|
required this.onTap,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return GestureDetector(
|
||||||
|
onTap: onTap,
|
||||||
|
child: AnimatedContainer(
|
||||||
|
duration: const Duration(milliseconds: 150),
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: color,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
border: Border.all(
|
||||||
|
color: selected
|
||||||
|
? Theme.of(context).colorScheme.onSurface
|
||||||
|
: Colors.transparent,
|
||||||
|
width: 3,
|
||||||
|
),
|
||||||
|
boxShadow: selected
|
||||||
|
? [
|
||||||
|
BoxShadow(
|
||||||
|
color: color.withOpacity(0.5),
|
||||||
|
blurRadius: 8,
|
||||||
|
spreadRadius: 2,
|
||||||
|
)
|
||||||
|
]
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
child: selected
|
||||||
|
? Icon(Icons.check, size: size * 0.45, color: _contrastColor(color))
|
||||||
|
: null,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Fehér vagy fekete pipa a szín kontrasztja alapján
|
||||||
|
Color _contrastColor(Color bg) {
|
||||||
|
final luminance = bg.computeLuminance();
|
||||||
|
return luminance > 0.4 ? Colors.black : Colors.white;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
|
|||||||
import 'package:get/get.dart';
|
import 'package:get/get.dart';
|
||||||
import 'package:terepi_seged/enums/map_edit_tool.dart';
|
import 'package:terepi_seged/enums/map_edit_tool.dart';
|
||||||
import 'package:terepi_seged/pages/map_survey/presentations/controllers/map_survey_controller.dart';
|
import 'package:terepi_seged/pages/map_survey/presentations/controllers/map_survey_controller.dart';
|
||||||
|
import 'package:terepi_seged/widgets/map_edit_tools/color_row_extended.dart';
|
||||||
import 'package:terepi_seged/widgets/map_edit_tools/note_audio_widget.dart';
|
import 'package:terepi_seged/widgets/map_edit_tools/note_audio_widget.dart';
|
||||||
import 'package:terepi_seged/widgets/map_edit_tools/note_photo_gallery.dart';
|
import 'package:terepi_seged/widgets/map_edit_tools/note_photo_gallery.dart';
|
||||||
|
|
||||||
@@ -55,7 +56,8 @@ class MapFeatureSaveSheet extends StatelessWidget {
|
|||||||
fontSize: 18, fontWeight: FontWeight.w600),
|
fontSize: 18, fontWeight: FontWeight.w600),
|
||||||
),
|
),
|
||||||
const SizedBox(height: 16),
|
const SizedBox(height: 16),
|
||||||
ColorRow(ctrl: ctrl),
|
// ColorRow(ctrl: ctrl),
|
||||||
|
ColorRowExtended(ctrl: ctrl),
|
||||||
const SizedBox(height: 18),
|
const SizedBox(height: 18),
|
||||||
OpacitySlider(ctrl: ctrl),
|
OpacitySlider(ctrl: ctrl),
|
||||||
const SizedBox(height: 10),
|
const SizedBox(height: 10),
|
||||||
|
|||||||
Reference in New Issue
Block a user