Flutter関連の投稿です。
(何個目書くのやめました笑)
備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。
今回はFlutterの画像の配置に関して記載します。
目次
-完成イメージ
-1.構成
-2.画像の配置①_ネットワークから画像を参照する
-3.画像の配置②_プロジェクトから画像を参照する（ダウンロードとファイル作成）
-4.画像の配置②_プロジェクトから画像を参照する（画像の登録とコード記載）
-5.全体コード
-参考文献
-最後に
完成イメージ
・前回の記事からファースト画面にインターネットから引用した画像を貼り付ける
※下記前回記事
・セカンド画面にはPCに保存した画像をVScodeに落とし込み
それを参照し画像を表示する
※インターネットからの引用＝通信可能なエリアで表示される
参照画像 ＝通信の有無に関係なく表示される
1.構成
・ファースト画面のCulumn内にネットワークからの参照する画像を掲載する処理を記載する
・ネットワークからセカンド画面に載せたい画像をダウンロードする
・プロジェクトファイルに画像を保存するためのimagesフォルダを作成する
・imagesフォルダに載せたい画像をドラッグ&ドロップする
・pubspec.yamlファイルに載せたい画像を登録する
・セカンド画面のCulumn内にimageフォルダからの参照する画像を掲載する処理を記載する
2.画像の配置①_ネットワークから画像を参照する
・ファースト画面のCulumn内にImage.network(入れたいURL),を入れる
※Flutter公式サイトを見ると他の記載方法もあるが、この記載が１番シンプル
・画像をURLは「画像のアドレスをコピー」で参照する
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
3.画像の配置②_プロジェクトから画像を参照する（ダウンロードとファイル作成）
・画像を右クリックし名前を付けて保存する
・Flutterプロジェクト内に「images」フォルダを作成する
※VScode＝フォルダの階層に入らないようどのファイルも選択されていない状態で
プロジェクト名の左から２番目のアイコンをクリック
※Android Studio = プロジェクト名を右クリック→New→Director
・保存した画像を「images」フォルダにドラッグ&ドロップする
4.画像の配置②_プロジェクトから画像を参照する（画像の登録とコード記載）
・pubspec.yamlファイルの画像登録コードの#を消す
# To add assets to your application, add an assets section, like this:
# assets: ←#を消す
# - images/a_dot_burr.jpeg ←#を消す
# - images/a_dot_ham.jpeg ←#を消す
・載せたい画像を登録する
# To add assets to your application, add an assets section, like this:
assets:
- images/FlutterLogo.jpeg
これで完成！！！
5.全体コード
import 'package:flutter/material.dart';
import 'first_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: FirstPage(),
);
}
}
import 'package:flutter/material.dart';
import 'second_page.dart';
// ignore: must_be_immutable
class FirstPage extends StatelessWidget {
String nameText = '';
FirstPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: const Text('ファースト'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.network(
'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
TextField(
onChanged: (text) {
nameText = text;
},
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondPage(nameText),
),
);
},
child: const Text('次の画面へ'),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
class SecondPage extends StatelessWidget {
SecondPage(this.name);
final String name;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
title: Text('セカンド'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/FlutterLogo.jpeg'),
Text(
name,
style: TextStyle(fontSize: 50),
),
ElevatedButton(
onPressed: () {
//ボタンを押した時に呼ばれるコードを書く
Navigator.pop(context);
},
child: const Text('前の画面へ'),
),
],
),
),
);
}
}
pubspec.yamlは行数が多いため変更対象の61〜63のみを抜粋
# To add assets to your application, add an assets section, like this:
assets:
- images/FlutterLogo.jpeg
参考文献
Flutter大学. 「Flutter超入門2022】④画像を配置する【Flutter3.0】」. YouTube. 2022/06,https://www.youtube.com/watch?v=coKoO6dcQLI,
（参照 2024-06-21）
Flutter. 「Image class」. Flutter. 更新日不明,
https://api.flutter.dev/flutter/widgets/Image-class.html, (参照 2024-06-21)
Flutter. 「Aseets and images」. Flutter. 更新日不明,
https://docs.flutter.dev/ui/assets/assets-and-images, (参照 2024-06-21)
yu124choco. 「Flutterで画像を表示する方法【まとめ】」. Quiita. 2020/08,
https://qiita.com/yu124choco/items/a2710ec004d3425a2a0b, (参照 2024-06-21)
最後に
・前回ファイルをそのままコピーして使用すると
importがコピー元を参照するので遷移元ファイルは再度importした方が良いです
・画像の配置は比較的簡単で、Flutter大学の動画も短めでした