Flutterの基礎をまとめてみた（4）

# 今回はじゃんけんアプリを作ります
最初に、じゃんけんアプリを作るために必要なウィジェットについて学び、
じゃんけんのアプリを作っていきましょう。


# ウィジェットについて

<details><summary>そもそもウィジェットって何？　(復習)</summary>
ウィジェットは、Flutterでアプリを作るときの「部品」みたいなものです。<br>
おもちゃのブロックを組み立てるように、ウィジェットを組み合わせて画面を作ります。
</details>

ウィジェットは主に２種類あります。

### ①単体で利用できるウィジェット
独立して機能を果たす
例:
Text（文字）
じゃんけんの結果を表示する。
```
Text("あなたの勝ち！")
```
Icon（アイコン）
じゃんけんの手（✊、✋、✌️）をアイコンで表示する！
```
Icon(Icons.handshake)
```

### ②レイアウトを司るウィジェット
子ウィジェットの配置を制御する。
これらは、アプリ内の「じゃんけんの手」や「結果表示」などを整列させるのに使います。

例:
Column（たてに並べる）
→ウィジェットを上から下に並べる
```
Column(
  children: [
    Text("上の文字"),
    Text("下の文字"),
  ],
)
```
Row（よこに並べる）
→ウィジェットを左から右に並べる
```
Row(
  children: [
    Icon(Icons.star),
    Text("星アイコンの隣に文字！"),
  ],
)

```
Stack（重ねる）
→ウィジェットを重ねて配置する

```
Stack(
  children: [
    Image.asset("背景.png"),
    Text("重ねた文字"),
  ],
)

```

## ウィジェットの紹介
### 1\.Centerウィジェット
要素を画面の上下左右中央にできる。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/42525e8b-845a-53b7-8d65-b32a155af7c9.jpeg" width="500">

```
Center(
    child: //ここに子要素を記載する。
)
```

### 2\.Textウィジェット
文字列の表示
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/68e8aaac-af0f-c82f-e72b-627b4be0f186.jpeg" width="500">

```
Text(
    'Hello world'
)
```
:::note info
 長い文章の場合は最大行数(maxLies)や3点リーダー(overflow)を使う。
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/7be0acca-f751-9188-c2bd-b762b22f147c.jpeg" width="500">

```
Text(
  '長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです長い文章の場の場合のテスト用テキストです',
  maxLines: 2, // 最大1行
  overflow: TextOverflow.ellipsis, // 省略記号を表示
)
```
:::

#### テキストの色や大きさなどを変えれます。
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/eef7cc96-680c-68a4-3d00-8b40b83c3f27.jpeg" width="500">
 
 TextStyleオブジェクトを使います。
 

```
Text(
  'この文字は青です。',
  style: TextStyle(
      color: Colors.blue, //フォントの色
      fontSize: 30,　//フォントサイズ
      fontWeight:FontWeight.bold, //フォントの太さ
      ),   
)
```
### 3\.Imageウィジェット
Imageウィジェットは２種類あります。
①Image.networkウィジェット
②Image.asstウィジェット

#### Image.networkウィジェットについて

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/1af445fa-44c3-d14c-4c2a-7de0d5fb3b55.jpeg" width="500">

インターネットから引用して、画像を表示する。
```
Image.network(
    'https://illustcenter.com/2022/05/13/rdesign_14296/',
    width: 400, // 横サイズ
    height: 100,　// 縦サイズ
),
```

#### Image.asstウィジェットについて

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/e68f5091-f210-1356-3ea2-30faef19808a.jpeg" width="500">

プロジェクトの画像を表示する。

:::note warn
pubspec.yamlに必ず画像のパスを通す。
例：assetsディレクトリにgu.pngの画像の場合
```
  assets:
    - assets/gu.png
```
:::

```
Image.asst(
    'assts/01.jpeg', //asstsというディレクトリの01.jpegの画像
    width: 400, // 横サイズ
    height: 100,　// 縦サイズ
),
```

### 4\.Paddingウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/76c05270-9dab-ab5c-3474-e062a76f003c.jpeg" width="500">

上下左右に余白を作成します。

```
Padding(
    padding: EdgeInsets.all(15.0), // 上下左右に余白を追加
      child: Text('長い文章の場の場合のテスト用テキストです'),
    ),
```
:::note info
その他
・EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
名前無し引数で左、上、右、下の順に値を設定することで、
それぞれの方向の余白を設定

・EdgeInsets.only({double left = 0.0, double top = 0.0, double right = 0.0, double bottom = 0.0})
名前付き引数で指定したい方向にだけ余白を指定することが可能です。

・EdgeInsets.symmetric({double vertical = 0.0, double horizontal = 0.0})
verticalのプロパティで上と下に同じ値の余白を、horizontalのプロパティで
左と右に同じ値の余白をセットで設定することができます。
:::

### 5\.ColoredBoxウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/7b5c4acd-5851-0cdf-0f6d-70e9a6f80ebd.jpeg" width="500">

ColoredBoxは背景色を作成する。
```
ColoredBox(
   color: Colors.blue,
   child: Text('こんにちは'),
    ),
```
:::note info
 Color.fromARGB(255, 255, 0, 0),
透明度,赤,緑,青を0~255で範囲を指定することもできます。
:::


### 6\.Alignウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/49007ff2-f867-12bb-e540-4a15a0bd2a52.jpeg" width="500">

上下左右に整列させます。

```
Align(
   alignment:Alignment.centerLeft, 
      child: Text('こんにちは'),
    ),
```

:::note info
・右下に配置したい場合は
```
Alignment.bottomRight
```
・左上に配置したい場合は
```
Alignment.topLeft
```
・左上に配置したい場合は
```
Alignment.bottomLeft
```
・真ん中上に配置したい場合は
```
Alignment.topCenter
```
・真ん中下に配置したい場合は
```
Alignment.bottomCenter
```
・中央に配置したい場合は
```
Alignment.center
```
・中央右に配置したい場合は
```
Alignment.centerRight
```
・中央右に配置したい場合は
```
Alignment.centerLeft
```
:::


### 7\.TextButtonウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/60d94ea6-bc08-cc05-96d5-749124e07f0a.jpeg" width="500">


こんにちはという文字列のボタンが作成できる。


```
TextButton(
   onPressd:(){ 
      print('押しました。');
      },
     child: Text('こんにちは'),
    ),
```

### 8\.AlerDialogウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/d2c8b8dc-4433-f1fc-4dc7-abb2d2cb897a.jpeg" width="500">

通知などダイアログを表示できる。


```
showDialog(
  context: context,
  builder: (context) {
    return AlertDialog(
      title: Text("通知"),  // タイトル
      content: Text("押されたアラート"),  // 内容部分
      actions: [  // 閉じる処理
        TextButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          child: Text('close'),
        ),
      ],
    );
  },
);
```

### 8\.ElevatedButtonウィジェット

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/fd6fcf8b-2425-596e-85e2-18818e08d962.jpeg" width="500">

立体的なボタンを作成できる。


```
ElevatedButton(
   onPressd:(){ 
      print('押しました。');
      },
     child: Text('こんにちは'),
    ),
```

:::note info
ボタンのその他
・RoundedRectangleBorder
　ボタンを丸くする。

 
```
ElevatedButton(
  style: ElevatedButton.styleFrom(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10) 
      )
  ),
  child: const Text('ボタンを表示'),
  onPressed: () {},
);
```
参考に
[Flutter]コピペで使える！ボタンのデザイン16種類
https://zenn.dev/coka01/articles/cb0b632766138e9858e7

:::



# プロジェジェクトを作ってみよう
### 最初に

<img src="" width="500">

1\.「New Flutter Project」を押して新しく作成
2\.「次へ」を押下

### 次に

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/0e8b541f-380c-b0de-1c6f-df753f3b12b6.jpeg" width="500">

3\.各種設定
* 今回のプロジェクトは「rock_paper_scissors」というファイルで作成します。
 :::note info
 プロジェクト命名規則があります。
1\.[a-z0-9_]の、正規表現にある文字だけが設定可能です。

NGな例：　RockPaperScissors、rock-paper-scissors


  2\.最初の文字に数字の使用は不可
NGな例：　1rockpaperscissors

  3\.予約語の使用は不可
NGな例：　import
予約語一覧は以下
https://dart.dev/language/keywords

:::
:::note alert
もし命名規則が不正の場合
「flutter create」実行時に
「"XXXXXXX" is not a valid Dart package name」が発生します。
:::

* プロジェクトの場所はご自身の好きな場所で作成してください。
* そのほかはそのままでします。

では、今までの経験で以下作ってみましょう。

### 課題1
ボタンを設置し、押下時に通知のダイアログでAIくんが「パー」を出すプログラム

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/edb92a73-53c6-2673-1873-cce0233c1712.png" width="200"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/fa1d7b2c-fd44-ddf6-a5a8-0c18dbcdc534.png" width="200">

### 課題2
課題1にボタン押下時に通知のダイアログでAIくんがランダムで「グー」、「チョキ」、「パー」だすプログラム

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/edb92a73-53c6-2673-1873-cce0233c1712.png" width="200">

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/110beecf-0e4f-5d17-4ef9-87af0f94c368.png" width="200">


### 課題3

課題2にImage.asstウィジェット使って画像を通知ダイアログに追加する。

画像は以下を使用する。
https://illustcenter.com/2022/05/13/rdesign_14296/
https://illustcenter.com/2022/05/13/rdesign_14298/
https://illustcenter.com/2022/05/13/rdesign_14297/

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/8d0ab0ed-0fe1-0cf4-40dd-51ba6be1c5f2.png" width="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/dc30526b-a1d0-fe9c-2436-2ee031676470.png" width="200">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3929117/fd118d38-1ff9-5793-bdcb-5bcef44fc7e3.png" width="200">




## 次回はじゃんけんアプリの解説です。