Compact language switcher layout
This commit is contained in:
+136
-5
@@ -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(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user