App Startseite anfang

trainerbox/lib/main.dart

@@ -11,6 +11,7 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Trainer App',
+      debugShowCheckedModeBanner: false,
       theme: ThemeData(
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.pink),
         useMaterial3: true,
@@ -30,14 +31,16 @@ class HomeScreen extends StatelessWidget {
         child: Padding(
           padding: const EdgeInsets.all(16.0),
           child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.center,
             children: [
-              const Text(
-                'Hallo Trainer!',
-                style: TextStyle(
-                  fontSize: 32,
-                  fontWeight: FontWeight.bold,
-                  color: Colors.pink,
+              const Center(
+                child: Text(
+                  'Hallo Trainer!',
+                  style: TextStyle(
+                    fontSize: 32,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.pink,
+                  ),
                 ),
               ),
               const SizedBox(height: 20),
@@ -48,8 +51,12 @@ class HomeScreen extends StatelessWidget {
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(12),
                   image: const DecorationImage(
-                    image: AssetImage('assets/training_bg.jpg'),
+                    image: AssetImage('images/training_bg.jpg'),
                     fit: BoxFit.cover,
+                    colorFilter: ColorFilter.mode(
+                      Colors.black26,
+                      BlendMode.darken,
+                    ),
                   ),
                 ),
                 child: const Center(
@@ -67,21 +74,27 @@ class HomeScreen extends StatelessWidget {
               // Favorites Section
               const Text(
                 'Favoriten',
-                style: TextStyle(
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
               ),
               const SizedBox(height: 10),
               SizedBox(
-                height: 80,
+                height: 100,
                 child: ListView(
                   scrollDirection: Axis.horizontal,
                   children: const [
-                    CategoryCircle(title: 'Kondition', icon: Icons.directions_run),
+                    CategoryCircle(
+                      title: 'Kondition',
+                      icon: Icons.directions_run,
+                    ),
                     CategoryCircle(title: 'Wurf', icon: Icons.sports_handball),
-                    CategoryCircle(title: 'Passen', icon: Icons.sports_volleyball),
-                    CategoryCircle(title: 'Torhüter', icon: Icons.sports_soccer),
+                    CategoryCircle(
+                      title: 'Passen',
+                      icon: Icons.sports_volleyball,
+                    ),
+                    CategoryCircle(
+                      title: 'Torhüter',
+                      icon: Icons.sports_soccer,
+                    ),
                   ],
                 ),
               ),
@@ -89,22 +102,27 @@ class HomeScreen extends StatelessWidget {
               // Suggestions Section
               const Text(
                 'Vorschläge',
-                style: TextStyle(
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                ),
+                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
               ),
               const SizedBox(height: 10),
-              Expanded(
-                child: ListView(
+              SizedBox(
+                height: 180,
+                child: PageView(
                   children: const [
                     ExerciseCard(
-                      title: 'Wurf nach Täuschung',
+                      title: 'Wurf',
                       category: 'Wurf',
+                      icon: Icons.sports_handball,
                     ),
                     ExerciseCard(
                       title: 'Doppelpass',
                       category: 'Passen',
+                      icon: Icons.sports_volleyball,
+                    ),
+                    ExerciseCard(
+                      title: 'Torhüter Training',
+                      category: 'Torhüter',
+                      icon: Icons.sports_soccer,
                     ),
                   ],
                 ),
@@ -118,9 +136,18 @@ class HomeScreen extends StatelessWidget {
         items: const [
           BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
           BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Suche'),
-          BottomNavigationBarItem(icon: Icon(Icons.favorite_border), label: 'Favoriten'),
-          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), label: 'Kalender'),
-          BottomNavigationBarItem(icon: Icon(Icons.person_outline), label: 'Profil'),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.favorite_border),
+            label: 'Favoriten',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.calendar_today),
+            label: 'Kalender',
+          ),
+          BottomNavigationBarItem(
+            icon: Icon(Icons.person_outline),
+            label: 'Profil',
+          ),
         ],
       ),
     );
@@ -131,11 +158,7 @@ class CategoryCircle extends StatelessWidget {
   final String title;
   final IconData icon;
 
-  const CategoryCircle({
-    super.key,
-    required this.title,
-    required this.icon,
-  });
+  const CategoryCircle({super.key, required this.title, required this.icon});
 
   @override
   Widget build(BuildContext context) {
@@ -144,8 +167,8 @@ class CategoryCircle extends StatelessWidget {
       child: Column(
         children: [
           Container(
-            width: 50,
-            height: 50,
+            width: 70,
+            height: 70,
             decoration: BoxDecoration(
               color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
               shape: BoxShape.circle,
@@ -153,12 +176,13 @@ class CategoryCircle extends StatelessWidget {
             child: Icon(
               icon,
               color: Theme.of(context).colorScheme.primary,
+              size: 35,
             ),
           ),
-          const SizedBox(height: 4),
+          const SizedBox(height: 8),
           Text(
             title,
-            style: const TextStyle(fontSize: 12),
+            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold),
           ),
         ],
       ),
@@ -169,28 +193,51 @@ class CategoryCircle extends StatelessWidget {
 class ExerciseCard extends StatelessWidget {
   final String title;
   final String category;
+  final IconData icon;
 
   const ExerciseCard({
     super.key,
     required this.title,
     required this.category,
+    required this.icon,
   });
 
   @override
   Widget build(BuildContext context) {
     return Card(
-      margin: const EdgeInsets.only(bottom: 8.0),
-      child: ListTile(
-        title: Text(title),
-        subtitle: Text(category),
-        leading: Container(
-          width: 60,
-          height: 60,
-          decoration: BoxDecoration(
-            color: Colors.grey[200],
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: const Icon(Icons.sports_handball),
+      margin: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Container(
+        width: double.infinity,
+        height: 180,
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(icon, size: 60, color: Theme.of(context).colorScheme.primary),
+            const SizedBox(height: 16),
+            Text(
+              title,
+              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 8),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
+              decoration: BoxDecoration(
+                color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: Text(
+                category,
+                style: TextStyle(
+                  fontSize: 14,
+                  color: Theme.of(context).colorScheme.primary,
+                  fontWeight: FontWeight.w500,
+                ),
+              ),
+            ),
+          ],
         ),
       ),
     );

trainerbox/pubspec.yaml

@@ -57,6 +57,9 @@ flutter:
   # the material Icons class.
   uses-material-design: true
 
+  assets:
+    - images/training_bg.jpg
+
   # To add assets to your application, add an assets section, like this:
   # assets:
   #   - images/a_dot_burr.jpeg