refactor: move UI into presentation/widgets and presentation/pages

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-09 11:41:41 +02:00
co-authored by Claude Opus 4.8
parent 29d2c92b37
commit 439c0101f4
8 changed files with 6 additions and 6 deletions
@@ -0,0 +1,87 @@
import 'package:flutter/material.dart';
class PokemonImage extends StatelessWidget {
final String imageUrl;
final String? fallbackUrl;
final BoxFit fit;
final double? width;
final double? height;
final Color? color;
final BlendMode? colorBlendMode;
const PokemonImage({
super.key,
required this.imageUrl,
this.fallbackUrl,
this.fit = BoxFit.contain,
this.width,
this.height,
this.color,
this.colorBlendMode,
});
@override
Widget build(BuildContext context) {
return Image.network(
imageUrl,
fit: fit,
width: width,
height: height,
color: color,
colorBlendMode: colorBlendMode,
errorBuilder: (context, error, stackTrace) {
// If the primary image fails and we have a fallback, try the fallback
if (fallbackUrl != null && fallbackUrl != imageUrl) {
return Image.network(
fallbackUrl!,
fit: fit,
width: width,
height: height,
color: color,
colorBlendMode: colorBlendMode,
errorBuilder: (context, error, stackTrace) {
// If the fallback also fails, show a placeholder
return _buildPlaceholder();
},
);
}
// No fallback, show placeholder
return _buildPlaceholder();
},
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
: null,
),
);
},
);
}
Widget _buildPlaceholder() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.help_outline,
size: (width ?? 40) * 0.5,
color: Colors.grey[400],
),
if ((width ?? 100) > 60)
Text(
"Not Found",
style: TextStyle(
color: Colors.grey[600],
fontSize: 10,
fontWeight: FontWeight.bold,
),
),
],
),
);
}
}
@@ -0,0 +1,87 @@
import 'package:flutter/material.dart';
import '../../domain/entities/pokemon.dart';
import 'pokemon_image.dart';
class PokemonTile extends StatelessWidget {
const PokemonTile(this.pokemon, {Key? key}) : super(key: key);
final Pokemon pokemon;
@override
Widget build(BuildContext context) {
// If not caught, we don't allow navigating to the detail page (to force guessing)
return GestureDetector(
onTap: pokemon.isCaught ? () {
Navigator.pushNamed(context, "/pokemon-detail", arguments: pokemon);
} : null,
child: Container(
height: 80,
margin: const EdgeInsets.only(bottom: 12),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: const Color(0xFFE2EBF0), // lighter grey for tile surface
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.white, width: 2),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(25),
blurRadius: 2,
offset: const Offset(2, 2),
)
]
),
child: Row(
children: [
// Image box
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: pokemon.isCaught ? const Color(0xFF78909C) : Colors.grey[700],
border: Border.all(color: Colors.white, width: 2),
borderRadius: BorderRadius.circular(4),
),
child: pokemon.isCaught
? PokemonImage(imageUrl: pokemon.imageUrl, fit: BoxFit.contain)
: const SizedBox.expand(),
),
const SizedBox(width: 16),
// Name texts
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'No. ${pokemon.id.toString().padLeft(3, '0')}',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: Colors.grey[600],
),
),
const SizedBox(height: 4),
Text(
pokemon.isCaught ? pokemon.formatedName.toUpperCase() : '???',
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: pokemon.isCaught ? Colors.black87 : Colors.grey[500],
),
),
],
),
),
// Caught check icon
if (pokemon.isCaught)
const Icon(Icons.check_circle, color: Colors.green, size: 28)
else
Icon(Icons.help, color: Colors.grey[400], size: 24),
],
),
),
);
}
}
@@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import '../../domain/entities/pokemon.dart';
import '../theme/type_colors.dart';
// Widget qui permet d'afficher un type de Pokémon
// Elle prend en paramètre un type de Pokémon
// Elle affiche le nom du type avec une couleur de fond correspondant au type
class PokemonTypeWidget extends StatelessWidget {
const PokemonTypeWidget(this.type, {Key? key}) : super(key: key);
final PokemonType type;
@override
Widget build(BuildContext context) {
String typeName = formatedTypeName(type);
Color typeColor = typeToColor(type);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
margin: const EdgeInsets.only(right: 6),
alignment: Alignment.center,
decoration: BoxDecoration(
color: typeColor,
borderRadius: BorderRadius.circular(10),
// On rajoute une bordure noire si le fond est blanc
border: typeColor == Colors.white ? Border.all(color: Colors.black) : null,
),
child: SizedBox(
width: 60,
// Discriminant pour définir la couleur du texte en fonction de la couleur de fond
child: Text(typeName, style: TextStyle(color: (typeColor == Colors.white) ? Colors.black : Colors.white), textAlign: TextAlign.center)
),
);
}
}