liquid-development/game-tracker
3
1
Fork 0
Code Issues 7 Pull Requests 4 Actions Releases 1 Activity

Added popups to create game view

Browse Source
This commit is contained in:
Felix Kirchner
2026-05-04 10:43:43 +02:00
parent 6272794cc5
commit 8c52db9981
3 changed files with 198 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

240
lib/presentation/views/main_menu/match_view/create_match/create_game/create_game_view.dart
View File

@@ -1,6 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_popup/flutter_popup.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:tallee/core/adaptive_page_route.dart';
import 'package:tallee/core/common.dart'; import 'package:tallee/core/common.dart';
import 'package:tallee/core/constants.dart'; import 'package:tallee/core/constants.dart';
import 'package:tallee/core/custom_theme.dart'; import 'package:tallee/core/custom_theme.dart';
@@ -9,8 +9,6 @@ import 'package:tallee/data/db/database.dart';
import 'package:tallee/data/models/game.dart'; import 'package:tallee/data/models/game.dart';
import 'package:tallee/data/models/group.dart'; import 'package:tallee/data/models/group.dart';
import 'package:tallee/l10n/generated/app_localizations.dart'; import 'package:tallee/l10n/generated/app_localizations.dart';
import 'package:tallee/presentation/views/main_menu/match_view/create_match/create_game/choose_color_view.dart';
import 'package:tallee/presentation/views/main_menu/match_view/create_match/create_game/choose_ruleset_view.dart';
import 'package:tallee/presentation/widgets/buttons/custom_width_button.dart'; import 'package:tallee/presentation/widgets/buttons/custom_width_button.dart';
import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart'; import 'package:tallee/presentation/widgets/dialog/custom_alert_dialog.dart';
import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart'; import 'package:tallee/presentation/widgets/dialog/custom_dialog_action.dart';
@@ -55,6 +53,9 @@ class _CreateGameViewState extends State<CreateGameView> {
/// A list of available rulesets and their localized names. /// A list of available rulesets and their localized names.
late List<(Ruleset, String)> _rulesets; late List<(Ruleset, String)> _rulesets;
/// A list of available game colors and their localized names.
late List<(GameColor, String)> _colors;
/// The currently selected color for the game. /// The currently selected color for the game.
GameColor? selectedColor = GameColor.orange; GameColor? selectedColor = GameColor.orange;
@@ -105,6 +106,16 @@ class _CreateGameViewState extends State<CreateGameView> {
translateRulesetToString(Ruleset.multipleWinners, context), translateRulesetToString(Ruleset.multipleWinners, context),
), ),
]; ];
_colors = [
(GameColor.green, translateGameColorToString(GameColor.green, context)),
(GameColor.teal, translateGameColorToString(GameColor.teal, context)),
(GameColor.blue, translateGameColorToString(GameColor.blue, context)),
(GameColor.purple, translateGameColorToString(GameColor.purple, context)),
(GameColor.pink, translateGameColorToString(GameColor.pink, context)),
(GameColor.red, translateGameColorToString(GameColor.red, context)),
(GameColor.orange, translateGameColorToString(GameColor.orange, context)),
(GameColor.yellow, translateGameColorToString(GameColor.yellow, context)),
];
if (widget.gameToEdit != null) { if (widget.gameToEdit != null) {
_gameNameController.text = widget.gameToEdit!.name; _gameNameController.text = widget.gameToEdit!.name;
@@ -212,65 +223,192 @@ class _CreateGameViewState extends State<CreateGameView> {
if (!isEditMode()) if (!isEditMode())
ChooseTile( ChooseTile(
title: loc.ruleset, title: loc.ruleset,
trailing: selectedRuleset == null trailing: CustomPopup(
? Text(loc.none) showArrow: true,
: Text( arrowColor: CustomTheme.boxBorderColor,
translateRulesetToString(selectedRuleset!, context), contentPadding: const EdgeInsets.symmetric(
), horizontal: 0,
onPressed: () async { vertical: 10,
final result = await Navigator.of(context).push<Ruleset?>( ),
adaptivePageRoute( barrierColor: Colors.transparent,
builder: (context) => ChooseRulesetView( contentDecoration: CustomTheme.standardBoxDecoration,
rulesets: _rulesets, content: StatefulBuilder(
initialRulesetIndex: selectedRulesetIndex, builder: (context, setPopupState) => SizedBox(
width: 250,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
_rulesets.length,
(index) => GestureDetector(
onTap: () {
setState(() {
selectedRuleset = _rulesets[index].$1;
});
setPopupState(() {});
},
child: Column(
children: [
Container(
margin: const EdgeInsets.symmetric(
horizontal: 12,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
color:
selectedRuleset == _rulesets[index].$1
? CustomTheme.textColor.withAlpha(20)
: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Row(
spacing: 8,
children: [
Text(
_rulesets[index].$2,
style: const TextStyle(
color: CustomTheme.textColor,
fontSize: 15,
),
),
],
),
),
),
if (index < _rulesets.length - 1)
const Divider(indent: 15, endIndent: 15),
],
),
),
),
), ),
), ),
); ),
if (mounted) { child: selectedRuleset == null
setState(() { ? Text(loc.none)
selectedRuleset = result; : Text(
selectedRulesetIndex = result == null translateRulesetToString(selectedRuleset!, context),
? -1 ),
: _rulesets.indexWhere((r) => r.$1 == result); ),
});
}
},
), ),
// Choose color tile // Choose color tile
ChooseTile( ChooseTile(
title: loc.color, title: loc.color,
trailing: selectedColor == null trailing: Row(
? Text(loc.none) spacing: 8,
: Row( children: [
children: [ // Selected Color
Text( Container(
translateGameColorToString(selectedColor!, context), width: 16,
), height: 16,
Container( margin: const EdgeInsets.only(left: 12),
width: 16, decoration: BoxDecoration(
height: 16, color: getColorFromGameColor(selectedColor!),
margin: const EdgeInsets.only(left: 12), shape: BoxShape.circle,
decoration: BoxDecoration( ),
color: getColorFromGameColor(selectedColor!), ),
shape: BoxShape.circle,
//Popup
CustomPopup(
showArrow: true,
arrowColor: CustomTheme.boxBorderColor,
contentPadding: const EdgeInsets.symmetric(
horizontal: 0,
vertical: 10,
),
barrierColor: Colors.transparent,
contentDecoration: CustomTheme.standardBoxDecoration,
content: StatefulBuilder(
builder: (context, setPopupState) => SizedBox(
width: 150,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: List.generate(
_colors.length,
(index) => GestureDetector(
onTap: () {
setState(() {
selectedColor = _colors[index].$1;
});
setPopupState(() {});
},
child: Column(
children: [
// Selected Highlighting
Container(
margin: const EdgeInsets.symmetric(
horizontal: 12,
),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(
Radius.circular(8),
),
color:
selectedColor == _colors[index].$1
? CustomTheme.textColor.withAlpha(
20,
)
: Colors.transparent,
),
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 6,
),
child: Row(
spacing: 8,
children: selectedColor == null
? [Text(loc.none)]
: [
Container(
width: 16,
height: 16,
margin:
const EdgeInsets.only(
left: 12,
),
decoration: BoxDecoration(
color:
getColorFromGameColor(
_colors[index].$1,
),
shape: BoxShape.circle,
),
),
Text(
_colors[index].$2,
style: const TextStyle(
color:
CustomTheme.textColor,
fontSize: 15,
),
),
],
),
),
),
if (index < _colors.length - 1)
const Divider(indent: 15, endIndent: 15),
],
),
),
), ),
), ),
], ),
),
child: Text(
translateGameColorToString(selectedColor!, context),
), ),
onPressed: () async {
final result = await Navigator.of(context).push<GameColor?>(
adaptivePageRoute(
builder: (context) =>
ChooseColorView(initialColor: selectedColor),
), ),
); ],
if (mounted) { ),
setState(() {
selectedColor = result;
});
}
},
), ),
// Description input field // Description input field

9
lib/presentation/widgets/tiles/choose_tile.dart
View File

@@ -1,3 +1,5 @@
import 'dart:math';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:tallee/core/custom_theme.dart'; import 'package:tallee/core/custom_theme.dart';
@@ -44,7 +46,12 @@ class _ChooseTileState extends State<ChooseTile> {
const Spacer(), const Spacer(),
if (widget.trailing != null) widget.trailing!, if (widget.trailing != null) widget.trailing!,
const SizedBox(width: 10), const SizedBox(width: 10),
const Icon(Icons.arrow_forward_ios, size: 16), widget.onPressed == null
? Transform.rotate(
angle: pi / 2,
child: const Icon(Icons.arrow_forward_ios, size: 16),
)
: const Icon(Icons.arrow_forward_ios, size: 16),
], ],
), ),
), ),

1
pubspec.yaml
View File

@@ -17,6 +17,7 @@ dependencies:
sdk: flutter sdk: flutter
flutter_localizations: flutter_localizations:
sdk: flutter sdk: flutter
flutter_popup: ^3.3.9
fluttericon: ^2.0.0 fluttericon: ^2.0.0
font_awesome_flutter: ^11.0.0 font_awesome_flutter: ^11.0.0
intl: any intl: any