2021/3/7 :Flutter : Imageウィジェットを使った画像の読み込み

 

広告

ChatGPTの回答のシェア機能を利用して、ChatGPTの回答の質を評価する投稿アプリ「Engineers and GAI」をPlay storeにリリースしました。

ReactとFlutterに関する回答を対象としております。

今後いろいろなジャンルを追加していきます🔥

投稿の閲覧はアカウント登録無しで可能、投稿・フォロー・ブックマークなどはアカウント登録後ご利用いただけます。

現在全機能無料でご利用いただけます。

Google Play で手に入れよう


 

Engineer’s companionというエンジニア・プログラマーの学習をサポートするwebアプリを公開致しました😆🎉

 

フロントエンドフレームワーク公式ドキュメント用

https://fh1.okutaro.com


サーバーサイドフレームワーク公式ドキュメント用

https://fh2.okutaro.com


演習回数・メモ書きの保存機能、エクスポート/インポート機能、URLやメモの内容での検索機能など豊富な機能で日々の学習を強力にサポート!!

ほとんどのページに操作説明が付いていて操作がわかりやすい!

現在全機能完全無料でご利用可能です。

ユーザー登録不要、アクセス後すぐにご利用可能です。

ぜひ日々の学習にご利用いただけますと幸いでございます。


アプリ内に置いている画像をImage.assetメソッドで読み込んで表示させます。

基本

(1)読み込みたい画像をプロジェクトルート直下のassetsディレクトリに入れます。

ということでまずプロジェクトルート直下に画像などのアセットを入れるディレクトリ、assetsディレクトリを作ります(androidディレクトリの下)。


(2)次にassetsディレクトリに、読み込みたい画像を入れます。

assetsディレクトリ直下に

Screenshot_1596586622.png

を入れました。

そしてassetsディレクトリ内にもう一つディレクトリ「imagesディレクトリ」を作ります。

そしてassets/imagesディレクトリ内に

diamond.png

ファイルを入れました。


(3)pubspec.yamlファイルに、「assetsディレクトリ内のアセット(画像)をアプリで使う」ことを示すコードを記述します。

pubspec.yaml

flutter:

  uses-material-design: