flutter - 如何在颤动中绘制半个图标

Question

我需要带有不同颜色的两个部分的圆形图标。

我尝试使用 ShadeMask，但我的尝试似乎非常失败。

注意：我不需要渐变，只需要一种颜色，另一种颜色

有人可以帮忙吗？

class HalfFilledIcon extends StatelessWidget {
  HalfFilledIcon(
    this.icon,
    this.size,
    this.gradient,
  );

  final IconData icon;
  final double size;
  final Gradient gradient;

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      child: SizedBox(
        width: size,
        height: size,
        child: Icon(
          icon,
          size: size,
          color: Colors.grey[300],
        ),
      ),
      shaderCallback: (Rect bounds) {
        final Rect rect = Rect.fromLTRB(0, 0, size / 2, 0);
        return gradient.createShader(rect);
      },
    );
  }
}

标签： flutterflutter-layout

Answer 1

作为选项

class HalfFilledIcon extends StatelessWidget {
  final IconData icon;
  final double size;
  final Color color;

  HalfFilledIcon({this.icon, this.size, this.color});

  @override
  Widget build(BuildContext context) {
    return ShaderMask(
      blendMode: BlendMode.srcATop,
      shaderCallback: (Rect rect) {
        return LinearGradient(
          stops: [0, 0.5, 0.5],
          colors: [color, color, color.withOpacity(0)],
        ).createShader(rect);
      },
      child: SizedBox(
        width: size,
        height: size,
        child: Icon(icon, size: size, color: Colors.grey[300]),
      ),
    );
  }
}

如何使用：

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(debugShowCheckedModeBanner: false, home: Home()));

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: HalfFilledIcon(icon: Icons.circle, size: 80, color: Colors.green),
      ),
    );
  }
}