[flutter] glassmorphism 을 사용해보자.

https://pub.dev/packages/glassmorphism

glassmorphism | Flutter Package

여기에 가면 라이브러리를 설치할수 있다.

 

짧고 간략하게 적자면

 

우리 개발자들은 소스코드로 말하는게 가장 쉽고 빠르니깐..

 

이라이브러리가 뭐하는 라이브러리냐.. 하면 요즘 2021 ui트렌드인 glassmorphism을 쉽게 구현할수있게 만들어준 것이다

 

Center(
child: GlassmorphicContainer(
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
child: FadeStackAuth(
selectedForm: selectedForm,
widgetList: _list,
),
),
width: size!.width / 10 * 9,
height: size!.height / 10 * 5,
borderRadius: 20,
linearGradient: LinearGradient(colors: [
Colors.white.withOpacity(0.3),
Colors.white.withOpacity(0.2),
], stops: [
0.1,
1
]),
border: 2,
blur: 40,
borderGradient: LinearGradient(colors: [
Colors.white.withOpacity(0.5),
Colors.white.withOpacity(0.5)
])),
),

 

 

 

 

이런식으로 사용하면 되는데.

 

위젯쓰듯이 쓰시면되고 파라미터는 다음과 같다.

 

 

• height (double) [required] - Height for the Widget [required].
• width (double)  [required]- Width for the Widget [@required].
• borderRadius (double) [required]- Border Radius for the widget 0 - any [@required].
• linearGradient (LinearGradient) [required]- Fills the container with the gradient passed.
• border (double) [required]- Gives Width to the ContainerBorder.
• blur (double) [required]- Gives BlurFilter to the Container.
• borderGradient (LinearGradient) [required]- Fills the container's border with the gradient passed.
• child (widget) - [optional parameter] If there is a child widget then the widget will be rendered inside the container.
• alignment (optional) - Handles the alignment [Default_value] - [Alignemt.topleft].
• padding (EdgeInset) - Used to provide pading to the child widget [Default_value] - [None].
• BoxShape (Fixed) - This value is fixed to [BoxFit.rectangle].
• constraints (ChatUser) - The constructor width and height arguments are combined with the constraints argument to set this property.
• margin (double) - Empty space to surround the [decoration] and [child].

 

height, width는 글래스 처리할 상자의 가로, 세로 길이고

borderRadius는 말그대로 테두리 둥글게

나머지도 이름 그대로 

child는  글래스 박스안에 넣을 child를 뜻한다. 

gradient들에서 opacity를 조절하여 색상에 짙음 정도를 조절할 수있다.

 

 

 

요런식으로 이쁘게 쓸수있다.