2021/2/27 Flutter:ShaderMaskウィジェットについて

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