refactor: move UI into presentation/widgets and presentation/pages
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -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)
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user