Flutter - 그라데이션 적용하기

앞선 예제들에선 Colors 를 이용하여 단색을 적용하여 진행했다. 
하지만 이는 다소 밋밋하게 보일 수 있다. 하지만 그라데이션을 이용하여 세련되고 멋진 디자인을 적용할 수 있다.

1. LinearGradient

선형 그라데이션이다. Linear는 선, 직선 모양의 의미로 begin과 end를 수반하여 시작 방향과 끝 방향이 정해져 있는 그라데이션이다.
colors의 속성에는 배열 형태로 여러 색을 부여할 수 있다. 플러터에서 Colors.색상명 뒤에 []를 사용하여 100~900까지의 백 단위의 숫자를 사용하여 색의 강도를 표현할 수 있다.

gradient: LinearGradient(
           colors: [
             Colors.blue[100] as Color,
             Colors.blue[300] as Color,
             Colors.blue[500] as Color,
             Colors.blue[700] as Color,
           ],
           begin: Alignment.topCenter,
           end: Alignment.bottomCenter,
           stops: const [0.1, 0.4, 0.7, 1.0],
         )

2. RadialGradient  

원형 그라데이션이다. 사용범은 LinearGradient와 유사하지만, 원형 그라데이션이기 때문에 중심점의 기준을 정해주어야 하며 생략하게 되면 Alignment.center가 기본값으로 설정된다.

gradient: RadialGradient(
          center: Alignment.center,
          colors: [
            Colors.amber[100] as Color,
            Colors.amber[300] as Color,
            Colors.amber[500] as Color,
            Colors.amber[700] as Color,
          ],
          stops: [0.1, 0.3, 0.7, 1.0],
        )

 

 

이 두가지의 방법에는 stops 속성을 통해 크기를 지정할 수 있다. 
하지만 주의할 점은 stops의 배열의 크기는 무조건 colors의 배열의 크기와 같아야 오류가 나지 않는다.

 

 

해당 글의 전체 코드 : https://github.com/land-waters/flutter-study/blob/chap14/flutter_application_1/lib/main.dart

flutter-study/flutter_application_1/lib/main.dart at chap14 · land-waters/flutter-study