Flutter入門4_画像の配置

Flutter関連の投稿です。
(何個目書くのやめました笑)

備忘録として使用する予定ですが
皆さんの解決策にもなれば幸いです。

今回はFlutterの画像の配置に関して記載します。


目次
-完成イメージ
-1.構成
-2.画像の配置①_ネットワークから画像を参照する
-3.画像の配置②_プロジェクトから画像を参照する（ダウンロードとファイル作成）
-4.画像の配置②_プロジェクトから画像を参照する（画像の登録とコード記載）
-5.全体コード
-参考文献
-最後に




# 完成イメージ
・前回の記事からファースト画面にインターネットから引用した画像を貼り付ける
　※下記前回記事

https://qiita.com/ds0743/items/d86c026d5e0fe3e2f868
  
・セカンド画面にはPCに保存した画像をVScodeに落とし込み
　それを参照し画像を表示する
　※インターネットからの引用＝通信可能なエリアで表示される
 　　参照画像　　　　　　　　＝通信の有無に関係なく表示される

<img width="40%" alt="image_placement①_GIF.gif" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/a2073f97-ade8-f02d-5758-84f462e1116b.gif">


## 1.構成
・ファースト画面のCulumn内にネットワークからの参照する画像を掲載する処理を記載する
・ネットワークからセカンド画面に載せたい画像をダウンロードする
・プロジェクトファイルに画像を保存するためのimagesフォルダを作成する
・imagesフォルダに載せたい画像をドラッグ&ドロップする
・pubspec.yamlファイルに載せたい画像を登録する
・セカンド画面のCulumn内にimageフォルダからの参照する画像を掲載する処理を記載する


## 2.画像の配置①_ネットワークから画像を参照する
・ファースト画面のCulumn内にImage.network(入れたいURL),を入れる
　※Flutter公式サイトを見ると他の記載方法もあるが、この記載が１番シンプル
・画像をURLは「画像のアドレスをコピー」で参照する
```php:first_page.dart
          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＝フォルダの階層に入らないよう<font color="Red">どのファイルも選択されていない状態で</font>
 　　　　　　　プロジェクト名の左から２番目のアイコンをクリック
 ![image_placement②.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/93870c3a-2430-a5c8-0679-2e3ddf4a945e.png)
 
 　※Android Studio = プロジェクト名を右クリック→New→Director
  <img width="60%" alt="image_placement③.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/8e4bd06a-dbee-33ef-f32a-b5081cabcf64.png">

・保存した画像を「images」フォルダにドラッグ&ドロップする
<img width="20%" alt="image_placement④.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/3bab4e2e-442b-a0f4-7b56-517e94301691.png">

## 4.画像の配置②_プロジェクトから画像を参照する（画像の登録とコード記載）
・pubspec.yamlファイルの画像登録コードの#を消す

```php: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　←#を消す
```
・載せたい画像を登録する
```php:pubspec.yaml
  # To add assets to your application, add an assets section, like this:
  assets:
    - images/FlutterLogo.jpeg
```

これで完成！！！

## 5.全体コード
```php:main.dart
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(),
    );
  }
}
```
```php:first_page.dart
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('次の画面へ'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```
```php:second_page.dart
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のみを抜粋
```php:pubspec.yaml
  # 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大学の動画も短めでした