[flutter] linearGradient opacity 조절하여 일부 투명하게 만들기

개요

플러터 개발 시 LinearGradient 위젯을 사용하는 예제, 반투명하게 사용하는 예제 코드입니다.

 

소스 코드

Container(
        height: 200,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
              ColorStyle.black,
              ColorStyle.white,
            ])),
      ),

 

아래와 같이 일부를 투명하게 만들 수도 있습니다.

Container(
        height: 200,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
              ColorStyle.black.withOpacity(0.6),
              ColorStyle.black50.withOpacity(0),
            ])),
      ),

 

세 개 이상으로도 설정 가능합니다.

Container(
        height: 200,
        decoration: BoxDecoration(
            gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [
                ColorStyle.black50.withOpacity(0.8),
                ColorStyle.black50.withOpacity(0.4),
              ColorStyle.black.withOpacity(0.6),
              ColorStyle.black50.withOpacity(0),
            ])),
      ),

 

참고 자료

https://copyprogramming.com/howto/apply-opacity-to-gradient-colors-in-flutter