Flutter 의 그 라 데 이 션 고급 용법(3 가지)

Flutter 에서 그 라 데 이 션 은 세 가지 가 있 습 니 다.
선형 그 라 디 언 트:선형 그 라 디 언 트

 Radial Gradient:방사형 그 라 데 이 션

SweetGradient:부채 형 그 라 데 이 션원 도 를 보 세 요.아래 의 그 라 데 이 션 은 모두 이 그림 을 바탕 으로 이 루어 집 니 다.

LinearGradient
그림 에 위 에서 아래로 선형 그 라 데 이 션 을 추가 합 니 다.

ShaderMask(
 shaderCallback: (Rect bounds) {
  return LinearGradient(
   begin: Alignment.topCenter,
   end: Alignment.bottomCenter,
   colors: [Colors.red,Colors.blue,Colors.green],
  ).createShader(bounds);
 },
 blendMode: BlendMode.color,
 child: Image.asset(
  'assets/images/b.jpg',
  fit: BoxFit.cover,
 ),
)

4.567914.와 4.567914.그 라 데 이 션 방향 을 나타 내 고 위 에 설 치 된 방향 은 상단 중간 에서 끝까지 중간 이다.
4.567914.그 라 데 이 션 의 색 을 나타 낸다.
각 그 라 데 이 션 색상 의 끝 점 설정:

Color color = Colors.orange;
return ShaderMask(
 shaderCallback: (Rect bounds) {
  return LinearGradient(
    begin: Alignment.topCenter,
    end: Alignment.bottomCenter,
    colors: [color,color,Colors.transparent,Colors.transparent,color,color],
    stops: [0,.4,.41,.6,.61,1]
  ).createShader(bounds);
 },
 blendMode: BlendMode.color,
 child: Image.asset(
  'assets/images/b.jpg',
  fit: BoxFit.cover,
 ),
);

4.567914 의 개 수 는 4.567914 에 대응 해 야 한다.

중간 에 설 치 된 그 라 데 이 션 색 이 투명 하기 때문에 중간 은 원 그림 입 니 다.
RadialGradient
Radial Gradient 는 방사 상 그 라 데 이 션 이다.

ShaderMask(
   shaderCallback: (Rect bounds) {
    return RadialGradient(
     radius: .5,
     colors: <Color>[Colors.red, Colors.blue],
    ).createShader(bounds);
   },
   blendMode: BlendMode.color,
   child: Image.asset(
    'assets/images/b.jpg',
    fit: BoxFit.cover,
   ),
  )

중간 에 원형 원 도 를 표시 하고 다른 곳 에는 회색 몽 판이 있 습 니 다.

ShaderMask(
 shaderCallback: (Rect bounds) {
  return RadialGradient(
   radius: .6,
   colors: <Color>[
    Colors.transparent,
    Colors.transparent,
    Colors.grey.withOpacity(.7),
    Colors.grey.withOpacity(.7)
   ],
   stops: [0, .5, .5, 1],
  ).createShader(bounds);
 },
 blendMode: BlendMode.srcATop,
 child: Image.asset(
  'assets/images/b.jpg',
  fit: BoxFit.cover,
 ),
)

SweepGradient
SweetGradient 부채 형 그 라 데 이 션 효과.

ShaderMask(
 shaderCallback: (Rect bounds) {
  return SweepGradient(
   colors: <Color>[
    Colors.red,
    Colors.blue
   ],
  ).createShader(bounds);
 },
 child: Image.asset(
  'assets/images/b.jpg',
  fit: BoxFit.cover,
 ),
)

시작 과 끝 각 도 를 나타 낸다.
그 라 데 이 션 링 그리 기:

Container(
    width: 200,
    height: 200,
    child: CustomPaint(
     painter: _CircleProgressPaint(.5),
    ),
   )

class _CircleProgressPaint extends CustomPainter {
 final double progress;

 _CircleProgressPaint(this.progress);

 Paint _paint = Paint()
  ..style = PaintingStyle.stroke
  ..strokeWidth = 20;

 @override
 void paint(Canvas canvas, Size size) {
  _paint.shader = ui.Gradient.sweep(
    Offset(size.width / 2, size.height / 2), [Colors.red, Colors.yellow]);
  canvas.drawArc(
    Rect.fromLTWH(0, 0, size.width, size.height), 0, pi*2, false, _paint);
 }

 @override
 bool shouldRepaint(CustomPainter oldDelegate) {
  return true;
 }
}

그림 을 제외 하고 모든 구성 요소 에 그 라 데 이 션 효 과 를 추가 할 수 있 습 니 다.예 를 들 어 텍스트:

ShaderMask(
 shaderCallback: (Rect bounds) {
  return LinearGradient(
   colors: <Color>[Colors.blue, Colors.red],
   tileMode: TileMode.mirror,
  ).createShader(bounds);
 },
 blendMode: BlendMode.srcATop,
 child: Center(
  child: Text(
   '  ，         ',
   style: TextStyle(fontSize: 24),
  ),
 ),
)

Flutter 의 그 라 데 이 션 에 관 한 고급 용법(3 가지)에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Flutter 그 라 데 이 션 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부탁드립니다!