Използването на класа ImageFiltered върху някои изображения с ImageFilter.blur() и наличието на sigmaX и sigmaY, по-големи от 0, може да доведе до някои неочаквани резултати. 2) Трептене на замъгленото изображение около границите. 2) Пикселизирана рамка около изображението и от всяка страна.
По-долу в този пример за това, върху което се опитвам да направя размазване. Имам заглавно изображение, което искам да използвам и замъгля, а по-долу е нормален ListView, който ще използвам за изобразяване на някои данни по-късно. Екранът ще може да се превърта и ще има SingleChildScrollView върху него.
Прилагам джаджа ImageFiltered, за да замъгля това изображение. Също така давам на контейнера около него цвят Colors.white, за да покажа действителната пикселирана граница, която се случва около изображението. В момента без този цвят все още ще виждате граница, но тя ще бъде черна, защото цветът на фона на екрана е черен. Беше по-лесно да се покаже по този начин.
Замъгленото изображение също ще трепти, докато екранът се превърта вертикално, което е нещо, което трябва да избягваме изцяло.
За да коригираме това, ще позиционираме джаджа Stack вътре в контейнера, която дава височината за това. Ще спрем трептенето на изображението, като използваме TileMode.decal като enum за свойството tileModeвътре в конструктора на клас ImageFilter.blur(). След това ще използваме Positioned.fill(), за да разтегнем изображението, за да избегнем пикселизираните граници на изображението. По-долу е кодът и екранната снимка на внедряването:
Вече можете да превъртате без проблеми и проблемът с пикселизираното замъгляване е премахнат.
Репото на github за този проблем може да се намери тук: https://github.com/blakewood84/flutter-blur-boundaries
Благодаря ти!
