Flutter 〜画像の表示とScrollbar、SingleChildScrollView〜

①プロジェクト内に画像保存用フォルダを作成
→とりあえずassets/imagesとする。

②表示したい画像をimagesフォルダに格納する。

③pubspec.yamlを編集する

④Imageウィジェットを変数に設定し、Columnウィジェットに追加

import 'package:flutter/material.dart';
void main(){
  final img1 =  Image.asset(
    'assets/images/face.png'
  ,);
  final img2 =  Image.asset(
    'assets/images/body.png'
  ,);
  final a = MaterialApp(
    home: Scaffold(
      body: Column(
        children: [ 
          Center(
            child: img1,
          ),
          Center(
            child: img2,
          )
        ]
      ),
    ) 
  );
  runApp(a);
}

⑤画像のサイズが大きい場合、途中で切れてしまうのでスクロールバーを出す

import 'package:flutter/material.dart';
void main() {
  final img1 = Image.asset(
    'assets/images/face.png',
  );
  final img2 = Image.asset(
    'assets/images/body.png',
  );
  final a = MaterialApp(
    home: Scaffold(
      // Scrollbarウィジェットを追加して、スクロールバーを表示
      body: Scrollbar(
        // SingleChildScrollViewウィジェットを使用して、子ウィジェットをスクロール可能に
        child: SingleChildScrollView(
          // ここでColumnウィジェットを使用しているため、縦方向にスクロール可能
          child: Column(
            children: [
              Center(
                child: img1,
              ),
              Center(
                child: img2,
              )
            ],
          ),
        ),
      ),
    ),
  );
  runApp(a);
}

表示結果。