Flutter Image Widget の入門:②color, colorBlendMode, matchTextDirection属性

Table of Contents

Table of Contents

【Flutter Image Widget の入門】

   ①画像の作成

 👉②color, colorBlendMode, matchTextDirection属性

   ③fit, alignment, repeat属性

前編①画像の作成で、画像の作成方法について、紹介しました。続いて、今回はImage Widgetで一部よく使う属性color、colorBlendMode、matchTextDirectionを紹介します。

Flutter Image

Imageのコンストラクターはこんな感じです。

Image({
    Key key, 
    @required ImageProvider image, 
    ImageFrameBuilder frameBuilder, 
    ImageLoadingBuilder loadingBuilder, 
    String semanticLabel, 
    bool excludeFromSemantics: false, 
    double width, 
    double height, 
    Color color, 
    BlendMode colorBlendMode, 
    BoxFit fit, 
    AlignmentGeometry alignment: Alignment.center, 
    ImageRepeat repeat: ImageRepeat.noRepeat, 
    Rect centerSlice, 
    bool matchTextDirection: false, 
    bool gaplessPlayback: false, 
    FilterQuality filterQuality: FilterQuality.low 
})

width, heightは横幅と高さの設定になります。 今回は color、colorBlendMode, matchTextDirection について、値を調整できるサンプルを作成してみました。 次の編はfit、repeat、alignmentについてを詳細します。



サンプル

今回作成してみたサンプルはこんな感じです。 値を調整できるようにDropMenuとボタンで変更操作できるにします。 image color sample



matchTextDirection

この属性では、TextDirectionに合わせて、画像の横向きの変更できます。 値はBoolなので、True/Falseで合わせるかどうかを設定します。

var textDirectionMode; //TextDirection.ltr or TextDirection.rtl

Directionality(
  textDirection: textDirectionMode, 
  child: Image.asset('assets/influencer.jpg',
    color: assetsImageColor,
    colorBlendMode: blendMode,
    matchTextDirection: true,
  ),
),

Directionality widgetのtextDirectionをTextDirection.ltrやTextDirection.rtlに設定し、 childをImage widgetに設定します。 textDirectionをアプリ内に変更できるようにtextDirectionMode変数にしました。


color&colorBlendMode

colorとcolorBlendModeを一緒に設定すると、画像の色調整ができます。 (colorBlendModeはデフォルトの状態で、colorだけ設定すると、画像は設定しているcolorになります。)

Flutterが提供しているBlendModeは下記となります。

num BlendMode {
  clear,
  src,
  dst,
  srcOver,
  dstOver,
  srcIn,
  dstIn,
  srcOut,
  dstOut,
  srcATop,
  dstATop,
  xor,
  plus,
  modulate,
  screen,  // The last coeff mode.
  overlay,
  darken,
  lighten,
  colorDodge,
  colorBurn,
  hardLight,
  softLight,
  difference,
  exclusion,
  multiply,  // The last separable mode.
  hue,
  saturation,
  color,
  luminosity,
}

感想

今回紹介したい属性は以上です。 元の画像を少し違う感じで表示したい時に使えると感じています。 また次回、他の属性を紹介します。


参考

https://api.flutter.dev/flutter/widgets/Image-class.html