投稿

10月, 2022の投稿を表示しています

Flutter備忘録: Tansform.scaleでは親Widgetの大きさが変わらなかった件

イメージ
開発中のスマホアプリ 『コメ欄』 のFlutter版の配信画面に、任意の画像を配置出来る機能を追加するのに、Flutterの Transform ウイジェットの「 Tansform.scale 」コンストラクタを使って Image ウイジェットを縮小・拡大表示させる仕組みにした処、画像は設定した通りの大きさで表示されましたが、画像を表示している親ウイジェットの縦横が元の画像の大きさのままでした。。。 結果として、親ウイジェットの縦横も同様に縮小・拡大させるには Tansform.scale ではなく、 SizedBox や Container ウイジェットで縦横の大きさを指定しないといけなかったので、解決までの道のりをここにメモしておきます。 キーワード : #Tansform.scale #ウイジェットの大きさが変わらない #ImageStreamListener #縦横のサイズが必要 [目次] Tansform.scaleで画像サイズの変更 スタックオーバーフローにあったQ&A コード変更 Tansform.scaleで画像サイズの変更 Tansform.scaleを使った場合 右は、例として383x400のサイズに編集した「 いらすとや 」からのフリー素材の画像「 パスをするサッカー選手のイラスト(男性) 」を、アプリ内でTansform.scaleを使って0.45倍に縮小して、画面解像度が1080x2340のPixel 5エミュレータ上に表示した際のスクショになります。 ウイジェットの大きさが分かり易い様に、 BoxDecoration を使ってウイジェットに緑の枠を付けてありますが、イラストは0.45倍に縮小されて表示されているものの、ウイジェットの枠は元の画像の大きさのままの383x400で表示されて。。。 いや、1080x2340の画面上に388x400の画像を表示した場合なら、 画像の幅は画面の幅の半分位になるはず。。。 理論画素数と物理画素数