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(
-        children: [
-          AvailableTournamentList(),
-        ],
-      )
+      body: Container(
+        padding: EdgeInsets.fromLTRB(0, 12, 0, 24),
+        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:provider/provider.dart';
+import 'package:frontend_splatournament_manager/models/tournament.dart';
 
-class TournamentDetailPage extends StatelessWidget {
-  final int tournamentId;
-  const TournamentDetailPage({super.key, required this.tournamentId});
+class TournamentDetailPage extends StatefulWidget {
+  final Tournament tournament;
+
+  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"),),
-      body: Consumer<StateProvider>(builder: (BuildContext context, StateProvider value, Widget? child) {
-        var tournament = value.availableTournaments.where((x) => x.id == tournamentId).firstOrNull;
-        if(tournament == null){
-          return Center(child: Text("Tournament not found!"));
-        }
-        return Text("${tournament.maxTeamAmount}");
-      },)
+      appBar: AppBar(
+        title: Text("Tournament"),
+        backgroundColor: Theme.of(context).colorScheme.surface.withAlpha(148),
+        elevation: 2,
+        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("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,40 +9,80 @@ class AvailableTournamentList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
-      child: Consumer<StateProvider>(
-        builder: (BuildContext context, StateProvider value, Widget? child) =>
-            FutureBuilder(
-              future: value.fetchAvailableTournaments(),
-              builder: (context, snapshot) {
-                if(snapshot.hasError){
-                  return Center(child: Text('Error: ${snapshot.error}'));
-                }else if(!snapshot.hasData){
-                  return Center(child: CircularProgressIndicator());
-                }
-                var list = snapshot.data!;
-                return ListView.builder(
-                  itemCount: list.length,
-                  itemBuilder: (context, index) {
-                    var tournament = list[index];
-                    return ListTile(
-                      leading: Icon(Icons.abc),
-                      title: Text(tournament.name),
-                      subtitle: Text(tournament.description),
-                      onTap: () {
-                        Navigator.push(
-                          context,
-                          MaterialPageRoute(
-                            builder: (context) => TournamentDetailPage(tournamentId: tournament.id,),
-                          ),
-                        );
-                      },
-                    );
-                  },
-                );
-              },
+    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 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) {
+          return Center(child: Text('Error: ${snapshot.error}'));
+        } 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),
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(
+            builder: (context) => TournamentDetailPage(tournament: tournament),
+          ),
+        );
+      },
+    );
+  }
+}
+