[Flutter] 그라데이션 효과와 BoxDecoration

✍ Gradient Class

2D gradient를 위한 인터페이스로 BoxDecoration에서 LinearGradient, RadialGradient, SweepGradient 를 사용할 수 있게 해 준다.

 

✍ LinearGradient

선형 그러데이션 효과를 줄 수 있다. 시작점(begin) 과 끝점(end)의 두 개의 포인트가 있는데 시작점은 0.0 에 해당하고 끝점은 1.0 에 해당한다. 리스트로 설정된 colors 들을 참고하여 시작점에서 끝점까지 그라데이션 효과를 준다. 단순하게 Alignment.topLeft 등 숫자가 아닌 위치로 나타내도 된다.

 

LinearGradient({   
  AlignmentGeometry begin = Alignment.centerLeft,
  AlignmentGeometry end = Alignment.centerRight,
  required List  colors, 
  List<double>? stops,
  TileMode tileMode = TileMode.clamp,
  GradientTransform? transform,
})

stops는 colors와 동일한 길이의 List여야 하며, 0.0 ~ 1.0 사이의 값이 들어가며 그러데이션의 색상들이 차지하는 구역을 나눈다.

 

예시)

Container(
  decoration: const BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: <Color>[
        Colors.pink,
        Colors.pinkAccent,
        Colors.deepOrange
      ],
    ),
  ),
  child: const Center(child: Text("test")),
)

 

 

✍ RadialGradient

2D 방사형 그러데이션을 그릴 수 있다. center를 중심(0.0)으로 radius(~1.0) 만큼 반지름의 길이를 같는다.

RadialGradient({   
  AlignmentGeometry center = Alignment.center,  
  double radius = 0.5,   
  required List  colors,  
  List ? stops,   
  TileMode tileMode = TileMode.clamp,   
  AlignmentGeometry? focal,   
  double focalRadius = 0.0,  
  GradientTransform? transform,
})

 

예시)

Container(
  decoration: const BoxDecoration(
    gradient: RadialGradient(
      center: Alignment(0.0, 0.0), // near the top right
      radius: 0.2,
      colors: <Color>[
        Color(0xFFFFFF00), 
        Color(0xFF0099FF),
        Color(0xFF000000),
      ],
      stops: <double>[0.4, 0.5, 1.0],
    ),
  ),
  child: const Center(child: Text("test")),
)

 

 

✍ SweepGradient

2D Sweep 그러데이션에는 중심(center), 시작 각도(startAngle) 및 끝 각도(endAngle)가 있다. startAngle은 0.0에 해당하고 endAngle은 1.0에 해당한다. 적어도 두 가지 색상이 있어야 하고, 각 색상에 대해 0.0과 1.0 사이의 시작에서 끝까지의 벡터 부분을 지정한다.

SweepGradient({   
  AlignmentGeometry center = Alignment.center,  
  double startAngle = 0.0,  
  double endAngle = math.pi * 2,  
  required List  colors,  
  List ? stops,   
  TileMode tileMode = TileMode.clamp,  
  GradientTransform? transform, 
})

 

예시)

Container(
  decoration: const BoxDecoration(
    gradient: SweepGradient(
      center: FractionalOffset.center,
      colors: <Color>[
        Color(0xFF4285F4), // blue
        Color(0xFF34A853), // green
        Color(0xFFFBBC05), // yellow
        Color(0xFFEA4335), // red
        Color(0xFF4285F4), // blue again to seamlessly transition to the start
      ],
      stops: <double>[0.0, 0.25, 0.5, 0.75, 1.0],
    ),
  ),
  child: const Center(child: Text("test")),
)

 

✍ BoxDecoration Class 

box 를 꾸밀 수 있는 여러가지 방법을 제공한다. 이미지를 삽입하고 테두리를 적용할 수도 있다.

BoxDecoration({  
  Color? color,   
  DecorationImage? image,   
  BoxBorder? border,   
  BorderRadiusGeometry? borderRadius, 
  List ? boxShadow,   
  Gradient? gradient,  
  BlendMode? backgroundBlendMode,  
  BoxShape shape = BoxShape.rectangle,
})

border 로 테두리를 설정하고 borderRadius 로 모서리 둥글게 적용할 수도 있다. boxShadow 로 그림자 효과를 조절할 수 있다. shape 로 상자의 모양을 결정할 수 있는데 직사각형(BoxShape.rectangle) 과 원(BoxShape.circle) 이 있다. 원일 때는 borderRadius 값이 null 이어야 한다. 또한, color 와 gradient 는 둘 다 값이 적용될 수 없고 둘 중 하나가 null 이어야 한다.

 

 

예시) 테두리가 검은색인 둥근 상자

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      width: 8,
      color: Colors.black
    ),
    borderRadius: BorderRadius.circular(12),
  ),
)

DecorationImage 의 image 인자에서 url 로 이미지를 넣어야 한다면 NetworkImage 를 사용한다.

 

 

 

예시)  원 모양 분홍색 테두리

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: Image.asset("asset/img/img.png").image,
      fit: BoxFit.cover,
    ),
    border: Border.all(
      width: 8,
      color: Colors.pinkAccent
    ),
    shape: BoxShape.circle
  ),
)

프로젝트 내 이미지를 가져올 때는 Image.asset(경로).img 를 사용한다.

 

 

예시) 그림자가 있는 직사각형 테두리

Container(
  decoration: BoxDecoration(
    color: const Color(0xff7c94b6),
    image: const DecorationImage(
      image: NetworkImage('https://images.pexels.com/photos/807598/pexels-photo-807598.jpeg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(width: 3, color: Colors.pinkAccent),
    boxShadow: [
      BoxShadow(blurRadius: 10.0),
    ]
  ),
)

 

 

 

+ Boxfit 에 따른 이미지 모양

DecorationImage 에서 fit 인자에 따라 원본 이미지가 삽입되는 방법이 결정된다. 자세한 건 다음 페이지를 참고하면 어떤식으로 나오는지 잘 나와있다.

 

https://api.flutter.dev/flutter/painting/BoxFit.html

BoxFit enum - painting library - Dart API

 

예시)

 

그림자 추가하기(List<Boxshadow>)

BoxShadow({   
  Color color = const Color(_kColorDefault), 
  Offset offset = Offset.zero,
  double blurRadius = 0.0,   
  double spreadRadius = 0.0,
  BlurStyle blurStyle = BlurStyle.normal,
})

그림자는 여러개의 BoxShadow 가 올 수 있고, blurRadius 는 흐림 이펙트가 얼마나 넓게까지 보여질것이냐, spreadRadius 는 얼마나 넓게 퍼지는지를 뜻한다. 기본값은 blurRaduis = 0.0 , spreadRadius = 0.0 , blurStyle = BlurStyle.normal 이다. 값을 다르게 해서 적용해본 예시는 다음과 같다.

 

Center(
  child: Container(
  color: Colors.blue,
  child: Row(
    children: [
      Icon(Icons.access_alarm, size: 30.0, color: Colors.white),
      Text("Test", style: TextStyle(color: Colors.white, fontSize: 30.0))
    ],
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10.0),
    boxShadow: [
      BoxShadow(
        color: Colors.blue[300]!,
        blurStyle: BlurStyle.normal,
        spreadRadius: 2.0,
        blurRadius: 12.0,
      )
    ]
  ),
)