FreeTLab
9a75027d57
Issue 3 (feedback-pruebas): t4:260 draws a 14px gap between "Tus idiomas" and "Todos", not 16.
344 lines
12 KiB
Dart
344 lines
12 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
|
|
import '../estado/estado_busqueda.dart';
|
|
import '../l10n/gen/app_localizations.dart';
|
|
import '../modelos/pais_radio.dart';
|
|
import '../tema/pluriwave_theme.dart';
|
|
import '../tema/pluriwave_tokens.dart';
|
|
import '../widgets/pluri_layout.dart';
|
|
import '../widgets/pluri_push_scaffold.dart';
|
|
|
|
/// WU7, `station-discovery-browse` spec — "Países Browser Over the Verified
|
|
/// Countries Contract". Pure display over `EstadoBusqueda.cargarPaises()`
|
|
/// (in-memory cache guard, so re-entering this screen never re-fetches):
|
|
/// a "Tus idiomas" shortlist above the full alphabetical list, both with
|
|
/// live station counts already parsed from the API's `stationcount`
|
|
/// **string** field (`PaisRadio.fromApi`, Engram id 2500).
|
|
class PantallaPaises extends StatefulWidget {
|
|
const PantallaPaises({super.key, this.onPaisSeleccionado});
|
|
|
|
/// Item 24 / audit 5.2 (t4:256-269): every row is tappable (the prototype
|
|
/// draws a `chevron_right` on all of them). Optional so this screen stays
|
|
/// usable stand-alone; the one production call site
|
|
/// (`pantalla_buscar.dart`'s "Explorar por" grid) wires this to filter
|
|
/// search results by the tapped country and pop back.
|
|
final ValueChanged<PaisRadio>? onPaisSeleccionado;
|
|
|
|
@override
|
|
State<PantallaPaises> createState() => _PantallaPaisesState();
|
|
}
|
|
|
|
class _PantallaPaisesState extends State<PantallaPaises> {
|
|
/// Audit 5.7 (t4:252): the header's `search` action. Null means "not
|
|
/// searching" — an ephemeral UI concern (design's "State is for
|
|
/// ephemeral UI only" ruling), never persisted.
|
|
bool _buscando = false;
|
|
final _controladorBusqueda = TextEditingController();
|
|
|
|
/// One representative country per app-supported locale (the same 13
|
|
/// locales as `pantalla_ajustes_idioma.dart`'s `_idiomas` list). "Tus
|
|
/// idiomas" is named by the proposal/spec but its derivation is not
|
|
/// otherwise specified — this reuses the app's own existing language
|
|
/// identity rather than inventing a separate curated country list.
|
|
static const _paisPorIdioma = <String, String>{
|
|
'en': 'US',
|
|
'es': 'ES',
|
|
'zh': 'CN',
|
|
'hi': 'IN',
|
|
'ar': 'SA',
|
|
'pt': 'PT',
|
|
'fr': 'FR',
|
|
'ru': 'RU',
|
|
'de': 'DE',
|
|
'ja': 'JP',
|
|
'id': 'ID',
|
|
'bn': 'BD',
|
|
'it': 'IT',
|
|
};
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
// `cargarPaises()` calls `notifyListeners()` before its first `await`
|
|
// (its loading-flag flip) — doing that synchronously inside `initState`
|
|
// would trigger "setState() or markNeedsBuild() called during build."
|
|
// Deferred to a post-frame callback, matching the established pattern
|
|
// for triggering a load from a screen's `initState`/`build`
|
|
// (`pantalla_alarmas.dart`'s `_favoritosSolicitados` guard).
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (mounted) context.read<EstadoBusqueda>().cargarPaises();
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controladorBusqueda.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final l10n = AppLocalizations.of(context);
|
|
final estado = context.watch<EstadoBusqueda>();
|
|
final query = _controladorBusqueda.text.trim().toLowerCase();
|
|
final paisesFiltrados =
|
|
query.isEmpty
|
|
? estado.paises
|
|
: estado.paises
|
|
.where(
|
|
(p) =>
|
|
p.nombre.toLowerCase().contains(query) ||
|
|
p.codigoIso.toLowerCase().contains(query),
|
|
)
|
|
.toList();
|
|
|
|
return PluriPushScaffold(
|
|
title: l10n.countriesScreenTitle,
|
|
// Audit 5.7 (t4:252): a `search` header action -- toggles an inline
|
|
// filter field over the SAME country list, rather than a decorative
|
|
// no-op button. `PluriPushScaffold.titleOverride` stays reserved for
|
|
// its one documented exception (the player's "EN DIRECTO" pill) --
|
|
// the search field lives in the body instead, not the AppBar title.
|
|
actions: [
|
|
IconButton(
|
|
key: const ValueKey('countries-search-toggle'),
|
|
icon: Icon(_buscando ? Icons.close_rounded : Icons.search_rounded),
|
|
tooltip: l10n.navSearch,
|
|
onPressed:
|
|
() => setState(() {
|
|
_buscando = !_buscando;
|
|
if (!_buscando) _controladorBusqueda.clear();
|
|
}),
|
|
),
|
|
],
|
|
body:
|
|
estado.cargandoPaises && estado.paises.isEmpty
|
|
? const Center(child: CircularProgressIndicator())
|
|
: ListView(
|
|
padding: PluriLayout.pageContentPadding,
|
|
children: [
|
|
if (_buscando)
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 12),
|
|
child: TextField(
|
|
key: const ValueKey('countries-search-field'),
|
|
controller: _controladorBusqueda,
|
|
autofocus: true,
|
|
decoration: InputDecoration(
|
|
hintText: l10n.countriesSearchHint,
|
|
prefixIcon: const Icon(Icons.search_rounded),
|
|
),
|
|
onChanged: (_) => setState(() {}),
|
|
),
|
|
),
|
|
if (query.isEmpty) ...[
|
|
_seccionTusIdiomas(context, estado.paises, l10n),
|
|
// Issue 3 (feedback-pruebas): t4:260 draws a 14px gap
|
|
// between "Tus idiomas" and "Todos", not 16.
|
|
const SizedBox(
|
|
height: 14,
|
|
key: ValueKey('paises-seccion-gap'),
|
|
),
|
|
_seccionTodos(context, estado.paises, l10n),
|
|
] else
|
|
_seccionTodos(context, paisesFiltrados, l10n),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
void _seleccionar(PaisRadio pais) {
|
|
widget.onPaisSeleccionado?.call(pais);
|
|
}
|
|
|
|
Widget _seccionTusIdiomas(
|
|
BuildContext context,
|
|
List<PaisRadio> paises,
|
|
AppLocalizations l10n,
|
|
) {
|
|
final porCodigo = {for (final p in paises) p.codigoIso: p};
|
|
final destacados =
|
|
_paisPorIdioma.values
|
|
.map((codigo) => porCodigo[codigo])
|
|
.whereType<PaisRadio>()
|
|
.toList();
|
|
|
|
if (destacados.isEmpty) return const SizedBox.shrink();
|
|
|
|
final type = context.pluriType;
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Audit 5.4 (t4:254): an eyebrow OUTSIDE any card, title-tier
|
|
// (20px) padding -- was titleMedium w900 inside a PluriGlassSurface.
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
PluriLayout.titleHorizontal,
|
|
0,
|
|
PluriLayout.titleHorizontal,
|
|
8,
|
|
),
|
|
child: Text(
|
|
l10n.countriesYourLanguagesTitle,
|
|
style: type.eyebrowLabel,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: PluriLayout.rowHorizontal,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// Item 24 / audit 5.1 (t4:255-258): a column of tappable ISO
|
|
// rows, not a Wrap of non-interactive Chips.
|
|
for (final pais in destacados)
|
|
_FilaPais(
|
|
pais: pais,
|
|
l10n: l10n,
|
|
// Item 24 / audit 5.5 (t4:256): the first row is
|
|
// highlighted.
|
|
destacado: pais == destacados.first,
|
|
onTap: () => _seleccionar(pais),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _seccionTodos(
|
|
BuildContext context,
|
|
List<PaisRadio> paises,
|
|
AppLocalizations l10n,
|
|
) {
|
|
final type = context.pluriType;
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Audit 5.4 (t4:260-261): "TODOS · 238" -- an eyebrow OUTSIDE any
|
|
// card, carrying the total country count, which never rendered
|
|
// anywhere before.
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
PluriLayout.titleHorizontal,
|
|
0,
|
|
PluriLayout.titleHorizontal,
|
|
8,
|
|
),
|
|
child: Text(
|
|
'${l10n.countriesAllTitle} · ${paises.length}',
|
|
style: type.eyebrowLabel,
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: PluriLayout.rowHorizontal,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// Item 24 / audit 5.1-5.3 (t4:262-269): the same tappable ISO
|
|
// row as "Tus idiomas" -- not the previous ListTile, which
|
|
// had no ISO column and no onTap.
|
|
for (final pais in paises)
|
|
_FilaPais(
|
|
pais: pais,
|
|
l10n: l10n,
|
|
onTap: () => _seleccionar(pais),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
/// Item 24 / audit 5.1-5.3, 5.5 (t4:256-269): a tappable row -- ISO code
|
|
/// column, name, station count, and a chevron -- shared by "Tus idiomas"
|
|
/// and "Todos". [destacado] applies the t4:256 highlight (teal-tinted
|
|
/// background, bold name) reserved for the very first "Tus idiomas" row.
|
|
class _FilaPais extends StatelessWidget {
|
|
const _FilaPais({
|
|
required this.pais,
|
|
required this.l10n,
|
|
this.destacado = false,
|
|
this.onTap,
|
|
});
|
|
|
|
final PaisRadio pais;
|
|
final AppLocalizations l10n;
|
|
final bool destacado;
|
|
final VoidCallback? onTap;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final onSurface = Theme.of(context).colorScheme.onSurface;
|
|
return DecoratedBox(
|
|
decoration: BoxDecoration(
|
|
color:
|
|
destacado
|
|
? PluriWaveTokens.brand.withValues(alpha: 0.1)
|
|
: Colors.transparent,
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
child: Material(
|
|
type: MaterialType.transparency,
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(14),
|
|
onTap: onTap,
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Row(
|
|
children: [
|
|
// t4:256-258: 26px/lh1, centred in a 34-wide column.
|
|
SizedBox(
|
|
width: 34,
|
|
child: Text(
|
|
pais.codigoIso,
|
|
textAlign: TextAlign.center,
|
|
style: const TextStyle(fontSize: 26, height: 1),
|
|
),
|
|
),
|
|
const SizedBox(width: 14),
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
pais.nombre,
|
|
style: TextStyle(
|
|
fontSize: 15.5,
|
|
fontWeight:
|
|
destacado ? FontWeight.w800 : FontWeight.w700,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
l10n.stationsCount(pais.numeroEmisoras),
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: onSurface.withValues(alpha: 0.55),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Icon(
|
|
Icons.chevron_right_rounded,
|
|
size: 20,
|
|
color: onSurface.withValues(alpha: 0.4),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|