0
0

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 1 year has passed since last update.

【学習メモ:Flutter入門編】画像の表示

0
Posted at

これから「Flutter」を勉強していこうと思っている人向けには「メモ」程度で参照してみてください。

■ 画像の置き場所
お勧めとして「assets(アセッツ)」フォルダの配下に「images(イメージズ)フォルダを配置して画像を格納

【補足】
asset(アセット):「資産・価値あるも・役に立つもの」等の意味が存在

■ 「pubspec.yaml」ファイルの編集
「dart」言語では「pubspec.yaml」ファイルに大事な定義を記載しておく

アプリ開発では頻繁に利用される設定ファイル

ファイルに「flutter:」という箇所が存在しているので、下記のように「assets/images」配下に設置した画像ファイルの名前を定義しておきます。

flutter:
  uses-material-design: true
  assets:
     - assets/images/★★★★★.png

■ 「Image」のWidgetについて
下記の4種類が存在している。

  • Image.asset()
  • Image.network()
  • Image.memory()
  • Image.file()

詳しい補足は下記の記事がお勧めです。(ありがとうございます!)

■ 「Image.asset()」の使い方
「assets」に配置されている「pubspec.yaml」ファイルに定義した画像を表示する場合に利用。

Image.asset(
    'images/★★★★★.png'
)

■ 「Image.network()」の使い方
インターネットを通じて遠くの画像を表示する場合に利用。

Image.network(
    'https://★★★★★'
)

■ 「Image.memory()」の使い方
直接画像ファイルの受け渡しする際に利用。

■ 「Image.file()」の使い方
ローカルファイル形式で画像を表示する際に利用。
※ 現時点で詳しく説明ができないです・・ごめんなさい。

最後に

Flutter(Dart言語)に関する最低限の情報を「学習メモ」としてまとめてみました。
内容に誤りがありそうであれば、遠慮なくご指摘いただけますと幸いです。

【学習の参考にした動画】
素敵な解説動画の作成ありがとうございます。
本記事の内容より。動画を見た方が解りやすいと思います。

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?