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,
),
),
),
),
);
}
}
