Flutter에서 Glassmorphism 효과를 얻는 방법

유리모형이란?

Flutter Glassmorphism은 화려한 배경 위에 놓인 밝거나 어두운 물체를 강조하는 UI 디자인을 설명하는 데 사용되는 용어입니다. 물체에 배경 흐림을 적용하여 배경이 빛나도록 하여 반투명 유리 느낌을 줍니다.

Back Drop Filter로 위젯을 래핑하고 이미지 필터를 추가할 수 있지만 이 프로세스는 약간 복잡하므로 패키지의 pubspec.yaml에 다음과 같은 행을 추가하기만 하면 됩니다.

dependencies:
  glassmorphism: ^3.0.0

일단 설치되면 GlassmorphicContainer라는 위젯에 액세스할 수 있으며 다양한 속성이 있습니다.

너비: 컨테이너의 너비를 제어하는 ​​데 사용됩니다.

높이: 컨테이너의 높이를 제어하는 ​​데 사용됩니다.

borderRadius: 테두리 반경을 변경하는 데 사용됩니다.

linearGradient: 다양한 색상의 배경 그라데이션을 제공하는 데 사용됩니다.
child: 이 효과를 가질 모든 위젯을 담을 것입니다.

예를 들어 이와 같이 그라디언트를 추가할 수 있습니다.

LinearGradient(colors: [

                        Colors.white.withOpacity(0.2),

                        Colors.white.withOpacity(0.05)

                      ], begin: Alignment.topLeft, end: Alignment.bottomRight),

이것은 가장 일반적인 흰색 강화 유리 효과를 갖습니다.





Flutter Login Page - FrostedGlass Background Flutter에 대한 전체 코드

찾기Flutter Login Page 예