フラッター-固定サイズのグラデーションをクリップして、可能であればアニメーション化するにはどうすればよいですか？
ニコラスディオン-ブシャール
オーディオ入力用のビジュアルゲージを作成しようとしています。ビジュアルは基本的です。緑から黄色、赤までの線形グラデーションです。問題は、現在のオーディオ入力値に従ってグラデーションをクリップしようとしていることです。私はFlutterに比較的慣れていないので、それを実現するためにさまざまなウィジェットを試しましたが、まだ解決策が見つかりませんでした。
装飾をで包んでみContainerましたOverflowBoxが、親はSizedBox値に応じて適切なサイズになります。私の最後の試みは次のようなものです：
Widget build(BuildContext context) {
return BlocBuilder(
bloc: _bloc,
builder: (BuildContext context, MicrophoneSpeakingBaseState state) {
if (state is MicrophoneSpeakingActiveState && state.speakingValue > 0) {
return FractionallySizedBox(
alignment: Alignment.topLeft,
widthFactor: state.speakingValue,
child: Stack(
alignment: Alignment.topLeft,
overflow: Overflow.clip,
children: [
Container(
width: size.width,
height: size.height,
constraints: BoxConstraints(minWidth: size.width),
decoration: BoxDecoration(
borderRadius: borderRadius,
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.green, Colors.green, Colors.yellow, Colors.red],
),
),
),
],
),
);
}
},
);
}
私は出力がうまくいくのは難しいですが、実際には（現在の入力値に応じて）縮小されたサイズのグラデーションが得られ、グラデーション自体はフルサイズを維持せずに縮小されます。境界線の半径も、バーが小さいかのように適用されます。
エラー404
次のように、コンテナをClipPathウィジェットでラップします。
new ClipPath(
clipper: BoxClipper(clipX: 100.0),
clipBehavior: Clip.hardEdge,
child: Container(
width: 400.0,
height: 100.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100.0),
gradient: LinearGradient(
begin: Alignment.centerLeft,
end: Alignment.centerRight,
colors: [Colors.green, Colors.green, Colors.yellow, Colors.red],
),
),
),
),
ClipPathウィジェットでは、CustomClipperウィジェットを定義する必要があります。以下のカスタムクリッパーは、クリップされたコンテナーの幅を制御するパラメーターclipXを取り込みます。clipXの値が大きいほど、クリップされた長方形の幅は小さくなります。
class BoxClipper extends CustomClipper<Path> {
final double clipX;
BoxClipper({this.clipX});
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height);
path.lineTo(size.width - clipX, size.height);
path.lineTo(size.width - clipX, 0.0);
path.close();
return path;
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
コメントを追加