From 4f8ba002d3f1f2cb966aabe59eeaaeaa9a351153 Mon Sep 17 00:00:00 2001 From: Felix Kirchner Date: Tue, 11 Nov 2025 15:34:31 +0100 Subject: [PATCH] Overhauled layout building --- .../views/main_menu/home_view.dart | 135 ++++++++++++------ lib/presentation/widgets/info_tile.dart | 61 -------- .../widgets/quick_create_button.dart | 5 +- lib/presentation/widgets/tiles/info_tile.dart | 60 ++++++++ .../widgets/{ => tiles}/quick_info_tile.dart | 12 +- 5 files changed, 161 insertions(+), 112 deletions(-) delete mode 100644 lib/presentation/widgets/info_tile.dart create mode 100644 lib/presentation/widgets/tiles/info_tile.dart rename lib/presentation/widgets/{ => tiles}/quick_info_tile.dart (84%) diff --git a/lib/presentation/views/main_menu/home_view.dart b/lib/presentation/views/main_menu/home_view.dart index fb03c5f..bbed244 100644 --- a/lib/presentation/views/main_menu/home_view.dart +++ b/lib/presentation/views/main_menu/home_view.dart @@ -1,66 +1,111 @@ import 'package:flutter/material.dart'; import 'package:game_tracker/presentation/widgets/game_tile.dart'; -import 'package:game_tracker/presentation/widgets/info_tile.dart'; import 'package:game_tracker/presentation/widgets/quick_create_button.dart'; -import 'package:game_tracker/presentation/widgets/quick_info_tile.dart'; +import 'package:game_tracker/presentation/widgets/tiles/info_tile.dart'; +import 'package:game_tracker/presentation/widgets/tiles/quick_info_tile.dart'; class HomeView extends StatelessWidget { const HomeView({super.key}); @override Widget build(BuildContext context) { - return Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - const Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - QuickInfoTile(title: 'Games', icon: Icons.casino, value: 42), - QuickInfoTile( - title: 'Groups', - icon: Icons.groups_rounded, - value: 5, - ), - ], - ), - const InfoTile( - title: 'Recent Games', - padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0), - icon: Icons.timer, - content: GameTile(), - ), - InfoTile( - title: 'Quick Create', - height: 210, - padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0), - icon: Icons.add_box_rounded, - content: Column( + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, children: [ Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, + mainAxisAlignment: MainAxisAlignment.center, children: [ - QuickCreateButton(text: 'Cabo', onPressed: () {}), - QuickCreateButton(text: 'Uno', onPressed: () {}), + QuickInfoTile( + width: constraints.maxWidth * 0.45, + height: constraints.maxHeight * 0.15, + title: 'Games', + icon: Icons.casino, + value: 42, + ), + SizedBox(width: constraints.maxWidth * 0.05), + QuickInfoTile( + width: constraints.maxWidth * 0.45, + height: constraints.maxHeight * 0.15, + title: 'Groups', + icon: Icons.groups_rounded, + value: 5, + ), ], ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - QuickCreateButton(text: 'Phase 10', onPressed: () {}), - QuickCreateButton(text: 'Category 5', onPressed: () {}), - ], + Padding( + padding: const EdgeInsets.symmetric(vertical: 24.0), + child: InfoTile( + width: constraints.maxWidth * 0.95, + title: 'Recent Games', + icon: Icons.timer, + content: const Padding( + padding: EdgeInsets.symmetric(horizontal: 40.0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + GameTile( + gameTitle: 'Gamenight', + gameType: 'Cabo', + ruleset: 'Lowest Points', + players: '5 Players', + winner: 'Leonard', + ), + Padding( + padding: EdgeInsets.symmetric(vertical: 8.0), + child: Divider(), + ), + GameTile( + gameTitle: 'Schoolbreak', + gameType: 'Uno', + ruleset: 'Highest Points', + players: 'The Gang', + winner: 'Lina', + ), + SizedBox(height: 8), + ], + ), + ), + ), ), - Row( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - QuickCreateButton(text: 'Category 6', onPressed: () {}), - QuickCreateButton(text: 'Category 7', onPressed: () {}), - ], + InfoTile( + width: constraints.maxWidth * 0.95, + title: 'Quick Create', + icon: Icons.add_box_rounded, + content: Column( + spacing: 8, + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + QuickCreateButton(text: 'Category 1', onPressed: () {}), + QuickCreateButton(text: 'Category 2', onPressed: () {}), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + QuickCreateButton(text: 'Category 3', onPressed: () {}), + QuickCreateButton(text: 'Category 4', onPressed: () {}), + ], + ), + Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + QuickCreateButton(text: 'Category 5', onPressed: () {}), + QuickCreateButton(text: 'Category 6', onPressed: () {}), + ], + ), + ], + ), ), ], ), - ), - ], + ); + }, ); } } diff --git a/lib/presentation/widgets/info_tile.dart b/lib/presentation/widgets/info_tile.dart deleted file mode 100644 index a323556..0000000 --- a/lib/presentation/widgets/info_tile.dart +++ /dev/null @@ -1,61 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:game_tracker/core/custom_theme.dart'; - -class InfoTile extends StatefulWidget { - final String title; - final IconData icon; - final Widget content; - final EdgeInsets? padding; - final double? height; - const InfoTile({ - super.key, - required this.title, - required this.icon, - required this.content, - this.padding, - this.height, - }); - - @override - State createState() => _InfoTileState(); -} - -class _InfoTileState extends State { - @override - Widget build(BuildContext context) { - return Padding( - padding: widget.padding ?? const EdgeInsets.all(0), - child: Container( - padding: const EdgeInsets.all(12), - height: widget.height ?? 200, - width: 380, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(12), - color: CustomTheme.boxColor, - border: Border.all(color: CustomTheme.boxBorder), - ), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Row( - children: [ - Icon(widget.icon), - const SizedBox(width: 5), - Text( - widget.title, - style: const TextStyle( - fontSize: 16, - fontWeight: FontWeight.bold, - ), - ), - ], - ), - const SizedBox(height: 10), - widget.content, - ], - ), - ), - ); - } -} diff --git a/lib/presentation/widgets/quick_create_button.dart b/lib/presentation/widgets/quick_create_button.dart index bdf2945..3860f1c 100644 --- a/lib/presentation/widgets/quick_create_button.dart +++ b/lib/presentation/widgets/quick_create_button.dart @@ -19,15 +19,14 @@ class _QuickCreateButtonState extends State { Widget build(BuildContext context) { return ElevatedButton( onPressed: widget.onPressed, - style: ElevatedButton.styleFrom( - minimumSize: const Size(140, 40), + minimumSize: const Size(140, 45), backgroundColor: CustomTheme.primaryColor, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), ), child: Text( widget.text, - style: const TextStyle(fontWeight: FontWeight.bold), + style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16), ), ); } diff --git a/lib/presentation/widgets/tiles/info_tile.dart b/lib/presentation/widgets/tiles/info_tile.dart new file mode 100644 index 0000000..168262e --- /dev/null +++ b/lib/presentation/widgets/tiles/info_tile.dart @@ -0,0 +1,60 @@ +import 'package:flutter/material.dart'; +import 'package:game_tracker/core/custom_theme.dart'; + +class InfoTile extends StatefulWidget { + final String title; + final IconData icon; + final Widget content; + final EdgeInsets? padding; + final double? height; + final double? width; + const InfoTile({ + super.key, + required this.title, + required this.icon, + required this.content, + this.padding, + this.height, + this.width, + }); + + @override + State createState() => _InfoTileState(); +} + +class _InfoTileState extends State { + @override + Widget build(BuildContext context) { + return Container( + padding: widget.padding ?? const EdgeInsets.all(12), + height: widget.height, + width: widget.width ?? 380, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(12), + color: CustomTheme.boxColor, + border: Border.all(color: CustomTheme.boxBorder), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Row( + children: [ + Icon(widget.icon), + const SizedBox(width: 5), + Text( + widget.title, + style: const TextStyle( + fontSize: 16, + fontWeight: FontWeight.bold, + ), + ), + ], + ), + const SizedBox(height: 10), + widget.content, + ], + ), + ); + } +} diff --git a/lib/presentation/widgets/quick_info_tile.dart b/lib/presentation/widgets/tiles/quick_info_tile.dart similarity index 84% rename from lib/presentation/widgets/quick_info_tile.dart rename to lib/presentation/widgets/tiles/quick_info_tile.dart index 6831c65..423b8d3 100644 --- a/lib/presentation/widgets/quick_info_tile.dart +++ b/lib/presentation/widgets/tiles/quick_info_tile.dart @@ -5,11 +5,17 @@ class QuickInfoTile extends StatefulWidget { final String title; final IconData icon; final int value; + final double? height; + final double? width; + final EdgeInsets? padding; const QuickInfoTile({ super.key, required this.title, required this.icon, required this.value, + this.height, + this.width, + this.padding, }); @override @@ -20,9 +26,9 @@ class _QuickInfoTileState extends State { @override Widget build(BuildContext context) { return Container( - padding: const EdgeInsets.all(12), - height: 110, - width: 180, + padding: widget.padding ?? const EdgeInsets.all(12), + height: widget.height ?? 110, + width: widget.width ?? 180, decoration: BoxDecoration( borderRadius: BorderRadius.circular(12), color: CustomTheme.boxColor,