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

# これまでの経過
* [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)
* [Day7(2023/08/26)](https://qiita.com/Shigemaxxx/items/b76801eefe64b89a08ac)



   > - [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!

# Day8(2023/08/28)
昨日は体調不良でお休みしていました．申し訳ありません．
本日から再開いたします．
> ## The Complete Flutter Development Bootcamp with Dart






<details>
<summary>Column()とRow()について具体的に説明してください</summary>
`Column` ウィジェットと `Row` ウィジェットは、Flutterフレームワークで複数の子ウィジェットを垂直方向（`Column`）または水平方向（`Row`）に配置するために使用されるウィジェットです。これらのウィジェットを使用することで、画面内のウィジェットを縦や横に並べることができます。

**`Column` ウィジェット**:
`Column` ウィジェットは、複数の子ウィジェットを垂直方向に配置するために使用されます。下から上に向かって配置され、子ウィジェット同士のスペースを均等に分けるか、必要に応じて配置やスペースを調整することができます。

以下に基本的な `Column` ウィジェットの使用例を示します：

```dart
Column(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)
```

**`Row` ウィジェット**:
`Row` ウィジェットは、複数の子ウィジェットを水平方向に配置するために使用されます。左から右に向かって配置され、子ウィジェット同士のスペースを均等に分けるか、必要に応じて配置やスペースを調整することができます。

以下に基本的な `Row` ウィジェットの使用例を示します：

```dart
Row(
  children: <Widget>[
    Text('Item 1'),
    Text('Item 2'),
    Text('Item 3'),
  ],
)
```

`Column` ウィジェットや `Row` ウィジェットは、通常、他のウィジェットを組み合わせて複雑なUIを構築する際に使用されます。例えば、リストやメニュー、フォームなどのコンポーネントを配置するために利用されます。また、これらのウィジェットは他のウィジェットと組み合わせて、柔軟でダイナミックなレイアウトを作成する際にも役立ちます。
</details>


<details>
<summary>Column()について詳しく教えてください</summary>
`Column` ウィジェットは、Flutterフレームワーク内で複数の子ウィジェットを垂直方向に配置するためのウィジェットです。つまり、子ウィジェットを上から下に並べることができます。このウィジェットは、垂直方向のレイアウトを構築する際に非常に便利です。

以下に `Column` ウィジェットの主なプロパティと使用例を示します。

**基本構文**:
```dart
Column(
  children: <Widget>[
    // 子ウィジェットをここに配置
  ],
)
```

**主なプロパティ**:

- **`children`**: `Column` 内に配置する子ウィジェットのリストです。子ウィジェットは上から下に順番に配置されます。

- **`mainAxisAlignment`**: 子ウィジェットを垂直軸（縦方向）に沿ってどのように配置するかを指定します。デフォルトは `MainAxisAlignment.start` で、上寄せになります。他にも `MainAxisAlignment.center`（中央寄せ）や `MainAxisAlignment.end`（下寄せ）などがあります。

- **`crossAxisAlignment`**: 子ウィジェットを水平軸（横方向）に沿ってどのように配置するかを指定します。デフォルトは `CrossAxisAlignment.center` で、中央寄せになります。他にも `CrossAxisAlignment.start`（左寄せ）や `CrossAxisAlignment.end`（右寄せ）などがあります。

以下は具体的な使用例です：

```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('Column Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('Item 1'),
              Text('Item 2'),
              Text('Item 3'),
            ],
          ),
        ),
      ),
    );
  }
}
```

この例では、`Column` ウィジェット内に3つのテキストウィジェットを配置しています。`mainAxisAlignment` と `crossAxisAlignment` プロパティを使用して、子ウィジェットを中央寄せで配置しています。結果として、3つのテキストが中央に垂直方向に配置されます。

`Column` ウィジェットは、リストやメニュー、フォームなど、垂直方向のコンポーネントを配置する際に使用されることが多いです。
</details>

この２つのサイトだけで何でもできそうな気がしてきた.
flutterawesomeは本当にawesome!!!
[Flutter Layout Cheat Sheet](https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e)
[flutterawesome](https://flutterawesome.com/)

<details>
<summary>Icon classについて教えてください</summary>
`Icon` クラスは、Flutterフレームワークでアイコンを表示するために使用されるウィジェットです。アイコンは、アプリのユーザーインターフェースに視覚的な要素を追加するために広く利用されます。`Icon` ウィジェットは、組み込みのアイコンデザインを使用したり、カスタムのアイコンを表示するために利用されます。

**基本構文**:
```dart
Icon(
  IconData,
  color: Colors.blue,  // オプション: アイコンの色
  size: 24.0,          // オプション: アイコンのサイズ
)
```

**主なプロパティ**:

- **`IconData`**: 表示するアイコンのデータ。アイコンを指定するための数値（コードポイント）やアイコンの名前を指定します。例えば、`Icons.star` といった組み込みのアイコンを使用することができます。

- **`color`**: アイコンの色を指定します。デフォルトはウィジェットの親のテーマに従った色になりますが、必要に応じて任意の色を指定できます。

- **`size`**: アイコンのサイズを指定します。デフォルトはウィジェットの親のテーマに従ったサイズになりますが、必要に応じて任意のサイズを指定できます。

以下は、`Icon` ウィジェットの使用例です：

```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('Icon Example'),
        ),
        body: Center(
          child: Icon(
            Icons.star,
            color: Colors.yellow,
            size: 48.0,
          ),
        ),
      ),
    );
  }
}
```

この例では、黄色い星のアイコンを表示しています。`Icons.star` はFlutterが提供する組み込みの星のアイコンです。`color` プロパティで色を指定し、`size` プロパティでサイズを指定しています。

`Icon` ウィジェットを使用することで、アプリ内に簡単に組み込みまたはカスタムのアイコンを表示することができます。
</details>

[googlefonts](https://fonts.google.com/)
[Material Sybols and Icons](https://fonts.google.com/icons)
[material design palette](https://www.materialpalette.com/)
[Material Design 2](https://m2.material.io/components?platform=flutter)
[Material Design 3](https://m3.material.io/develop/flutter)

<details>
<summary>Expand classとはなんですか？</summary>
`Expand` クラスは、Flutterフレームワークでウィジェットのサイズを拡張するために使用されるウィジェットです。`Expand` ウィジェットは、`Flex` や `Column`、`Row` などの親ウィジェット内で使用されることが一般的です。子ウィジェットを包み、親ウィジェット内の空きスペースを埋めるように子ウィジェットのサイズを拡張します。

`Expand` ウィジェットは、ウィジェットツリー内の特定の箇所で柔軟なレイアウトを実現するのに役立ちます。特に、水平方向や垂直方向に広がる余白を埋めるために使用されます。

基本的な構文:
```dart
Expand(
  child: Widget,
)
```

主なプロパティ:

- **`child`**: `Expand` ウィジェットの中に配置する子ウィジェットを指定します。

以下は、`Expand` ウィジェットの使用例です。この例では、`Column` 内の子ウィジェットを均等な割合で拡張して、空きスペースを埋めています。

```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('Expand Example'),
        ),
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 100,
              ),
              Expand(
                child: Container(
                  color: Colors.green,
                ),
              ),
              Container(
                color: Colors.blue,
                height: 100,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
```

この例では、`Expand` ウィジェットを使用して緑色のコンテナが空きスペースを埋めるように拡張されています。その前後に青いコンテナがありますが、`Expand` ウィジェットを使わない場合と比較して、空きスペースを均等に拡張することができます。
</details>






flutterawesomeはアプリ開発のヒントになりそう．
明日はThe Complete Flutter Development Bootcamp with Dartも視聴しつつ，アプリ開発にそろそろ取り掛からないと夏休みが終わってしまう．
git?github?の使い方も，そもそもなんのために存在しているかも理解していないままアプリが作れるのかは謎ではあるが，とりあえずやってみようと思います．
おそらく，明日はエラーばかりでアプリ開発が嫌になりそう...今日はここまで

   > - [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
   > - [x] 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!