[Flutter] Container Gradient 설정하기

 

 

 

Container > decoration > BoxDecoration > gradient  속성을 사용하면 위에 사진처럼 Container에 Gradient를 설정할 수 있습니다.

 

 

 

 

1. 일반

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.yellow,
      ],
    ),
  ),
),

 

 

 

 

2. 대각선

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
      colors: [
        Colors.red,
        Colors.yellow,
        Colors.green,
      ],
    ),
  ),
),

colors 리스트에 색상을 3가지 이상 넣고 시작위치(begin)을 topLeft, 끝위치(end)를 bottomRight 주시면 대각선으로 gradient를 줄수 있습니다. 

 

 

 

3. 대각선 반대

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.bottomLeft,
      end: Alignment.topRight,
      colors: [
        Colors.red,
        Colors.yellow,
        Colors.green,
      ],
    ),
  ),
),

 

 

시작위치(begin)을 bottomLeft, 끝위치(end)를 topRight 주시면 대각선을 반대로 gradient를 줄수 있습니다. 

 

 

 

 

4. 대각선x

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.yellow,
        Colors.green,
      ],
    ),
  ),
),

 

 

시작위치(begin)을 centerLeft, 끝위치(end)를 centerRight 주시면 대각선 없이 3가지 이상의 gradient를 줄수 있습니다. 

 

 

 

5. 보더

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.yellow,
        Colors.green,
      ],
    ),
  ),
  alignment: Alignment.center,
  child: Container(
    width: 198,
    height: 58,
    color: Colors.white,
  ),
),

보더에만 gradient를 적용하는 방법은 만들어둔 gradient container의 child에 그 보다 작은 사이즈의 Container를 생성해서 색상을 white로 주시면 됩니다.

이때 부모 container의 Alignment.center 를 적용해주셔야 합니다.

 

 

 

6. 보더 둥글게

Container(
  width: 200,
  height: 60,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [
        Colors.red,
        Colors.yellow,
        Colors.green,
      ],
    ),
    borderRadius: BorderRadius.circular(10),
  ),
  alignment: Alignment.center,
  child: Container(
    width: 198,
    height: 58,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(9),
    ),
  ),
),

 

borderRadius 를 추가해서 곡선을 표현할 수 있습니다.

자식 Container의 borderRadius를 더 작게 주면 이쁜거같습니다.