Flutter Image Widget の入門:③fit, alignment, repeat属性

Table of Contents

Table of Contents

【Flutter Image Widget の入門】

   ①画像の作成

   ②color, colorBlendMode, matchTextDirection属性

 👉③fit, alignment, repeat属性

今回は前回②の続き、【Flutter Image Widget の入門ー③】になり、Imageのfit, alignment, repeat属性を紹介します。

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は横幅と高さの設定になります。 今回はfit, alignment, repeatについて、値を調整できるサンプルを作成してみました。


サンプル

今回作成してみたサンプルはこんな感じです。 値を調整できるようにDropMenuとボタンで変更操作できるにします。 画像の原始サイズは150x150で、表示領域の高さは200で、幅はスクリーンの幅になります。

image color sample


fit

どのように画像を親Widgetに設置することを調整できます。 BoxFitで実現します。

valuedescriptionexample
BoxFit.contain画像全体を表示する。縦横比率で拡大縮小して表示するBoxFit.contain
BoxFit.fill画像全体を表示する。全ての表示領域を埋めるBoxFit.fill
BoxFit.cover全ての表示領域を埋めるように、縦横比率で拡大縮小して表示する。画像切り抜きは可能。BoxFit.cover
BoxFit.fitHeight 縦の表示領域を埋めるように、縦横比率で拡大縮小して表示する。画像切り抜きは可能。BoxFit.fitHeight
BoxFit.fitWidth横の表示領域を埋めるように、縦横比率で拡大縮小して表示する。画像切り抜きは可能。BoxFit.fitWidth
BoxFit.none画像を表示領域の真ん中に表示する。拡大縮小しない。画像切り抜きは可能。BoxFit.none
BoxFit.scaleDown画像全体を表示する。縮小や本来のサイズで表示する。BoxFit.scaleDown

BoxFit.fillの場合、縦横の比率を保持していないので、注意すべきだと思います。


alignment

Alignmentで配置位置の調整ができます。 値と位置を表で表すとこんな感じになります。

topLefttopCentertopRight
centerLeftcentercenterRight
bottomLeftbottomCenterbottomRight

repeat

画像を重複配置で表示領域を埋めたい場合、repeatを設定します。 ImageRepeatで設定します。

valueexample
ImageRepeat.repeatImageRepeat.repeat
ImageRepeat.repeatXImageRepeat.repeatX
ImageRepeat.repeatYimageRepeat.repeatY

感想

Flutter Imageの入門紹介はここまでです。 Flutter Imageを使えば、こんなに簡単に画像UIの作成と調整ができるのは驚きました。 色んな設定を調整できるので、かつ即時反映できて、開発効率が上がりますね。


参考

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