kolo/Casha
1
0
Fork 0
mirror of https://github.com/koloideal/Casha.git synced 2026-06-10 18:35:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
kolo
2026-03-21 11:20:40 +03:00
parent 215a87e7f6
commit 5c88248cf5
4 changed files with 497 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/services/card_color_service.dart
+1 -1
View File
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart'; import 'package:shared_preferences/shared_preferences.dart';
enum GradientType { linear, radial, sweep, linearReverse } enum GradientType { linear, linearReverse, radial, sweep, solid }
class CardColorService { class CardColorService {
static const _key1 = 'card_color_primary'; static const _key1 = 'card_color_primary';
lib/features/dashboard/widgets/balance_card.dart
+6 -1
View File
@@ -119,6 +119,11 @@ class BalanceCardState extends ConsumerState<BalanceCard>
], ],
stops: const [0.0, 0.25, 0.5, 0.75, 1.0], stops: const [0.0, 0.25, 0.5, 0.75, 1.0],
); );
case GradientType.solid:
return LinearGradient(
colors: [primary, primary, primary],
stops: const [0.0, 0.5, 1.0],
);
} }
} }
@@ -159,7 +164,7 @@ class BalanceCardState extends ConsumerState<BalanceCard>
..rotateY(_tiltY * 0.42), ..rotateY(_tiltY * 0.42),
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: 180, height: 220,
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
gradient: _buildGradient(primary, secondary, gradientType), gradient: _buildGradient(primary, secondary, gradientType),
lib/features/dashboard/widgets/color_editor_overlay.dart
+279 -124
View File
@@ -29,9 +29,11 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final mq = MediaQuery.of(widget.context); final mq = MediaQuery.of(widget.context);
final cardTop = mq.padding.top + kToolbarHeight + 16; final cardTop = mq.padding.top + kToolbarHeight + 16;
final cardHeight = 180.0; const cardHeight = 220.0;
final panelTop = cardTop + cardHeight + 50; final panelTop = cardTop + cardHeight + 16;
final panelBottom = mq.padding.bottom + 16;
// Fixed panel height — smaller than before, no bottom stretching
const panelHeight = 310.0;
return Material( return Material(
color: Colors.transparent, color: Colors.transparent,
@@ -40,16 +42,12 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
Positioned.fill( Positioned.fill(
child: BackdropFilter( child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20), filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container( child: Container(color: Colors.black.withOpacity(0.6)),
color: Colors.black.withOpacity(0.6),
),
), ),
), ),
Positioned.fill( Positioned.fill(
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () => dash.closeOverlay(apply: false),
dash.closeOverlay(apply: false);
},
behavior: HitTestBehavior.translucent, behavior: HitTestBehavior.translucent,
child: const SizedBox.expand(), child: const SizedBox.expand(),
), ),
@@ -73,11 +71,11 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
top: panelTop, top: panelTop,
left: 20, left: 20,
right: 20, right: 20,
bottom: panelBottom, // No bottom — height is explicit, panel won't stretch to screen bottom
child: GestureDetector( child: GestureDetector(
onTap: () {}, onTap: () {},
behavior: HitTestBehavior.opaque, behavior: HitTestBehavior.opaque,
child: _buildPanel(context, mq), child: _buildPanel(panelHeight),
), ),
), ),
], ],
@@ -85,11 +83,9 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
); );
} }
Widget _buildPanel(BuildContext context, MediaQueryData mq) { Widget _buildPanel(double panelHeight) {
return SingleChildScrollView( return Container(
physics: const ClampingScrollPhysics(), height: panelHeight,
child: Container(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 20),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(widget.context).colorScheme.surface, color: Theme.of(widget.context).colorScheme.surface,
borderRadius: BorderRadius.circular(20), borderRadius: BorderRadius.circular(20),
@@ -103,8 +99,6 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
child: StatefulBuilder( child: StatefulBuilder(
builder: (ctx, setPanelState) { builder: (ctx, setPanelState) {
final isDark = Theme.of(widget.context).brightness == Brightness.dark;
void onHSVChanged(HSVColor hsv) { void onHSVChanged(HSVColor hsv) {
setPanelState(() {}); setPanelState(() {});
dash.setState(() { dash.setState(() {
@@ -119,62 +113,153 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
} }
// In solid mode, editing is always "primary" (the solid color)
final currentHSV = dash.editingPrimary final currentHSV = dash.editingPrimary
? dash.tempPrimaryHSV ? dash.tempPrimaryHSV
: dash.tempSecondaryHSV; : dash.tempSecondaryHSV;
final isSolid = dash.tempGradientType == GradientType.solid;
return Column( return Padding(
mainAxisSize: MainAxisSize.min, padding: const EdgeInsets.fromLTRB(16, 14, 16, 14),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// ── Row 1: [──Primary──] [──Secondary──] | [Solid] [X] ──
Row( Row(
children: [ children: [
PanelTab( // Expanded tabs fill available width equally
Expanded(
child: PanelTab(
label: 'Primary', label: 'Primary',
isSelected: dash.editingPrimary, isSelected: dash.editingPrimary && !isSolid,
color: dash.tempPrimary, color: dash.tempPrimary,
onTap: () { onTap: isSolid ? null : () {
dash.setState(() => dash.editingPrimary = true); dash.setState(() => dash.editingPrimary = true);
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
), ),
const SizedBox(width: 10), ),
PanelTab( const SizedBox(width: 6),
Expanded(
child: PanelTab(
label: 'Secondary', label: 'Secondary',
isSelected: !dash.editingPrimary, isSelected: !dash.editingPrimary && !isSolid,
color: dash.tempSecondary, color: dash.tempSecondary,
onTap: () { onTap: isSolid ? null : () {
dash.setState(() => dash.editingPrimary = false); dash.setState(() => dash.editingPrimary = false);
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
), ),
const Spacer(), ),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Container(
width: 1,
height: 20,
color: Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.15),
),
),
// Solid toggle
GestureDetector(
onTap: () {
dash.setState(() {
dash.tempGradientType = isSolid
? GradientType.linear
: GradientType.solid;
});
setPanelState(() {});
dash.overlayEntry?.markNeedsBuild();
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.symmetric(
horizontal: 10, vertical: 6),
decoration: BoxDecoration(
color: isSolid
? const Color(0xFF7C6DED).withOpacity(0.15)
: Colors.transparent,
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSolid
? const Color(0xFF7C6DED)
: Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.2),
width: 1.5,
),
),
child: Text(
'Solid',
style: TextStyle(
fontSize: 11,
fontWeight: isSolid
? FontWeight.w600
: FontWeight.normal,
color: isSolid
? const Color(0xFF7C6DED)
: Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.5),
),
),
),
),
const SizedBox(width: 8),
// Close button
GestureDetector( GestureDetector(
onTap: () => dash.closeOverlay(apply: false), onTap: () => dash.closeOverlay(apply: false),
child: Container( child: Container(
width: 32, width: 30,
height: 32, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
color: const Color(0xFFE05C6B).withOpacity(0.15), color: const Color(0xFFE05C6B).withOpacity(0.15),
shape: BoxShape.circle, shape: BoxShape.circle,
), ),
child: const Icon( child: const Icon(Icons.close_rounded,
Icons.close_rounded, size: 16, color: Color(0xFFE05C6B)),
size: 18,
color: Color(0xFFE05C6B),
),
), ),
), ),
], ],
), ),
const SizedBox(height: 16),
ClipRRect( const SizedBox(height: 10),
borderRadius: BorderRadius.circular(12),
// ── Spectrum + hue + preview ──
// LayoutBuilder captures finite height from Expanded.
// Spectrum alone is wrapped in IgnorePointer when solid.
// Hue slider is ALWAYS active (used to pick the solid color too).
Expanded(
child: LayoutBuilder(
builder: (lbCtx, constraints) {
// Reserve space for: hue(20) + gap(8) + preview(26) + 2×gap(8) = 62
const reservedBelow = 62.0;
final spectrumH =
(constraints.maxHeight - reservedBelow).clamp(
40.0, double.infinity);
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Spectrum — dimmed & blocked in Solid mode
IgnorePointer(
ignoring: isSolid,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: isSolid ? 0.3 : 1.0,
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: SizedBox( child: SizedBox(
height: 160, height: spectrumH,
width: double.infinity,
child: ColorPickerArea( child: ColorPickerArea(
currentHSV, currentHSV,
onHSVChanged, onHSVChanged,
@@ -182,11 +267,14 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
), ),
), ),
const SizedBox(height: 12), ),
),
const SizedBox(height: 8),
// Hue slider — ALWAYS active (works for both gradient & solid)
ClipRRect( ClipRRect(
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(6),
child: SizedBox( child: SizedBox(
height: 22, height: 20,
child: ColorPickerSlider( child: ColorPickerSlider(
TrackType.hue, TrackType.hue,
currentHSV, currentHSV,
@@ -195,12 +283,21 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
), ),
), ),
const SizedBox(height: 12), const SizedBox(height: 8),
Row( // Color hex preview row
IgnorePointer(
ignoring: isSolid,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: isSolid ? 0.4 : 1.0,
child: SizedBox(
height: 26,
child: Row(
children: [ children: [
GestureDetector( GestureDetector(
onTap: () { onTap: () {
dash.setState(() => dash.editingPrimary = true); dash.setState(
() => dash.editingPrimary = true);
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
@@ -208,22 +305,26 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Container( Container(
width: 28, width: 22,
height: 28, height: 22,
decoration: BoxDecoration( decoration: BoxDecoration(
color: dash.tempPrimary, color: dash.tempPrimary,
borderRadius: BorderRadius.circular(8), borderRadius:
BorderRadius.circular(6),
border: dash.editingPrimary border: dash.editingPrimary
? Border.all(color: Colors.white, width: 2) ? Border.all(
color: Colors.white,
width: 2)
: Border.all( : Border.all(
color: Colors.transparent, width: 2), color: Colors.transparent,
width: 2),
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 5),
Text( Text(
'#${dash.tempPrimary.value.toRadixString(16).substring(2).toUpperCase()}', '#${dash.tempPrimary.value.toRadixString(16).substring(2).toUpperCase()}',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 11,
fontFamily: 'monospace', fontFamily: 'monospace',
fontWeight: dash.editingPrimary fontWeight: dash.editingPrimary
? FontWeight.w600 ? FontWeight.w600
@@ -232,17 +333,20 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
.colorScheme .colorScheme
.onSurface .onSurface
.withOpacity( .withOpacity(
dash.editingPrimary ? 0.8 : 0.4, dash.editingPrimary
), ? 0.8
: 0.4),
), ),
), ),
], ],
), ),
), ),
const Spacer(), const Spacer(),
if (!isSolid)
GestureDetector( GestureDetector(
onTap: () { onTap: () {
dash.setState(() => dash.editingPrimary = false); dash.setState(() =>
dash.editingPrimary = false);
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
@@ -252,7 +356,7 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
Text( Text(
'#${dash.tempSecondary.value.toRadixString(16).substring(2).toUpperCase()}', '#${dash.tempSecondary.value.toRadixString(16).substring(2).toUpperCase()}',
style: TextStyle( style: TextStyle(
fontSize: 12, fontSize: 11,
fontFamily: 'monospace', fontFamily: 'monospace',
fontWeight: !dash.editingPrimary fontWeight: !dash.editingPrimary
? FontWeight.w600 ? FontWeight.w600
@@ -261,21 +365,27 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
.colorScheme .colorScheme
.onSurface .onSurface
.withOpacity( .withOpacity(
!dash.editingPrimary ? 0.8 : 0.4, !dash.editingPrimary
? 0.8
: 0.4),
), ),
), ),
), const SizedBox(width: 5),
const SizedBox(width: 8),
Container( Container(
width: 28, width: 22,
height: 28, height: 22,
decoration: BoxDecoration( decoration: BoxDecoration(
color: dash.tempSecondary, color: dash.tempSecondary,
borderRadius: BorderRadius.circular(8), borderRadius:
BorderRadius.circular(6),
border: !dash.editingPrimary border: !dash.editingPrimary
? Border.all(color: Colors.white, width: 2) ? Border.all(
color: Colors.white,
width: 2)
: Border.all( : Border.all(
color: Colors.transparent, width: 2), color:
Colors.transparent,
width: 2),
), ),
), ),
], ],
@@ -283,48 +393,66 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
), ),
], ],
), ),
const SizedBox(height: 16),
Text(
'Gradient Style',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.6),
), ),
), ),
const SizedBox(height: 10), ),
Row( ],
children: GradientType.values.map((type) { );
},
),
),
const SizedBox(height: 8),
// ── Gradient type row (dimmed when Solid) ──
IgnorePointer(
ignoring: isSolid,
child: AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: isSolid ? 0.3 : 1.0,
child: Row(
children: GradientType.values
.where((t) => t != GradientType.solid)
.map((type) {
final isSelected = dash.tempGradientType == type; final isSelected = dash.tempGradientType == type;
final label = switch (type) { final label = switch (type) {
GradientType.linear => 'Linear', GradientType.linear => 'Linear',
GradientType.linearReverse => 'Reverse', GradientType.linearReverse => 'Reverse',
GradientType.radial => 'Radial', GradientType.radial => 'Radial',
GradientType.sweep => 'Sweep', GradientType.sweep => 'Sweep',
GradientType.solid => '',
}; };
final icon = switch (type) { final icon = switch (type) {
GradientType.linear => Icons.trending_flat_rounded, GradientType.linear => Icons.trending_flat_rounded,
GradientType.linearReverse => Icons.swap_horiz_rounded, GradientType.linearReverse =>
Icons.swap_horiz_rounded,
GradientType.radial => Icons.blur_circular_rounded, GradientType.radial => Icons.blur_circular_rounded,
GradientType.sweep => Icons.rotate_right_rounded, GradientType.sweep => Icons.rotate_right_rounded,
GradientType.solid => Icons.square_rounded,
}; };
return Expanded( return Expanded(
child: Padding( child: Padding(
padding: const EdgeInsets.only(right: 8), padding: const EdgeInsets.only(right: 6),
child: GestureDetector( child: GestureDetector(
onTap: () { onTap: () {
dash.setState(() => dash.tempGradientType = type); dash.setState(
() => dash.tempGradientType = type);
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
child: AnimatedContainer( child: AnimatedContainer(
duration: const Duration(milliseconds: 150), duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.symmetric(vertical: 8), padding:
const EdgeInsets.symmetric(vertical: 5),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isSelected color: isSelected
? const Color(0xFF7C6DED).withOpacity(0.15) ? const Color(0xFF7C6DED)
: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.05), .withOpacity(0.15)
borderRadius: BorderRadius.circular(10), : Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.05),
borderRadius: BorderRadius.circular(8),
border: Border.all( border: Border.all(
color: isSelected color: isSelected
? const Color(0xFF7C6DED) ? const Color(0xFF7C6DED)
@@ -335,22 +463,28 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
child: Column( child: Column(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
children: [ children: [
Icon( Icon(icon,
icon, size: 15,
size: 18,
color: isSelected color: isSelected
? const Color(0xFF7C6DED) ? const Color(0xFF7C6DED)
: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.5), : Theme.of(widget.context)
), .colorScheme
const SizedBox(height: 4), .onSurface
.withOpacity(0.45)),
const SizedBox(height: 2),
Text( Text(
label, label,
style: TextStyle( style: TextStyle(
fontSize: 10, fontSize: 9,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal, fontWeight: isSelected
? FontWeight.w600
: FontWeight.normal,
color: isSelected color: isSelected
? const Color(0xFF7C6DED) ? const Color(0xFF7C6DED)
: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.5), : Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.45),
), ),
), ),
], ],
@@ -361,44 +495,57 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
); );
}).toList(), }).toList(),
), ),
const SizedBox(height: 16), ),
),
const SizedBox(height: 8),
// ── Reset + Apply ──
Row( Row(
children: [ children: [
Expanded( Expanded(
child: OutlinedButton.icon( child: OutlinedButton.icon(
onPressed: () { onPressed: () {
final isDark = Theme.of(widget.context).brightness == Brightness.dark; final isDarkTheme =
final defPrimary = isDark Theme.of(widget.context).brightness ==
Brightness.dark;
final defP = isDarkTheme
? CardColorService.defaultPrimary ? CardColorService.defaultPrimary
: CardColorService.defaultPrimaryLight; : CardColorService.defaultPrimaryLight;
final defSecondary = isDark final defS = isDarkTheme
? CardColorService.defaultSecondary ? CardColorService.defaultSecondary
: CardColorService.defaultSecondaryLight; : CardColorService.defaultSecondaryLight;
dash.setState(() { dash.setState(() {
dash.tempPrimary = defPrimary; dash.tempPrimary = defP;
dash.tempSecondary = defSecondary; dash.tempSecondary = defS;
dash.tempPrimaryHSV = HSVColor.fromColor(defPrimary); dash.tempPrimaryHSV = HSVColor.fromColor(defP);
dash.tempSecondaryHSV = HSVColor.fromColor(defSecondary); dash.tempSecondaryHSV = HSVColor.fromColor(defS);
dash.tempGradientType = GradientType.linear; dash.tempGradientType = GradientType.linear;
}); });
setPanelState(() {}); setPanelState(() {});
dash.overlayEntry?.markNeedsBuild(); dash.overlayEntry?.markNeedsBuild();
}, },
icon: const Icon(Icons.restart_alt_rounded, size: 16), icon: const Icon(Icons.restart_alt_rounded, size: 15),
label: const Text('Reset'), label: const Text('Reset',
style: TextStyle(fontSize: 13)),
style: OutlinedButton.styleFrom( style: OutlinedButton.styleFrom(
foregroundColor: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.7), foregroundColor: Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.7),
side: BorderSide( side: BorderSide(
color: Theme.of(widget.context).colorScheme.onSurface.withOpacity(0.2), color: Theme.of(widget.context)
.colorScheme
.onSurface
.withOpacity(0.2),
), ),
padding: const EdgeInsets.symmetric(vertical: 14), padding: const EdgeInsets.symmetric(vertical: 10),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(12)),
), ),
), ),
), ),
), const SizedBox(width: 10),
const SizedBox(width: 12),
Expanded( Expanded(
flex: 2, flex: 2,
child: ElevatedButton( child: ElevatedButton(
@@ -406,24 +553,22 @@ class _FullScreenBlurOverlayState extends State<FullScreenBlurOverlay> {
style: ElevatedButton.styleFrom( style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF7C6DED), backgroundColor: const Color(0xFF7C6DED),
foregroundColor: Colors.white, foregroundColor: Colors.white,
padding: const EdgeInsets.symmetric(vertical: 14), padding: const EdgeInsets.symmetric(vertical: 10),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(14), borderRadius: BorderRadius.circular(12)),
),
),
child: const Text(
'Apply',
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
), ),
child: const Text('Apply',
style: TextStyle(
fontWeight: FontWeight.w700, fontSize: 14)),
), ),
), ),
], ],
), ),
], ],
),
); );
}, },
), ),
),
); );
} }
} }
@@ -432,20 +577,21 @@ class PanelTab extends StatelessWidget {
final String label; final String label;
final bool isSelected; final bool isSelected;
final Color color; final Color color;
final VoidCallback onTap; final VoidCallback? onTap;
const PanelTab({ const PanelTab({
super.key, super.key,
required this.label, required this.label,
required this.isSelected, required this.isSelected,
required this.color, required this.color,
required this.onTap, this.onTap,
}); });
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final isDark = Theme.of(context).brightness == Brightness.dark; final isDark = Theme.of(context).brightness == Brightness.dark;
final unselectedBorder = isDark ? Colors.white24 : const Color(0xFFCCCCDD); final unselectedBorder =
isDark ? Colors.white24 : const Color(0xFFCCCCDD);
final unselectedText = isDark final unselectedText = isDark
? Colors.white60 ? Colors.white60
: Theme.of(context).colorScheme.onSurface.withOpacity(0.5); : Theme.of(context).colorScheme.onSurface.withOpacity(0.5);
@@ -454,7 +600,9 @@ class PanelTab extends StatelessWidget {
onTap: onTap, onTap: onTap,
child: AnimatedContainer( child: AnimatedContainer(
duration: const Duration(milliseconds: 150), duration: const Duration(milliseconds: 150),
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8), // Fill full width of Expanded slot (no padding-based width)
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: isSelected ? color.withOpacity(0.15) : Colors.transparent, color: isSelected ? color.withOpacity(0.15) : Colors.transparent,
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
@@ -465,10 +613,11 @@ class PanelTab extends StatelessWidget {
), ),
child: Row( child: Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
Container( Container(
width: 14, width: 10,
height: 14, height: 10,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color, color: color,
shape: BoxShape.circle, shape: BoxShape.circle,
@@ -478,15 +627,21 @@ class PanelTab extends StatelessWidget {
), ),
), ),
), ),
const SizedBox(width: 8), const SizedBox(width: 6),
Text( Flexible(
child: Text(
label, label,
overflow: TextOverflow.ellipsis,
maxLines: 1,
textAlign: TextAlign.center,
style: TextStyle( style: TextStyle(
fontSize: 13, fontSize: 12,
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal, fontWeight:
isSelected ? FontWeight.w600 : FontWeight.normal,
color: isSelected ? color : unselectedText, color: isSelected ? color : unselectedText,
), ),
), ),
),
], ],
), ),
), ),
lib/features/settings/screen.dart
+17 -5
View File
@@ -574,16 +574,26 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
Padding( Padding(
padding: const EdgeInsets.only(bottom: 24), padding: const EdgeInsets.only(bottom: 24),
child: Center( child: Center(
child: RichText( child: Builder(
builder: (context) {
final isDark = Theme.of(context).brightness == Brightness.dark;
final baseColor = isDark
? Colors.white.withOpacity(0.25)
: Colors.black.withOpacity(0.25);
final emphasisColor = isDark
? Colors.white.withOpacity(0.35)
: Colors.black.withOpacity(0.35);
return RichText(
textAlign: TextAlign.center, textAlign: TextAlign.center,
text: const TextSpan( text: TextSpan(
style: TextStyle(fontSize: 13, color: Colors.white30), style: TextStyle(fontSize: 13, color: baseColor),
children: [ children: [
TextSpan( TextSpan(
text: 'casha', text: 'casha',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white38, color: emphasisColor,
), ),
), ),
TextSpan( TextSpan(
@@ -594,11 +604,13 @@ class _SettingsScreenState extends ConsumerState<SettingsScreen> {
text: 'kolo', text: 'kolo',
style: TextStyle( style: TextStyle(
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.white38, color: emphasisColor,
), ),
), ),
], ],
), ),
);
},
), ),
), ),
), ),