Lors de l'application de ImageFilter.blur à une image, les bords de l'image restent inchangés.
Comment J'étends le flou jusqu'aux bords?
import 'dart:ui';
import 'package:flutter/material.dart';
class ExamplePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
);
}
}
3 Réponses :
Si vous remplacez le code mentionné ci-dessus par
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: CachedNetworkImageProvider("https://i.pinimg.com/236x/93/ca/59/93ca599d74b60b4e9b30cd9472f842b7--patterns-in-nature-beautiful-patterns.jpg"),
fit: BoxFit.cover,
),
),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
),
),
);
Alors cela ressemble à ceci et le problème des bords est résolu
vous avez raison. ça a l'air beaucoup mieux. mais les bords sont encore plus nets que le centre. Et j'ai besoin que le flou soit plus sévère. Il semble que vous venez de réduire les sigmas de 20 à 5.
J'ai vérifié sur un appareil Android avec un filtre : ImageFilter.blur (sigmaX: 20, sigmaY: 20), et cela fonctionne bien. L'avez-vous vérifié sur un appareil iOS?
Cela semble n'affecter que les appareils iOS
Ce n'est peut-être pas ce que vous voulez entendre, ou ce pourrait être = D. Le problème que vous voyez est que le moteur de rendu logiciel de Skia a un problème de flou. Vous ne rencontrerez pas le même problème sur le simulateur Android, sauf si vous activez spécifiquement le rendu logiciel, ni sur les appareils réels car ils utilisent le rendu matériel.
Ceci est sur mon iPhone:
Si vous avez vraiment besoin de flou pour fonctionner correctement dans le simulateur, je vous recommande d'ajouter un +1 à ce problème ou créer un nouveau problème dans le référentiel Flutter avec l'image ci-dessus (comme dans le problème auquel je l'ai lié, il semblait qu'ils voyaient une incohérence plutôt que exactement ce que vous avez observé, même si j'imagine le correctif corrigerait ce que vous voyez également).
Une solution qui ne nécessiterait pas que ce bogue soit corrigé pour le simulateur est possible, je pense ... Vous pourriez théoriquement utiliser un débordement pour faire sortir le flou du bord de l'écran d'au moins la taille de le flou, faites alors décaler l'image du même montant que le débordement, et retournez les copies de la même image en dehors des limites de l'écran pour que la coloration sur le flou soit correcte .... mais cela semble un peu exagéré = D.
Ah ok. Je vous remercie! Je ne l'avais pas encore essayé sur un appareil réel.
Le correctif sera bientôt disponible dans la version stable du SDK Flutter, jusqu'à ce que si vous en avez besoin, passez au canal maître en l'exécutant dans le terminal et reconstruisez votre application:
flutter channel master
source: Le filtre Backdrop n'est pas cohérent sur le rendu du logiciel
J'ai essayé cela sur mon téléphone Android et cela a bien fonctionné. Les bords étaient flous. Je suppose que c'est un problème sur IOS?
@JeromeEscalante Ouais, ça semble aller sur Android. Je me demande si cela a quelque chose à voir avec ses widgets parents? OP, pourriez-vous s'il vous plaît poster votre fichier .dart pour le widget ici si possible?
@ AD8 merci. J'ai mis à jour le code avec le contenu exact du fichier