CPD-Gitty/trainerbox/lib/screens/search_tab.dart

132 lines
4.2 KiB
Dart

import 'package:flutter/material.dart';
class SearchTab extends StatefulWidget {
const SearchTab({super.key});
@override
State<SearchTab> createState() => _SearchTabState();
}
class _SearchTabState extends State<SearchTab> {
final TextEditingController _searchController = TextEditingController();
final List<String> _categories = [
'Krafttraining',
'Ausdauer',
'Yoga',
'HIIT',
'Mobility',
'Rehabilitation',
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
floating: true,
title: TextField(
controller: _searchController,
decoration: InputDecoration(
hintText: 'Suche nach Training...',
border: InputBorder.none,
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
icon: const Icon(Icons.clear),
onPressed: () => _searchController.clear(),
),
),
),
),
SliverPadding(
padding: const EdgeInsets.all(16.0),
sliver: SliverToBoxAdapter(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Kategorien',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 16),
Wrap(
spacing: 8,
runSpacing: 8,
children:
_categories.map((category) {
return FilterChip(
label: Text(category),
onSelected: (bool selected) {
// TODO: Implement category filtering
},
);
}).toList(),
),
],
),
),
),
SliverPadding(
padding: const EdgeInsets.all(16.0),
sliver: SliverGrid(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 16,
crossAxisSpacing: 16,
childAspectRatio: 0.75,
),
delegate: SliverChildBuilderDelegate((context, index) {
return Card(
clipBehavior: Clip.antiAlias,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Container(
color: Colors.grey[300],
child: const Center(
child: Icon(Icons.fitness_center, size: 40),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Training ${index + 1}',
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
),
),
const SizedBox(height: 4),
Text(
'${30 + index * 5} Minuten',
style: TextStyle(
color: Colors.grey[600],
fontSize: 14,
),
),
],
),
),
],
),
);
}, childCount: 6),
),
),
],
),
);
}
@override
void dispose() {
_searchController.dispose();
super.dispose();
}
}