ShaderMasks are one of Flutter’s hidden gems.
ShaderMaskはFlutterの隠れた宝物の一つです。
ShaderMasks let you apply a shader to one or more widgets in the tree.
ShaderMaskはshaderをウィジェットツリー内の一つ、あるいは複数のウィジェットに適用することを可能にします。
Shaders are very flexible.
Shaderは非常に柔軟です。
In Flutter we can use them to apply gradients to widgets.
Flutterではウィジェットにグラデーションを適用するために使うことができます。
We can also use them to apply images.
画像に対してグラデーションを適用するために使うことも可能です。
To apply a shader to a widget, wrap the widget in a ShaderMask.
ウィジェットにshaderを適用するには、そのウィジェットをShaderMaskでラップします。
And supply the ShaderMask with the shader you’d like to apply.
そして適用したいshaderをshaderMaskに渡します。
How do you create shaders?
どうやってshaderを生成するのでしょう?
Fortunately, Flutter’s gradient classes have a handy createShader method to do just that.
幸運にも、FlutterのGradientクラスには便利なshaderを生成するためのcreateShaderメソッドがあります。
Let’s take a look at a cool effect and apply some flames to text.
クールな効果を見るためにTextに対して炎のshaderを適用してみましょう。
Wrap the text in a ShaderMask and give it a RadialGradient, and the give the gradient some good fiery values.
TextをShaderMaskでラップし、RadialGradientを渡します。そして、gradientに適切な値を渡します。
And presto! Burning text!
これだけで燃えるテキストができました。
There’s tons of cool effects you can achieve with shaders.
shaderで多くのクールな効果を得ることができます。
import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: MyApp(), ), ); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: ShaderMask( shaderCallback: (Rect bounds) { return RadialGradient( center: Alignment(0.3, 0.3), radius: 0.1, colors: <Color>[Colors.yellow, Colors.deepOrange.shade900], tileMode: TileMode.mirror, ).createShader(bounds); }, child: /* Container( width:300.0, height:300.0, color:Colors.blue[100], ), */ const Text( '俺は記憶を燃やす', style: TextStyle( //backgroundColor: Colors.black12, fontSize: 100.0, color:Colors.white, fontWeight: FontWeight.w900, ), ), ), ), ); } }