Implement comprehensive localization framework with English and Finnish support

- Add flutter_localizations dependency and l10n configuration
- Create ARB files for English (en) and Finnish (fi) translations
- Localize UI strings across all major components:
  * Navigation drawer and page titles
  * Scoring interface (arrows per end, ruleset names)
  * Scorecard headers (End, Arrows, Sum of 3/6, Accumulative)
  * Keypad functional buttons (CLEAR/TYHJENNÄ, CLOSE/SULJE)
  * Settings page placeholder content
  * Dialog messages and confirmation prompts
- Preserve universal archery scoring notation (X, 10, 9, M remain unlocalised)
- Use authentic Finnish archery terminology throughout
- Configure main app with proper localization delegates and supported locales
- Generate localization classes automatically via flutter_localizations

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mikkeli Matlock
2025-08-24 20:47:16 +09:00
parent 8f7d870985
commit bb7b1cf6b2
15 changed files with 938 additions and 55 deletions
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import '../../config/localization/generated/app_localizations.dart';
import 'scoring_page.dart';
import 'settings_page.dart';
@@ -56,9 +57,9 @@ class _MainNavigationPageState extends State<MainNavigationPage> {
const SettingsPage(),
];
final List<String> _pageTitles = [
'Main (Scorer)',
'Settings',
List<String> _getPageTitles(BuildContext context) => [
AppLocalizations.of(context)!.navMainScorer,
AppLocalizations.of(context)!.navSettings,
];
void _onNavigationItemSelected(int index) {
@@ -70,9 +71,12 @@ class _MainNavigationPageState extends State<MainNavigationPage> {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final pageTitles = _getPageTitles(context);
return Scaffold(
appBar: AppBar(
title: Text(_pageTitles[_selectedIndex]),
title: Text(pageTitles[_selectedIndex]),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: _pages[_selectedIndex],
@@ -84,22 +88,22 @@ class _MainNavigationPageState extends State<MainNavigationPage> {
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.inversePrimary,
),
child: const Column(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
'Archery Bookkeeper',
style: TextStyle(
l10n.appTitle,
style: const TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
const SizedBox(height: 8),
Text(
'Alpha 0.1',
style: TextStyle(
l10n.appVersion,
style: const TextStyle(
color: Colors.white70,
fontSize: 16,
),
@@ -109,22 +113,22 @@ class _MainNavigationPageState extends State<MainNavigationPage> {
),
ListTile(
leading: const Icon(Icons.sports),
title: const Text('Main (Scorer)'),
title: Text(l10n.navMainScorer),
selected: _selectedIndex == 0,
onTap: () => _onNavigationItemSelected(0),
),
ListTile(
leading: const Icon(Icons.settings),
title: const Text('Settings'),
title: Text(l10n.navSettings),
selected: _selectedIndex == 1,
onTap: () => _onNavigationItemSelected(1),
),
const Divider(),
const Padding(
padding: EdgeInsets.all(16.0),
Padding(
padding: const EdgeInsets.all(16.0),
child: Text(
'REPLACE ALL THESE TEXTS WITH LOCALISATION MARKERS!!',
style: TextStyle(
l10n.devTodoLocalization,
style: const TextStyle(
fontSize: 12,
color: Colors.grey,
),
+5 -3
View File
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import '../../config/localization/generated/app_localizations.dart';
import '../widgets/scoring_grid/scoring_grid.dart';
import '../widgets/scoring_grid/scoring_keypad.dart';
import '../widgets/common/toggle_switches.dart';
@@ -87,16 +88,17 @@ class _ScoringPageState extends State<ScoringPage> with SingleTickerProviderStat
final bool? keepScores = await showDialog<bool>(
context: context,
builder: (BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return AlertDialog(
title: const Text('Keep scores?'),
title: Text(l10n.dialogKeepScoresTitle),
actions: [
TextButton(
onPressed: () => Navigator.of(context).pop(false),
child: const Text('No'),
child: Text(l10n.dialogNo),
),
TextButton(
onPressed: () => Navigator.of(context).pop(true),
child: const Text('Yes'),
child: Text(l10n.dialogYes),
),
],
);
+20 -17
View File
@@ -1,49 +1,52 @@
import 'package:flutter/material.dart';
import '../../config/localization/generated/app_localizations.dart';
class SettingsPage extends StatelessWidget {
const SettingsPage({super.key});
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
title: Text(l10n.settingsTitle),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: const Padding(
padding: EdgeInsets.all(16.0),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Settings',
style: TextStyle(
l10n.settingsTitle,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 24),
const SizedBox(height: 24),
Text(
'This is a placeholder settings page.',
style: TextStyle(
l10n.settingsPlaceholder,
style: const TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
SizedBox(height: 16),
const SizedBox(height: 16),
Text(
'Future settings will include:',
style: TextStyle(
l10n.settingsFutureWillInclude,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: 8),
Text('• Color scheme preferences'),
Text('• Default arrow counts'),
Text('• Score input preferences'),
Text('• Export settings'),
Text('• Session management'),
const SizedBox(height: 8),
Text(l10n.settingsColorScheme),
Text(l10n.settingsDefaultArrows),
Text(l10n.settingsScoreInput),
Text(l10n.settingsExportOptions),
Text(l10n.settingsSessionManagement),
],
),
),
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import '../../../config/localization/generated/app_localizations.dart';
class ToggleSwitches extends StatelessWidget {
final int arrowsPerEnd;
@@ -15,18 +16,21 @@ class ToggleSwitches extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildToggleGroup(
'Arrows per end',
context,
l10n.arrowsPerEnd,
[3, 6],
arrowsPerEnd,
onArrowsPerEndChanged,
),
_buildRulesetInfo(),
_buildRulesetInfo(context),
],
),
],
@@ -34,6 +38,7 @@ class ToggleSwitches extends StatelessWidget {
}
Widget _buildToggleGroup(
BuildContext context,
String label,
List<int> options,
int currentValue,
@@ -66,12 +71,14 @@ class ToggleSwitches extends StatelessWidget {
);
}
Widget _buildRulesetInfo() {
final rulesetName = arrowsPerEnd == 3 ? 'Indoor' : 'Outdoor';
Widget _buildRulesetInfo(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final rulesetName = arrowsPerEnd == 3 ? l10n.rulesetIndoor : l10n.rulesetOutdoor;
return Column(
children: [
Text(
'Ruleset',
l10n.ruleset,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
@@ -95,7 +102,7 @@ class ToggleSwitches extends StatelessWidget {
),
),
Text(
'$endsPerSet ends',
l10n.endsCount(endsPerSet),
style: TextStyle(
fontSize: 12,
color: Colors.blue.shade600,
@@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'scoring_cell.dart';
import '../../../config/constants/scoring_colors.dart';
import '../../../config/localization/generated/app_localizations.dart';
class ScoringGrid extends StatelessWidget {
final List<List<String>> scores;
@@ -139,6 +140,8 @@ class ScoringGrid extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade400),
@@ -161,7 +164,7 @@ class ScoringGrid extends StatelessWidget {
// End column: ~13% (50/395)
Expanded(
flex: 13,
child: Center(child: Text('End\\Shot', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
child: Center(child: Text(l10n.headerEnd, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
),
// Arrow columns: ~42% (165/395)
Expanded(
@@ -173,7 +176,7 @@ class ScoringGrid extends StatelessWidget {
color: Colors.blue.shade100,
borderRadius: BorderRadius.circular(4),
),
child: const Text('Arrows', style: TextStyle(fontWeight: FontWeight.bold)),
child: Text(l10n.headerArrows, style: const TextStyle(fontWeight: FontWeight.bold)),
),
),
),
@@ -182,7 +185,7 @@ class ScoringGrid extends StatelessWidget {
flex: 14,
child: Center(
child: Text(
'Sum of 3',
l10n.headerSumOf3,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
@@ -196,7 +199,7 @@ class ScoringGrid extends StatelessWidget {
flex: 14,
child: Center(
child: Text(
'Sum of 6',
l10n.headerSumOf6,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
@@ -207,7 +210,7 @@ class ScoringGrid extends StatelessWidget {
// Accumulative: ~17% (70/395)
Expanded(
flex: 17,
child: Center(child: Text('Accumulative', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
child: Center(child: Text(l10n.headerAccumulative, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12))),
),
],
),
@@ -410,14 +413,15 @@ class ScoringGrid extends StatelessWidget {
top: BorderSide(color: Colors.grey.shade400, width: 2),
),
),
child: _buildCountingSection(),
child: _buildCountingSection(context),
),
],
),
);
}
Widget _buildCountingSection() {
Widget _buildCountingSection(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
final counts = _calculateXAndTenCounts();
final finalScore = _calculateAccumulative(scores.length - 1);
@@ -494,7 +498,7 @@ class ScoringGrid extends StatelessWidget {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text('Final score', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
Text(l10n.scoreTotal, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
Text(
finalScore.toString(),
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 24),
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import '../../../config/constants/scoring_colors.dart';
import '../../../config/localization/generated/app_localizations.dart';
class ScoringKeypad extends StatelessWidget {
final Function(String) onScoreInput;
@@ -11,6 +12,8 @@ class ScoringKeypad extends StatelessWidget {
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
// Score buttons: 4 rows × 3 columns
final List<List<String>> scoreLayout = [
['X', '10', '9'],
@@ -21,8 +24,8 @@ class ScoringKeypad extends StatelessWidget {
// Functional buttons: 4 rows × 1 column
final List<String> functionalButtons = [
'CLEAR',
'CLOSE',
l10n.keypadClear,
l10n.keypadClose,
'', // Reserved for future functions
'', // Reserved for future functions
];
@@ -83,15 +86,25 @@ class ScoringKeypad extends StatelessWidget {
}
Widget _buildKeypadButton(BuildContext context, String score, {bool isFunctional = false}) {
final l10n = AppLocalizations.of(context)!;
// Use different styling for functional buttons
Color buttonColor;
Color textColor;
// Map display text to internal values for callback
String internalValue = score;
if (score == l10n.keypadClear) {
internalValue = 'CLEAR';
} else if (score == l10n.keypadClose) {
internalValue = 'CLOSE';
}
if (isFunctional) {
if (score == 'CLEAR') {
if (internalValue == 'CLEAR') {
buttonColor = Colors.red.shade400;
textColor = Colors.white;
} else if (score == 'CLOSE') {
} else if (internalValue == 'CLOSE') {
buttonColor = Colors.blue.shade400;
textColor = Colors.white;
} else {
@@ -99,12 +112,13 @@ class ScoringKeypad extends StatelessWidget {
textColor = Colors.grey.shade600;
}
} else {
// Use score directly for color mapping since scores are not localized
buttonColor = ScoringColors.getScoreBackgroundColor(score);
textColor = ScoringColors.getScoreTextColor(score);
}
return ElevatedButton(
onPressed: () => onScoreInput(score),
onPressed: () => onScoreInput(internalValue),
style: ElevatedButton.styleFrom(
backgroundColor: buttonColor,
foregroundColor: textColor,