Initial commit
This commit is contained in:
@@ -0,0 +1,112 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/dinosaur.dart';
|
||||
import '../providers/dino_provider.dart';
|
||||
|
||||
class DetailScreen extends StatelessWidget {
|
||||
final Dinosaur dinosaur;
|
||||
const DetailScreen({super.key, required this.dinosaur});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = Provider.of<DinoProvider>(context);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: Icon(provider.isFavorite(dinosaur.name) ? Icons.favorite : Icons.favorite_border, color: provider.isFavorite(dinosaur.name) ? Colors.red : null),
|
||||
onPressed: () => provider.toggleFavorite(dinosaur.name),
|
||||
)
|
||||
],
|
||||
),
|
||||
body: SingleChildScrollView(
|
||||
child: Column(
|
||||
children: [
|
||||
Hero(tag: dinosaur.name, child: Container(height: 250, width: double.infinity, padding: const EdgeInsets.all(20), child: Image.asset(dinosaur.imagePath, fit: BoxFit.contain, errorBuilder: (_,__,___) => const Icon(Icons.pets, size: 80)))),
|
||||
Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(dinosaur.name, style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold)),
|
||||
Text(dinosaur.pronunciation, style: const TextStyle(fontStyle: FontStyle.italic, color: Colors.green)),
|
||||
const SizedBox(height: 20),
|
||||
|
||||
// Bento Box with dynamic units
|
||||
GridView.count(
|
||||
shrinkWrap: true, physics: const NeverScrollableScrollPhysics(),
|
||||
crossAxisCount: 2, childAspectRatio: 2.5, mainAxisSpacing: 10, crossAxisSpacing: 10,
|
||||
children: [
|
||||
_buildTile("DIET", dinosaur.dietType, Icons.restaurant),
|
||||
_buildTile("LENGTH", provider.formatLength(dinosaur.lengthMeters), Icons.straighten),
|
||||
_buildTile("LOCOMOTION", dinosaur.locomotion, Icons.directions_run),
|
||||
_buildTile("WEIGHT", provider.formatWeight(dinosaur.weightKg), Icons.scale),
|
||||
],
|
||||
),
|
||||
|
||||
const SizedBox(height: 30),
|
||||
_buildTimeline(dinosaur.periodIndex),
|
||||
const SizedBox(height: 30),
|
||||
_buildCladogram(provider, context),
|
||||
const SizedBox(height: 30),
|
||||
|
||||
const Text("FIELD NOTES", style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1.2)),
|
||||
const Divider(),
|
||||
Text("Meaning: ${dinosaur.meaning}", style: const TextStyle(fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 10),
|
||||
Text(dinosaur.description, style: const TextStyle(fontSize: 16, height: 1.6)),
|
||||
const SizedBox(height: 40),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTimeline(int periodIndex) {
|
||||
final List<String> eras = ["Triassic", "Jurassic", "Cretaceous"];
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Text("GEOLOGICAL TIMELINE", style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 10),
|
||||
Row(children: List.generate(3, (i) => Expanded(child: Container(
|
||||
height: 35, margin: const EdgeInsets.symmetric(horizontal: 2),
|
||||
decoration: BoxDecoration(color: i == periodIndex ? Colors.green : Colors.grey.withValues(alpha: 0.1), borderRadius: BorderRadius.circular(8)),
|
||||
child: Center(child: Text(eras[i], style: TextStyle(fontSize: 10, color: i == periodIndex ? Colors.white : Colors.grey))),
|
||||
)))),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildCladogram(DinoProvider p, BuildContext context) {
|
||||
final related = p.getRelated(dinosaur);
|
||||
if (related.isEmpty) return const SizedBox();
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text("RELATED SPECIES (${dinosaur.family})", style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 10),
|
||||
SizedBox(height: 100, child: ListView.builder(
|
||||
scrollDirection: Axis.horizontal,
|
||||
itemCount: related.length,
|
||||
itemBuilder: (context, i) => GestureDetector(
|
||||
onTap: () => Navigator.push(context, MaterialPageRoute(builder: (_) => DetailScreen(dinosaur: related[i]))),
|
||||
child: Container(width: 80, margin: const EdgeInsets.only(right: 15), child: Column(children: [Expanded(child: Image.asset(related[i].imagePath, errorBuilder: (_,__,___) => const Icon(Icons.pets))), Text(related[i].name, style: const TextStyle(fontSize: 9), textAlign: TextAlign.center)]))
|
||||
)
|
||||
))
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTile(String label, String val, IconData icon) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(color: Colors.grey.withValues(alpha: 0.05), borderRadius: BorderRadius.circular(12)),
|
||||
child: Row(children: [Icon(icon, size: 20, color: Colors.green), const SizedBox(width: 8), Expanded(child: Column(crossAxisAlignment: CrossAxisAlignment.start, mainAxisAlignment: MainAxisAlignment.center, children: [Text(label, style: const TextStyle(fontSize: 9, color: Colors.grey)), Text(val, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 12))]))]),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
|
||||
import '../providers/dino_provider.dart';
|
||||
import '../models/dinosaur.dart';
|
||||
import 'detail_screen.dart';
|
||||
|
||||
class HomeScreen extends StatelessWidget {
|
||||
const HomeScreen({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final provider = Provider.of<DinoProvider>(context);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text(
|
||||
"DINO FIELD GUIDE",
|
||||
style: TextStyle(letterSpacing: 2, fontWeight: FontWeight.bold)
|
||||
),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.tune),
|
||||
onPressed: () => _showSettings(context, provider),
|
||||
)
|
||||
],
|
||||
// --- INCREASED HEIGHT FOR TWO ROWS OF FILTERS ---
|
||||
bottom: PreferredSize(
|
||||
preferredSize: const Size.fromHeight(170),
|
||||
child: Column(
|
||||
children: [
|
||||
// 1. SEARCH BAR
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: TextField(
|
||||
onChanged: (val) => provider.updateSearch(val),
|
||||
decoration: InputDecoration(
|
||||
hintText: "Search prehistoric records...",
|
||||
prefixIcon: const Icon(Icons.search, color: Colors.green),
|
||||
filled: true,
|
||||
fillColor: Colors.grey.withValues(alpha: 0.1),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
borderSide: BorderSide.none
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// 2. DIET FILTER ROW (GREEN)
|
||||
_buildFilterRow(
|
||||
context,
|
||||
provider,
|
||||
["All", "Carnivore", "Herbivore", "Omnivore"],
|
||||
true
|
||||
),
|
||||
|
||||
// 3. CLASSIFICATION FILTER ROW (BLUE)
|
||||
_buildFilterRow(
|
||||
context,
|
||||
provider,
|
||||
provider.classifications,
|
||||
false
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
body: provider.dinos.isEmpty
|
||||
? const Center(child: Text("No records match your filters."))
|
||||
: AnimationLimiter(
|
||||
child: ListView.builder(
|
||||
padding: const EdgeInsets.only(top: 10, bottom: 20),
|
||||
itemCount: provider.dinos.length,
|
||||
itemBuilder: (context, index) {
|
||||
final dino = provider.dinos[index];
|
||||
return AnimationConfiguration.staggeredList(
|
||||
position: index,
|
||||
duration: const Duration(milliseconds: 500),
|
||||
child: SlideAnimation(
|
||||
verticalOffset: 50.0,
|
||||
child: FadeInAnimation(
|
||||
child: _buildDinoCard(context, dino),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// --- REUSABLE FILTER ROW GENERATOR ---
|
||||
Widget _buildFilterRow(BuildContext context, DinoProvider p, List<String> options, bool isDietRow) {
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
|
||||
child: Row(
|
||||
children: options.map((option) {
|
||||
// Determine if this specific chip is selected
|
||||
bool isSelected = isDietRow
|
||||
? p.selectedDiet == option
|
||||
: p.selectedClassification == option;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 8),
|
||||
child: FilterChip(
|
||||
label: Text(
|
||||
option,
|
||||
style: TextStyle(
|
||||
fontSize: 11,
|
||||
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal
|
||||
)
|
||||
),
|
||||
selected: isSelected,
|
||||
onSelected: (_) {
|
||||
if (isDietRow) {
|
||||
p.updateDietFilter(option);
|
||||
} else {
|
||||
p.updateClassificationFilter(option);
|
||||
}
|
||||
},
|
||||
// GREEN THEME for Diet, BLUE THEME for Classification
|
||||
selectedColor: isDietRow
|
||||
? Colors.green.withValues(alpha: 0.2)
|
||||
: Colors.blue.withValues(alpha: 0.15),
|
||||
checkmarkColor: isDietRow ? Colors.green : Colors.blue,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
side: BorderSide(
|
||||
color: isSelected
|
||||
? (isDietRow ? Colors.green : Colors.blue)
|
||||
: Colors.grey.withValues(alpha: 0.2),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// --- SETTINGS MODAL ---
|
||||
void _showSettings(BuildContext context, DinoProvider p) {
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
builder: (context) => Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Text("TACTICAL SETTINGS", style: TextStyle(fontWeight: FontWeight.bold, letterSpacing: 1.5)),
|
||||
const Divider(),
|
||||
SwitchListTile(
|
||||
title: const Text("Night Vision Mode"),
|
||||
secondary: const Icon(Icons.dark_mode),
|
||||
value: p.isDarkMode,
|
||||
onChanged: (_) => p.toggleTheme(),
|
||||
),
|
||||
SwitchListTile(
|
||||
title: const Text("Use Imperial Units (lbs/ft)"),
|
||||
secondary: const Icon(Icons.straighten),
|
||||
value: !p.isMetric,
|
||||
onChanged: (_) => p.toggleUnits(),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// --- DINO LIST CARD ---
|
||||
Widget _buildDinoCard(BuildContext context, Dinosaur dino) {
|
||||
final provider = Provider.of<DinoProvider>(context, listen: false);
|
||||
final isFav = provider.isFavorite(dino.name);
|
||||
|
||||
return Card(
|
||||
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(15),
|
||||
side: BorderSide(color: Colors.grey.withValues(alpha: 0.1))
|
||||
),
|
||||
child: ListTile(
|
||||
contentPadding: const EdgeInsets.all(12),
|
||||
leading: Hero(
|
||||
tag: dino.name,
|
||||
child: Container(
|
||||
width: 60,
|
||||
height: 60,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.grey.withValues(alpha: 0.05),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Image.asset(
|
||||
dino.imagePath,
|
||||
fit: BoxFit.contain,
|
||||
errorBuilder: (_, __, ___) => const Icon(Icons.pets, color: Colors.grey)
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
title: Text(dino.name, style: const TextStyle(fontWeight: FontWeight.bold)),
|
||||
subtitle: Text("${dino.classification} • ${dino.period}"),
|
||||
trailing: Icon(
|
||||
isFav ? Icons.favorite : Icons.arrow_forward_ios,
|
||||
color: isFav ? Colors.red : Colors.grey.withValues(alpha: 0.5),
|
||||
size: 16
|
||||
),
|
||||
onTap: () => Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(builder: (_) => DetailScreen(dinosaur: dino))
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user