Compact language switcher layout

This commit is contained in:
zsolt
2026-08-13 14:04:59 +02:00
parent 1809da2e4d
commit e56abfb2aa
+136 -5
View File
@@ -459,8 +459,8 @@ class _HomeShellState extends State<HomeShell> {
child: Row(
children: [
Container(
width: 42,
height: 42,
width: 38,
height: 38,
decoration: BoxDecoration(
color: sage,
borderRadius: BorderRadius.circular(15),
@@ -472,7 +472,7 @@ class _HomeShellState extends State<HomeShell> {
size: 24,
),
),
const SizedBox(width: 10),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
@@ -500,7 +500,7 @@ class _HomeShellState extends State<HomeShell> {
),
),
const SizedBox(height: 2),
LanguageSwitcher(
CompactLanguageSwitcher(
languageCode: widget.languageCode,
onChanged: widget.onLanguageChanged,
labels: text,
@@ -527,7 +527,7 @@ class _HomeShellState extends State<HomeShell> {
style: IconButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: sage,
minimumSize: const Size(36, 36),
minimumSize: const Size(32, 32),
tapTargetSize:
MaterialTapTargetSize.shrinkWrap,
padding: EdgeInsets.zero,
@@ -1350,3 +1350,134 @@ class _LanguagePill extends StatelessWidget {
);
}
}
class CompactLanguageSwitcher extends StatelessWidget {
const CompactLanguageSwitcher({
super.key,
required this.languageCode,
required this.onChanged,
required this.labels,
});
final String languageCode;
final ValueChanged<String> onChanged;
final AppText labels;
@override
Widget build(BuildContext context) {
return Align(
alignment: Alignment.centerLeft,
child: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: Container(
height: 22,
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(999),
border: Border.all(color: sage.withValues(alpha: .16)),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
_CompactLanguagePill(
selected: languageCode != 'en',
colors: const [
Color(0xFFCE2939),
Colors.white,
Color(0xFF477050),
],
label: labels.hunShort,
onTap: () => onChanged('hu'),
),
_CompactLanguagePill(
selected: languageCode == 'en',
colors: const [
Color(0xFF012169),
Colors.white,
Color(0xFFC8102E),
],
label: labels.engShort,
onTap: () => onChanged('en'),
),
],
),
),
),
);
}
}
class _CompactLanguagePill extends StatelessWidget {
const _CompactLanguagePill({
required this.selected,
required this.colors,
required this.label,
required this.onTap,
});
final bool selected;
final List<Color> colors;
final String label;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
return InkWell(
borderRadius: BorderRadius.circular(999),
onTap: selected ? null : onTap,
child: AnimatedContainer(
duration: const Duration(milliseconds: 180),
padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
decoration: BoxDecoration(
color: selected ? sage : Colors.transparent,
borderRadius: BorderRadius.circular(999),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
_MiniFlag(colors: colors),
const SizedBox(width: 2),
Text(
label,
style: TextStyle(
fontSize: 8,
height: 1,
fontWeight: FontWeight.w900,
color: selected ? Colors.white : Colors.black45,
),
),
],
),
),
);
}
}
class _MiniFlag extends StatelessWidget {
const _MiniFlag({required this.colors});
final List<Color> colors;
@override
Widget build(BuildContext context) {
return Container(
width: 12,
height: 8,
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
border: Border.all(
color: Colors.black.withValues(alpha: .10),
width: .5,
),
),
child: Column(
children: colors
.map((color) => Expanded(child: Container(color: color)))
.toList(),
),
);
}
}