Improved Tournament Detail View and added Refresh button to Home Page

frontend_splatournament_manager/lib/pages/home_page.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/state_provider.dart';
 import 'package:frontend_splatournament_manager/widgets/available_tournament_list.dart';
 import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
 
 class HomePage extends StatelessWidget {
   const HomePage({super.key});
@@ -11,21 +13,31 @@ class HomePage extends StatelessWidget {
       appBar: AppBar(
         title: Text("Splatournament"),
         actions: [
+          Consumer<StateProvider>(
+            builder:
+                (BuildContext context, StateProvider value, Widget? child) {
+                  return IconButton(
+                    onPressed: () {
+                      value.notifyState();
+                    },
+                    icon: Icon(Icons.refresh),
+                  );
+                },
+          ),
           PopupMenuButton(
             onSelected: (value) {
               context.go("/settings");
             },
             itemBuilder: (context) {
-              return [PopupMenuItem(value: 1,child: Text("Settings"),)];
+              return [PopupMenuItem(value: 1, child: Text("Settings"))];
             },
           ),
         ],
       ),
-      body: Column(
+      body: Container(
-        children: [
+        padding: EdgeInsets.fromLTRB(0, 12, 0, 24),
-          AvailableTournamentList(),
+        child: Column(children: [Spacer(), AvailableTournamentList()]),
-        ],
+      ),
-      )
     );
   }
 }

frontend_splatournament_manager/lib/pages/tournament_detail_page.dart

@@ -1,23 +1,108 @@
 import 'package:flutter/material.dart';
-import 'package:frontend_splatournament_manager/state_provider.dart';
+import 'package:frontend_splatournament_manager/models/tournament.dart';
-import 'package:provider/provider.dart';
 
-class TournamentDetailPage extends StatelessWidget {
+class TournamentDetailPage extends StatefulWidget {
-  final int tournamentId;
+  final Tournament tournament;
-  const TournamentDetailPage({super.key, required this.tournamentId});
+
+  const TournamentDetailPage({super.key, required this.tournament});
+
+  @override
+  State<TournamentDetailPage> createState() => _TournamentDetailPageState();
+}
+
+class _TournamentDetailPageState extends State<TournamentDetailPage> {
+  bool isShowingTeams = false;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text("Tournament"),),
+      appBar: AppBar(
-      body: Consumer<StateProvider>(builder: (BuildContext context, StateProvider value, Widget? child) {
+        title: Text("Tournament"),
-        var tournament = value.availableTournaments.where((x) => x.id == tournamentId).firstOrNull;
+        backgroundColor: Theme.of(context).colorScheme.surface.withAlpha(148),
-        if(tournament == null){
+        elevation: 2,
-          return Center(child: Text("Tournament not found!"));
+        actions: [
+          IconButton(
+            onPressed: () {
+              setState(() {
+                isShowingTeams = !isShowingTeams;
+              });
+            },
+            icon: Icon(Icons.group),
+          ),
+        ],
+      ),
+      extendBodyBehindAppBar: true,
+      body: Column(
+        children: [
+          DetailHeader(
+            tournament: widget.tournament,
+            onTeamsChipClicked: () {
+              setState(() {
+                isShowingTeams = !isShowingTeams;
+              });
+            },
+          ),
+          Builder(
+            builder: (context) {
+              // Demo Content
+              if (isShowingTeams) {
+                return Text("Teams");
               }
-        return Text("${tournament.maxTeamAmount}");
+              return Text("Not Teams");
-      },)
+            },
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class DetailHeader extends StatelessWidget {
+  final Tournament tournament;
+  final Function onTeamsChipClicked;
+
+  const DetailHeader({
+    super.key,
+    required this.tournament,
+    required this.onTeamsChipClicked,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 350,
+      width: double.maxFinite,
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadiusDirectional.vertical(
+            bottom: Radius.circular(8),
+          ),
+          color: Colors.red,
+          image: DecorationImage(
+            fit: BoxFit.cover,
+            // Currently a demo image
+            image: NetworkImage(
+              "https://flutter.dev/assets/image_1.w635.f71cbb614cd16a40bfb87e128278227c.png",
+            ),
+          ),
+        ),
+        padding: EdgeInsets.fromLTRB(16, 0, 0, 12),
+        child: Column(
+          verticalDirection: VerticalDirection.up,
+          children: [
+            Row(
+              children: [
+                InputChip(
+                  onPressed: () => onTeamsChipClicked(),
+                  label: Text(
+                    "${tournament.currentTeamAmount} out of ${tournament.maxTeamAmount} Teams",
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
     );
   }
-
 }

frontend_splatournament_manager/lib/state_provider.dart

@@ -14,12 +14,14 @@ class StateProvider extends ChangeNotifier {
     notifyListeners();
   }
   List<Tournament>? _availableTournaments;
+  void notifyState(){
+    notifyListeners();
+  }
   Future<List<Tournament>> fetchAvailableTournaments() async {
     try {
       var response = await http.get(Uri.parse('http://10.0.2.2:3000/tournaments'));
       if (response.statusCode == 200) {
         final List<dynamic> list = json.decode(response.body);
-
         _availableTournaments = list.map((json) => Tournament.fromJson(json)).toList();
         return _availableTournaments!;
       }

frontend_splatournament_manager/lib/widgets/available_tournament_list.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/models/tournament.dart';
 import 'package:frontend_splatournament_manager/pages/tournament_detail_page.dart';
 import 'package:frontend_splatournament_manager/state_provider.dart';
 import 'package:provider/provider.dart';
@@ -8,23 +9,68 @@ class AvailableTournamentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    return Container(
+      padding: EdgeInsets.fromLTRB(24, 0, 24, 0),
+      child: Column(
+        children: [
+          Row(children: [Text("Available Tournaments")]),
+          SizedBox(
+            width: double.infinity,
+            height: 350,
             child: Consumer<StateProvider>(
-        builder: (BuildContext context, StateProvider value, Widget? child) =>
+              builder:
-            FutureBuilder(
+                  (
-              future: value.fetchAvailableTournaments(),
+                    BuildContext context,
+                    StateProvider provider,
+                    Widget? child,
+                  ) => TournamentListFutureBuilder(provider: provider),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class TournamentListFutureBuilder extends StatelessWidget {
+  final StateProvider provider;
+
+  const TournamentListFutureBuilder({super.key, required this.provider});
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: provider.fetchAvailableTournaments(),
       builder: (context, snapshot) {
-                if(snapshot.hasError){
+        if (snapshot.hasError) {
           return Center(child: Text('Error: ${snapshot.error}'));
-                }else if(!snapshot.hasData){
+        } else if (!snapshot.hasData ||
+            snapshot.connectionState == ConnectionState.waiting) {
           return Center(child: CircularProgressIndicator());
         }
         var list = snapshot.data!;
         return ListView.builder(
+          shrinkWrap: false,
           itemCount: list.length,
           itemBuilder: (context, index) {
             var tournament = list[index];
+            return TournamentListItem(tournament: tournament);
+          },
+        );
+      },
+    );
+  }
+}
+
+class TournamentListItem extends StatelessWidget {
+  final Tournament tournament;
+
+  const TournamentListItem({super.key, required this.tournament});
+
+  @override
+  Widget build(BuildContext context) {
     return ListTile(
+      contentPadding: EdgeInsets.all(0),
       leading: Icon(Icons.abc),
       title: Text(tournament.name),
       subtitle: Text(tournament.description),
@@ -32,16 +78,11 @@ class AvailableTournamentList extends StatelessWidget {
         Navigator.push(
           context,
           MaterialPageRoute(
-                            builder: (context) => TournamentDetailPage(tournamentId: tournament.id,),
+            builder: (context) => TournamentDetailPage(tournament: tournament),
           ),
         );
       },
     );
-                  },
-                );
-              },
-            ),
-      ),
-    );
   }
 }
+