jmartin/petitspas
1
0
Fork 0
Code Issues 48 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(#173): widget NineSliceAsset réutilisable (cartes + bandeau)

Browse Source 
Presets cards/bandeau, cache images, appliqué au sélecteur couple.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jmartin
2026-10-01 17:10:41 +02:00
co-authored by Cursor
parent 42163826fe
commit 2c461abc82
4 changed files with 172 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/lib/widgets/quotidien/nine_slice_asset.dart
+118 -64
View File
@@ -3,42 +3,115 @@ import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
/// Fond 9-slice dynamique (schéma extensible.png).
///
/// - Coins : taille logique fixe (ne s’étirent pas avec l’écran)
/// - Bords H / V + centre : s’étirent pour remplir le widget
/// - Pas besoin de fichier `.9.png` Android
class NineSliceAsset extends StatefulWidget {
final String assetPath;
/// Paramètres de découpe 9-slice (schéma extensible.png).
class NineSliceSpec {
/// Zone centrale extensible en pixels source (LTRB du centre).
final Rect centerSlice;
/// Largeur logique cible des coins gauche / droite.
/// Largeur logique fixe des coins gauche / droite.
final double cornerWidth;
/// Hauteur logique cible des coins haut / bas.
/// Hauteur logique fixe des coins haut / bas.
final double cornerHeight;
const NineSliceSpec({
required this.centerSlice,
required this.cornerWidth,
required this.cornerHeight,
});
/// Bulles / cartes horizontales `card_*_h.png` (~1024×512).
static const cards = NineSliceSpec(
centerSlice: Rect.fromLTRB(160, 90, 864, 422),
cornerWidth: 56,
cornerHeight: 40,
);
/// Bandeaux couple `bandeau_*.png` (~1024×160).
static const bandeau = NineSliceSpec(
centerSlice: Rect.fromLTRB(140, 32, 884, 128),
cornerWidth: 56,
cornerHeight: 28,
);
@override
bool operator ==(Object other) =>
identical(this, other) ||
other is NineSliceSpec &&
centerSlice == other.centerSlice &&
cornerWidth == other.cornerWidth &&
cornerHeight == other.cornerHeight;
@override
int get hashCode => Object.hash(centerSlice, cornerWidth, cornerHeight);
}
/// Fond pastel extensible réutilisable (cartes, bandeau couple, etc.).
///
/// Coins à taille logique fixe ; bords H/V + centre s’étirent.
/// Pas de fichier `.9.png` Android.
class NineSliceAsset extends StatefulWidget {
final String assetPath;
final NineSliceSpec spec;
final Widget? child;
final EdgeInsetsGeometry? padding;
final BoxConstraints? constraints;
final double? width;
final double? height;
const NineSliceAsset({
super.key,
required this.assetPath,
required this.centerSlice,
this.cornerWidth = 56,
this.cornerHeight = 40,
this.spec = NineSliceSpec.cards,
this.child,
this.padding,
this.constraints,
this.width,
this.height,
});
/// Raccourci pour les bulles de la file d’attention.
const NineSliceAsset.card({
super.key,
required this.assetPath,
this.child,
this.padding,
this.constraints,
this.width,
this.height,
}) : spec = NineSliceSpec.cards;
/// Raccourci pour le bandeau choix enfant / nounou (ou parents).
const NineSliceAsset.bandeau({
super.key,
required this.assetPath,
this.child,
this.padding,
this.constraints,
this.width,
this.height,
}) : spec = NineSliceSpec.bandeau;
@override
State<NineSliceAsset> createState() => _NineSliceAssetState();
}
/// Cache partagé pour éviter de recharger le même PNG à chaque bulle.
class _NineSliceImageCache {
static final Map<String, Future<ui.Image>> _futures = {};
static Future<ui.Image> load(String path) {
return _futures.putIfAbsent(path, () async {
final data = await rootBundle.load(path);
final codec = await ui.instantiateImageCodec(
data.buffer.asUint8List(),
);
final frame = await codec.getNextFrame();
return frame.image;
});
}
}
class _NineSliceAssetState extends State<NineSliceAsset> {
ui.Image? _image;
String? _loadedPath;
@@ -57,25 +130,12 @@ class _NineSliceAssetState extends State<NineSliceAsset> {
}
}
@override
void dispose() {
_image?.dispose();
super.dispose();
}
Future<void> _load() async {
final path = widget.assetPath;
final data = await rootBundle.load(path);
final bytes = data.buffer.asUint8List();
final codec = await ui.instantiateImageCodec(bytes);
final frame = await codec.getNextFrame();
if (!mounted) {
frame.image.dispose();
return;
}
final image = await _NineSliceImageCache.load(path);
if (!mounted) return;
setState(() {
_image?.dispose();
_image = frame.image;
_image = image;
_loadedPath = path;
});
}
@@ -85,20 +145,22 @@ class _NineSliceAssetState extends State<NineSliceAsset> {
final img = _image;
final ready = img != null && _loadedPath == widget.assetPath;
return Container(
constraints: widget.constraints,
child: CustomPaint(
painter: ready
? _NineSlicePainter(
image: img!,
centerSlice: widget.centerSlice,
cornerWidth: widget.cornerWidth,
cornerHeight: widget.cornerHeight,
)
: null,
child: Padding(
padding: widget.padding ?? EdgeInsets.zero,
child: widget.child,
return SizedBox(
width: widget.width,
height: widget.height,
child: Container(
constraints: widget.constraints,
child: CustomPaint(
painter: ready
? _NineSlicePainter(
image: img!,
spec: widget.spec,
)
: null,
child: Padding(
padding: widget.padding ?? EdgeInsets.zero,
child: widget.child,
),
),
),
);
@@ -107,15 +169,11 @@ class _NineSliceAssetState extends State<NineSliceAsset> {
class _NineSlicePainter extends CustomPainter {
final ui.Image image;
final Rect centerSlice;
final double cornerWidth;
final double cornerHeight;
final NineSliceSpec spec;
_NineSlicePainter({
required this.image,
required this.centerSlice,
required this.cornerWidth,
required this.cornerHeight,
required this.spec,
});
@override
@@ -124,8 +182,8 @@ class _NineSlicePainter extends CustomPainter {
final srcW = image.width.toDouble();
final srcH = image.height.toDouble();
final centerSlice = spec.centerSlice;
// Découpe source (pixels image) — coins / bords / centre.
final srcLeft = centerSlice.left.clamp(0.0, srcW);
final srcTop = centerSlice.top.clamp(0.0, srcH);
final srcRight = centerSlice.right.clamp(0.0, srcW);
@@ -138,13 +196,12 @@ class _NineSlicePainter extends CustomPainter {
final srcCenterW = (srcRight - srcLeft).clamp(1.0, srcW);
final srcCenterH = (srcBottom - srcTop).clamp(1.0, srcH);
// Destination : coins à taille logique fixe, plafonnés à la moitié
// pour rester valides sur très petits widgets.
final dstLeftW = cornerWidth.clamp(1.0, size.width / 2);
final dstRightW = cornerWidth.clamp(1.0, size.width / 2);
final dstTopH = cornerHeight.clamp(1.0, size.height / 2);
final dstBottomH = cornerHeight.clamp(1.0, size.height / 2);
final dstCenterW = (size.width - dstLeftW - dstRightW).clamp(0.0, size.width);
final dstLeftW = spec.cornerWidth.clamp(1.0, size.width / 2);
final dstRightW = spec.cornerWidth.clamp(1.0, size.width / 2);
final dstTopH = spec.cornerHeight.clamp(1.0, size.height / 2);
final dstBottomH = spec.cornerHeight.clamp(1.0, size.height / 2);
final dstCenterW =
(size.width - dstLeftW - dstRightW).clamp(0.0, size.width);
final dstCenterH =
(size.height - dstTopH - dstBottomH).clamp(0.0, size.height);
@@ -156,7 +213,7 @@ class _NineSlicePainter extends CustomPainter {
canvas.drawImageRect(image, src, dst, paint);
}
// Ligne du haut
// Haut
draw(
Rect.fromLTWH(0, 0, srcLeftW, srcTopH),
Rect.fromLTWH(0, 0, dstLeftW, dstTopH),
@@ -170,7 +227,7 @@ class _NineSlicePainter extends CustomPainter {
Rect.fromLTWH(dstLeftW + dstCenterW, 0, dstRightW, dstTopH),
);
// Ligne du milieu
// Milieu
draw(
Rect.fromLTWH(0, srcTop, srcLeftW, srcCenterH),
Rect.fromLTWH(0, dstTopH, dstLeftW, dstCenterH),
@@ -184,7 +241,7 @@ class _NineSlicePainter extends CustomPainter {
Rect.fromLTWH(dstLeftW + dstCenterW, dstTopH, dstRightW, dstCenterH),
);
// Ligne du bas
// Bas
draw(
Rect.fromLTWH(0, srcBottom, srcLeftW, srcBottomH),
Rect.fromLTWH(0, dstTopH + dstCenterH, dstLeftW, dstBottomH),
@@ -206,9 +263,6 @@ class _NineSlicePainter extends CustomPainter {
@override
bool shouldRepaint(covariant _NineSlicePainter oldDelegate) {
return oldDelegate.image != image ||
oldDelegate.centerSlice != centerSlice ||
oldDelegate.cornerWidth != cornerWidth ||
oldDelegate.cornerHeight != cornerHeight;
return oldDelegate.image != image || oldDelegate.spec != spec;
}
}