4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutter ローカルの画像を表示させサイズを指定

Posted at

#ローカルに画像を用意
スクリーンショット 2021-05-26 21.56.55.jpg
Flutter プロジェクトの中に、assetsフォルダを作りその中にimagesフォルダを作ります。

assets/images/unnamed.pngというパスになります。
この画像を表示させます。

#pubspec.yamlに画像の置き場所を設定する
デフォルトでは下記のようにコメントアウトされているかと思います。

pubspec.yaml
flutter:
    ...(省略)...
  # To add assets to your application, add an assets section, like this:
  # assets:
  #  - images/a_dot_burr.jpeg
  #  - images/a_dot_ham.jpeg

assets:から下の部分をコメントから以下のように編集します。

pubspec.yaml
flutter:
    ...(省略)...
  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/images/unnamed.png

ここでのassets/images/unnamed.pngは最初に画像を設置したパスのことですね。

※インデントの問題でエラーが発生しやすいので要注意です!元のインデントを崩さないように編集しましょう!

#サイズを指定して画像を表示

            Container(
                width: 154,
                height: 230,
                child: Image.asset(
                  'assets/images/unnamed.png',
                  fit: BoxFit.contain,
                ),
              ),

サイズを指定して表示するためにContainerのchildにImageを設置

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?