昨日は仕事に行っていました。
おそらくFlutterの公式サイトであろう所を参考にしながら、Flutterの初心者入門している備忘録ですが…
「最初のアプリを作る」の次にやること（ステップ３）は、「StatefulWidget」とかゆう、未知の単語が出てきたのに加えて、見本画像が無いという…精神的に厳しいチュートリアルなので…
勝手に脱線して、画像表示をやってみることにします。
文字がConstとかで表示できるのならば、画像だって比較的簡単に表示できるはず！！
というか、過去記事見てると、AndroidStudioでJavaやってた時も、初期から画像表示したくてしょうがなかったみたいなんですよ…
３年経っても、あんま変わってないんだな…私ｗ
■ ■ ■
画像表示のやり方は、軽くぐぐって、一番上に出てきたコチラ↓のサイトを参考にさせてもらいます
Flutterで画像表示する方法は２種類あるとのことです。
・アプリ内のフォルダの画像を表示する
・インターネット上の画像を表示する
Amebaブログのアプリで表示される画像は、インターネット上の画像表示の方だろうしな…ナルホドナルホド
＜アプリ内のフォルダの画像を表示する 方法＞
①プロジェクト直下にフォルダ作成
参考サイトが、AndroidStudioっぽいな…VSCodeではどうやるんだろう…
フォルダっぽいマークに「＋」マークのアイコンをクリックしたら作れました！
※↑のは作れたフォルダの位置が違った…「.dart_tool」配下に作っちゃってた
②作った「images」フォルダに画像データを入れる
AndroidStudioで画像ファイル入れた時と同様に、画像をVSCodeのimagesのトコにドラックしたら入れれた！！
※こっちの画像のimagesフォルダは作り直し後なので、階層が正しい
③pubspec.yamlを編集する
flutterブロックにassetsとして、画像フォルダ名や画像ファイル名を設定する
なんか、例がコメント化されて書かれてたので、コメント外して、ファイル名を書き換えてみた
※フォルダ内の画像全部が取り込み対象の時は、ファイル名を省略した「- images/」だけでいいらしい
④main.dartにImageWidgetを配置する
センターに表示してた文字設定してた「body」の配下ですね
child: Image.asset('images/as_giyu.png'),
…んん…Textの下に追加したら、赤線出たな…
「child」じゃダメみたいですね…
…別サイトを探してきた
で、動かしてみたら、とりあえず表示はされたけど…画像、大きすぎるぞ…
＜インターネット上の画像を表示する 方法＞
フォルダ作成～pubspec.yamlを編集までの作業は不要で、
Image.asset('images/as_giyu.png'),
じゃなくて
Image.network('画像URL'),
にするだけでOKらしい
＜表示画像のサイズを指定する 方法＞
「child: Column()」を解説してくれてるサイト（すぐ上のリンク）に載ってました
「Expanded Widget」なるものを使うと画像サイズをイイ感じに調整してくれるそうです
とりあえず、文字部分は大丈夫なので、画像部分だけ使ってみた！
動かしてみよう！
いい感じになった～
「Expanded Widget」使うとベタにサイズ指定とかもできるみたいですね
なんか、色々設定すると、書式がCSSみたいだぞ…
