[Flutter]Widgetの枠内いっぱいに画像を拡大させる方法(Boxfit.cover / Boxfit.fill)

このページには広告が含まれる場合があります。

 

画像を扱うWidget(ImageやCachedNetworkImage等)で画像を表示させようとすると、デフォルトではWidgetの枠内いっぱいに画像を表示できない場合があります。

画像がWidgetの枠いっぱいに表示されていない

これをWidgetの枠内いっぱいに拡大させるためには「fit」属性に、

1)縦横比(アスペクト比)を変えずに拡大させる場合は「Boxfit.cover」(ただし画像ははみ出る)

CachedNetworkImageのfitをBoxFit.coverにすると、縦横比を保ったまま枠いっぱいに拡大される

 

2)縦横比(アスペクト比)を変えて、画像をはみ出させずに拡大させる場合は「Boxfit.fill」

fitをBoxFit.fillにすると、縦横比を変えて枠いっぱいに表示される

させてやるとできます。

(詳しくは、以下の動画で解説していますので、よろしければ御覧ください)

こんな記事も読まれています

イチオシ

40代から感じるモヤモヤを解消できる 無料動画セミナー

あすコロ式・40代からの人生アップデート【新】戦略

アラフォーでキャリアを失ったバリバリ左脳人間・スピリチュアル耐性ゼロの元金融マンが、人生どん底から立ち上がる過程でたどり着いた「人生再構築メソッド」。40代・50代を過ぎて多くの人が感じる「このままでいいんかな?」「この先どうしたらいいかわからない」というモヤモヤを解消し、人生後半戦をアップデートさせる【新】戦略。

今すぐ無料で動画セミナー(80分)を見る ▶

TOP