플러터(FLutter)에서는 다양한 위젯을 조합하여 강력한 UI를 구성할 수 있습니다. 이번에는 Stack 위젯과 ShaderMask 위젯을 함께 사용하여 흥미로운 효과를 내는 예시를 살펴보겠습니다.
Stack 위젯과는 무엇인가요?
Stack 위젯은 여러 개의 자식 위젯을 겹쳐서 표시할 수 있는 위젯입니다. 자식 위젯은 서로 다른 위치와 크기를 가질 수 있습니다. 흔히, 다중레이어로 UI를 구성할 때 사용됩니다.
ShaderMask 위젯과는 무엇인가요?
ShaderMask 위젯은 Shader(그라데이션, 이미지 등)를 사용하여 자식 위젯들을 마스킹(masking)하는 역할을 합니다. 이를 통해 다양한 효과를 줄 수 있습니다. 주로 이미지에 마스킹 효과를 주거나, 이미지에 그라데이션을 적용하는 등 다양한 스타일링에 사용됩니다.
Stack 위젯과 ShaderMask 위젯을 조합하여 사용해보자
다음은 Stack 위젯과 ShaderMask 위젯을 함께 사용하여 이미지 위에 그라데이션을 적용하는 예시 코드입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stack and ShaderMask Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Stack and ShaderMask Example'),
),
body: Stack(
children: [
Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
),
ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
colors: [Colors.transparent, Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
).createShader(bounds);
},
blendMode: BlendMode.dstIn,
child: Container(
color: Colors.white,
),
),
],
),
),
);
}
}
위 코드는 Stack 위젯을 사용하여 이미지 위에 Container 위젯을 배치한 후, ShaderMask 위젯을 사용하여 그라데이션을 적용합니다. ShaderMask 위젯의 shaderCallback 속성을 사용하여 선형 그라데이션을 지정하고, blendMode 속성을 사용하여 이미지에 적용할 블렌딩 모드를 설정합니다. 위 예시에서는 BlendMode.dstIn을 사용하여 이미지의 일부 영역만 보이도록 설정하였습니다.
결론
Flutter에서는 Stack 위젯과 ShaderMask 위젯을 조합하여 다양한 효과를 줄 수 있습니다. 위 예시 코드를 참고하여 자신만의 흥미로운 UI를 구성해 보세요.