プログラミング初心者の医学生が残り少ない夏休みでGithubcopilotとchatGPTの力を借りてアプリ開発してみた Day7

# これまでの経過
* [Day1(2023/08/20)](https://qiita.com/Shigemaxxx/items/606e7e58fe83f98bb780)
* [Day2(2023/08/21)](https://qiita.com/Shigemaxxx/items/ab1f0aecc291bb77534d)
* [Day3(2023/08/22)](https://qiita.com/Shigemaxxx/items/39ab4b0876cb6849fcf3)
* [Day4(2023/08/23)](https://qiita.com/Shigemaxxx/items/2657a3efc2ca29c0389a)
* [Day5(2023/08/24)](https://qiita.com/Shigemaxxx/items/f3ee98a1fb5868131820)
* [Day6(2023/08/25)](https://qiita.com/Shigemaxxx/items/6373c01527989fabde61)


   > - [x] 1. I Am Rich - How to Create Flutter Apps From Scratch
   > - [ ] 2. Running Your App on a Physical Device
   > - [ ] 3. I Am Poor - App Challenge
   > - [ ] 4. MiCard - How to Build Beautiful UIs with Flutter Widgets
   > - [ ] 5. Dicee - Building Apps with State
   > - [ ] 6. Boss Level Challenge 1 - Magic 8 Ball
   > - [ ] 7. Xylophone - Using Flutter and Dart Packages to Speed Up Development
   > - [ ] 8. Quizzler - Modularising & Organising Flutter Code
   > - [ ] 9. Boss Level Challenge 2 - Destini
   > - [ ] 10. BMI Calculator - Building Flutter UI for Intermediates
   > - [ ] 11. Clima - Powering Your Flutter App with Live Web Data
   > - [ ] 12. Boss Level Challenge 3 - Bitcoin Ticker
   > - [ ] 13. Flash Chat - Flutter x Firebase Cloud Firestore
   > - [ ] 14. Provider Pattern - State Management
   > - [ ] 15. Next Steps
   > - [ ] 16. Final Session - You Did It!

# Day7(2023/08/26)
> ## The Complete Flutter Development Bootcamp with Dart






<details>
<summary>画像を表示するためにはどうしたら良いですか？</summary>
Flutterで画像を表示するには、`Image` ウィジェットを使用します。以下の手順に従って画像を表示できます：

1. まず、`assets` フォルダ内に画像ファイルを配置します。例えば、`assets/images` フォルダに `image.png` という名前の画像ファイルを置くとします。

2. `pubspec.yaml` ファイル内で、使用するアセットを宣言します。`assets` セクションに画像ファイルのパスを追加します。例えば：

   ```yaml
   flutter:
     assets:
       - assets/images/image.png
   ```

3. 画像を表示したいウィジェット内で、`Image.asset()` コンストラクタを使用して画像を表示します。次の例を参考にしてください：

   ```dart
   import 'package:flutter/material.dart';

   void main() {
     runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('Image Example'),
           ),
           body: Center(
             child: Image.asset('assets/images/image.png'),
           ),
         ),
       );
     }
   }
   ```

この例では、`Image.asset()` コンストラクタを使用してアセット内の画像を表示しています。`assets/images/image.png` の部分は、アセットのパスを示しており、`assets` フォルダからの相対パスで指定します。アプリを実行すると、指定した画像が中央に表示されるはずです。

このようにして、Flutterアプリ内で画像を表示することができます。必要に応じて、画像のサイズや配置などを調整することもできます。
</details>


<details>
<summary>assetsフォルダに画像は既にあるのに，yamlファイルでアセットを宣言するのはどうしてですか？</summary>
Flutterのプロジェクトでは、`assets` フォルダ内にアセット（画像、フォント、設定ファイルなど）を配置することはできますが、それだけではアプリが実行される際にアセットが含まれない場合があります。これは、Flutterのビルドプロセスがアプリに含めるべきアセットを明示的に指定する必要があるためです。ここで、`pubspec.yaml` ファイルの `assets` セクションが重要な役割を果たします。

`pubspec.yaml` ファイル内の `assets` セクションにアセットのパスを宣言することで、Flutterビルドプロセスがそれらのアセットをアプリに含めます。アプリがデバイス上で実行される際に、これらのアセットが利用可能になります。これにより、実際にアプリが必要とするアセットだけがバンドルされ、アプリのサイズを効果的に管理できるようになります。

つまり、`pubspec.yaml` ファイルでアセットを宣言することによって、アプリケーションがビルドされる際にそれらのアセットが含まれるようになります。アプリの開発者が指定したアセットだけがビルドされ、実行時に利用できるようになるため、アプリのパフォーマンスやファイルサイズの最適化に役立ちます。
</details>

[App Icon Generator](https://www.appicon.co/)




<details>
<summary>アプリのアイコンを表示させるにはどうしたら良いですか？https://www.appicon.co/を利用してください．</summary>
アプリのアイコンを表示させるためには、まず適切なアプリアイコン画像を用意し、それをFlutterプロジェクトに統合する必要があります。その後、`pubspec.yaml` ファイル内でアセットを宣言し、アプリのウィジェットでアイコンを表示します。

以下に具体的な手順を示します：

1. `https://www.appicon.co/` などのオンラインツールを使用して、複数のサイズのアプリアイコン画像を生成します。通常、AndroidとiOS用に異なるサイズのアイコンが必要です。

2. 生成されたアイコン画像を `assets` フォルダ内に配置します。例えば、`assets/icons` フォルダ内にアイコン画像を格納します。

3. `pubspec.yaml` ファイル内の `assets` セクションにアイコン画像のパスを追加します。例えば：

   ```yaml
   flutter:
     assets:
       - assets/icons/icon_192x192.png
       - assets/icons/icon_512x512.png
       # 他のアセットもここに追加
   ```

4. アプリのウィジェット内で `Image.asset()` ウィジェットを使用してアイコンを表示します。例えば：

   ```dart
   import 'package:flutter/material.dart';

   void main() {
     runApp(MyApp());
   }

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(
             title: Text('App Icon Example'),
           ),
           body: Center(
             child: Image.asset('assets/icons/icon_192x192.png'),
           ),
         ),
       );
     }
   }
   ```

これにより、アプリのアイコンが中央に表示されるはずです。`Image.asset()` 内のパスは、アイコン画像のアセットパスに合わせて変更してください。

以上の手順に従って、`https://www.appicon.co/` で生成したアプリアイコンをFlutterアプリ内で表示することができます。
</details>

[icons8.com](https://icons8.com/)
[canva.com](https://www.canva.com/ja_jp/)

<details>
<summary>Coutainer()について具体的に説明してください</summary>
`Container` ウィジェットは、Flutterフレームワークで他のウィジェットを包むコンテナを作成するために使用されるウィジェットです。`Container` はウィジェットの配置、サイズ、デザインなどのスタイリングを制御するために広く使用されます。以下に具体的な `Container` ウィジェットの使用方法と役割を説明します。

基本的な構文:
```dart
Container(
  // プロパティや子ウィジェットを指定する
)
```

主なプロパティ:

- **`alignment`**: コンテンツの配置方法を指定します（`Alignment` クラスのインスタンスを使用）。
- **`color`**: コンテナの背景色を指定します。
- **`width`**: コンテナの幅を指定します。
- **`height`**: コンテナの高さを指定します。
- **`margin`**: コンテナの外側の余白を指定します。
- **`padding`**: コンテナ内の余白を指定します。
- **`decoration`**: コンテナの装飾や影、枠線を指定します（`BoxDecoration` クラスを使用）。

以下に、具体的な例を挙げて `Container` ウィジェットの使用法を示します。

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(10),
            alignment: Alignment.center,
            child: Text(
              'Hello, Container!',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}
```

この例では、`Container` ウィジェットを使用して中央に青い背景色を持つコンテナを作成しています。コンテナ内にはテキストが配置され、幅や高さ、余白、配置方法などが指定されています。

`Container` ウィジェットは、他のウィジェットを包むコンテナを作成し、そのコンテナのスタイリングや配置を調整する際に便利です。
</details>

>Flutterの公式，You Tubeもすごくわかりやすい！

[Widget catalog](https://docs.flutter.dev/ui/widgets)
[flutter.dev](https://docs.flutter.dev/ui)
[Flutter Widget of the Week](https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)





昨日に引き続き，The Complete Flutter Development Bootcamp with Dart　で勉強していますが，昨日はなんとかなると思っていたバージョンが古いという問題は，今日になって段々とストレスを感じ始めました．
コース自体はすごく良いのですが，毎回毎回エラーが発生すると時間がかかってしまいます．
そこで，このコースはFluttrの概念を掴むために自分の手では操作せずに，見る専門で行こうと思います．
必要ならば，もう一つ購入したコースを初めていいかと...今日はここまで






   > - [x] 1. I Am Rich - How to Create Flutter Apps From Scratch
   > - [x] 2. Running Your App on a Physical Device
   > - [x] 3. I Am Poor - App Challenge
   > - [x] 4. MiCard - How to Build Beautiful UIs with Flutter Widgets
   > - [ ] 5. Dicee - Building Apps with State
   > - [ ] 6. Boss Level Challenge 1 - Magic 8 Ball
   > - [ ] 7. Xylophone - Using Flutter and Dart Packages to Speed Up Development
   > - [ ] 8. Quizzler - Modularising & Organising Flutter Code
   > - [ ] 9. Boss Level Challenge 2 - Destini
   > - [ ] 10. BMI Calculator - Building Flutter UI for Intermediates
   > - [ ] 11. Clima - Powering Your Flutter App with Live Web Data
   > - [ ] 12. Boss Level Challenge 3 - Bitcoin Ticker
   > - [ ] 13. Flash Chat - Flutter x Firebase Cloud Firestore
   > - [ ] 14. Provider Pattern - State Management
   > - [ ] 15. Next Steps
   > - [ ] 16. Final Session - You Did It!