Merge: split pokemon_list into sub-widgets (<150 lines)
This commit is contained in:
commit
9d49cef271
@ -3,7 +3,11 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|||||||
import '../../domain/entities/pokemon.dart';
|
import '../../domain/entities/pokemon.dart';
|
||||||
import '../providers/pokedex_provider.dart';
|
import '../providers/pokedex_provider.dart';
|
||||||
import '../widgets/pokemon_tile.dart';
|
import '../widgets/pokemon_tile.dart';
|
||||||
|
import '../widgets/scanline_overlay.dart';
|
||||||
|
import '../widgets/list/pokedex_list_header.dart';
|
||||||
|
import '../widgets/list/pokedex_count_bar.dart';
|
||||||
|
|
||||||
|
/// Liste du Pokédex national avec filtre ALL / CAUGHT.
|
||||||
class PokemonListPage extends ConsumerStatefulWidget {
|
class PokemonListPage extends ConsumerStatefulWidget {
|
||||||
const PokemonListPage({Key? key}) : super(key: key);
|
const PokemonListPage({Key? key}) : super(key: key);
|
||||||
|
|
||||||
@ -35,21 +39,7 @@ class _PokemonListPageState extends ConsumerState<PokemonListPage> {
|
|||||||
decoration: const BoxDecoration(color: Color(0xFFC8D1D8)),
|
decoration: const BoxDecoration(color: Color(0xFFC8D1D8)),
|
||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
// Header
|
const PokedexListHeader(),
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
|
|
||||||
color: const Color(0xFF90A4AE),
|
|
||||||
child: const Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: [
|
|
||||||
Icon(Icons.menu, color: Colors.black87),
|
|
||||||
Text('LIST - NATIONAL',
|
|
||||||
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
|
|
||||||
Icon(Icons.search, color: Colors.black87),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// Tabs
|
|
||||||
Container(
|
Container(
|
||||||
color: const Color(0xFF90A4AE),
|
color: const Color(0xFF90A4AE),
|
||||||
height: 40,
|
height: 40,
|
||||||
@ -60,62 +50,20 @@ class _PokemonListPageState extends ConsumerState<PokemonListPage> {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Caught Count Bar
|
PokedexCountBar(caught: caughtCount, total: pokedexAsync.valueOrNull?.length ?? 0),
|
||||||
Container(
|
|
||||||
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
color: Color(0xFFB0BEC5),
|
|
||||||
border: Border(bottom: BorderSide(color: Color(0xFF78909C), width: 2)),
|
|
||||||
),
|
|
||||||
child: Column(
|
|
||||||
children: [
|
|
||||||
Text(
|
|
||||||
'${caughtCount.toString().padLeft(3, '0')} / ${pokedexAsync.valueOrNull?.length ?? 0}',
|
|
||||||
style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
|
||||||
),
|
|
||||||
const Text('POKEMON DISCOVERED',
|
|
||||||
style: TextStyle(fontSize: 14, color: Colors.black54, letterSpacing: 1)),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
// The List
|
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Stack(
|
child: Stack(
|
||||||
children: [
|
children: [
|
||||||
Positioned.fill(
|
const ScanlineOverlay(),
|
||||||
child: ListView.builder(
|
|
||||||
itemCount: 100,
|
|
||||||
physics: const NeverScrollableScrollPhysics(),
|
|
||||||
itemBuilder: (context, index) => Container(
|
|
||||||
height: 4,
|
|
||||||
margin: const EdgeInsets.only(bottom: 4),
|
|
||||||
color: Colors.black.withAlpha(2),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
pokedexAsync.when(
|
pokedexAsync.when(
|
||||||
loading: () => const Center(child: CircularProgressIndicator()),
|
loading: () => const Center(child: CircularProgressIndicator()),
|
||||||
error: (e, _) => Center(
|
error: (e, _) => Center(
|
||||||
child: Text('Erreur de chargement\n$e',
|
child: Text('Erreur de chargement\n$e',
|
||||||
textAlign: TextAlign.center,
|
textAlign: TextAlign.center, style: const TextStyle(color: Colors.black54)),
|
||||||
style: const TextStyle(color: Colors.black54)),
|
|
||||||
),
|
),
|
||||||
data: (all) {
|
data: (all) {
|
||||||
final filtered = _applyFilter(all);
|
final filtered = _applyFilter(all);
|
||||||
if (filtered.isEmpty) {
|
if (filtered.isEmpty) return _emptyState();
|
||||||
return Center(
|
|
||||||
child: Column(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: [
|
|
||||||
const Icon(Icons.search_off, size: 64, color: Colors.black26),
|
|
||||||
const SizedBox(height: 16),
|
|
||||||
Text('NO POKEMON FOUND IN $_filter',
|
|
||||||
style: const TextStyle(
|
|
||||||
color: Colors.black45, fontSize: 18, fontWeight: FontWeight.bold)),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return ListView.builder(
|
return ListView.builder(
|
||||||
controller: _scrollController,
|
controller: _scrollController,
|
||||||
padding: const EdgeInsets.all(12),
|
padding: const EdgeInsets.all(12),
|
||||||
@ -127,7 +75,6 @@ class _PokemonListPageState extends ConsumerState<PokemonListPage> {
|
|||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// Footer
|
|
||||||
Container(
|
Container(
|
||||||
height: 24,
|
height: 24,
|
||||||
color: const Color(0xFF1B2333),
|
color: const Color(0xFF1B2333),
|
||||||
@ -140,6 +87,20 @@ class _PokemonListPageState extends ConsumerState<PokemonListPage> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _emptyState() {
|
||||||
|
return Center(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: [
|
||||||
|
const Icon(Icons.search_off, size: 64, color: Colors.black26),
|
||||||
|
const SizedBox(height: 16),
|
||||||
|
Text('NO POKEMON FOUND IN $_filter',
|
||||||
|
style: const TextStyle(color: Colors.black45, fontSize: 18, fontWeight: FontWeight.bold)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
Widget _buildTab(String title, bool isSelected) {
|
Widget _buildTab(String title, bool isSelected) {
|
||||||
return Expanded(
|
return Expanded(
|
||||||
child: GestureDetector(
|
child: GestureDetector(
|
||||||
@ -159,9 +120,7 @@ class _PokemonListPageState extends ConsumerState<PokemonListPage> {
|
|||||||
alignment: Alignment.center,
|
alignment: Alignment.center,
|
||||||
child: Text(title,
|
child: Text(title,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 18,
|
fontSize: 18, fontWeight: FontWeight.bold, color: isSelected ? Colors.black : Colors.black54)),
|
||||||
fontWeight: FontWeight.bold,
|
|
||||||
color: isSelected ? Colors.black : Colors.black54)),
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|||||||
29
lib/presentation/widgets/list/pokedex_count_bar.dart
Normal file
29
lib/presentation/widgets/list/pokedex_count_bar.dart
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// Bandeau affichant le nombre de Pokémon découverts sur le total.
|
||||||
|
class PokedexCountBar extends StatelessWidget {
|
||||||
|
final int caught;
|
||||||
|
final int total;
|
||||||
|
const PokedexCountBar({super.key, required this.caught, required this.total});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.symmetric(vertical: 12.0),
|
||||||
|
decoration: const BoxDecoration(
|
||||||
|
color: Color(0xFFB0BEC5),
|
||||||
|
border: Border(bottom: BorderSide(color: Color(0xFF78909C), width: 2)),
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
children: [
|
||||||
|
Text(
|
||||||
|
'${caught.toString().padLeft(3, '0')} / $total',
|
||||||
|
style: const TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
|
||||||
|
),
|
||||||
|
const Text('POKEMON DISCOVERED',
|
||||||
|
style: TextStyle(fontSize: 14, color: Colors.black54, letterSpacing: 1)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
23
lib/presentation/widgets/list/pokedex_list_header.dart
Normal file
23
lib/presentation/widgets/list/pokedex_list_header.dart
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
/// Barre de titre de la liste du Pokédex.
|
||||||
|
class PokedexListHeader extends StatelessWidget {
|
||||||
|
const PokedexListHeader({super.key});
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
|
||||||
|
color: const Color(0xFF90A4AE),
|
||||||
|
child: const Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
Icon(Icons.menu, color: Colors.black87),
|
||||||
|
Text('LIST - NATIONAL',
|
||||||
|
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, letterSpacing: 2)),
|
||||||
|
Icon(Icons.search, color: Colors.black87),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user