diff --git a/trainerbox/images/training_bg.jpg b/trainerbox/images/training_bg.jpg new file mode 100644 index 0000000..8a414e7 Binary files /dev/null and b/trainerbox/images/training_bg.jpg differ diff --git a/trainerbox/lib/main.dart b/trainerbox/lib/main.dart index 19a5bcd..c1c0b8e 100644 --- a/trainerbox/lib/main.dart +++ b/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, + ), + ), + ), + ], ), ), ); diff --git a/trainerbox/pubspec.yaml b/trainerbox/pubspec.yaml index 6aca7ce..c96e0ea 100644 --- a/trainerbox/pubspec.yaml +++ b/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