Flutter入門1_基本的なWidget

2024年3月にiOSアカデミアを経てアプリリリースを致しました。
今回からは現在独学中のFlutterを記事にまとめていこうと思います。
実務未経験かつコードを触り始めて約1年半（実際に書いているのは1年ほど？）なので
ご指摘あればご連絡頂けたらと思います。

Swiftを学んで思ったことは
復習として備忘録を付ければ良かったと後悔しました。
Flutterに関してはQiitaを使用しながら学習を進めようと思います。

皆さんの解決策にもなれば幸いです。



今回はFlutterのWidgetに関して記載しようと思います。

目次
-Widgetとは
-1.構成
-2.Scaffold Widget
-3.AppBar Widget
-4.Container Widget
-5.Text Widget
-6.Center Widget
-7.Colum Widget
-8.Row Widget
-9.floatingActionButton Widget
-参考文献
-最後に




# Widgetとは
・FlutterのUIを構成しているパーツのこと
・様々なWidgetを組み合わせることで複雑なUIを構成している
・見出し2・3・5・6・9の色と下記の色分けは一致している
・下記画面はFlutterプロジェクト作成時のデフォルトアプリである
<img width="40%" alt="Widget①.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/bfb5b32f-0c70-9d02-86a5-be497793f04f.png">

## 1.構成
・プロジェクト作成時にはデフォルトでカウンターアプリが生成される
・様々なWidgetを組み合わせることでUIを構築していく
・見出し2・3・5・6・9はデフォルト文より一部抜粋している


## <font color="orange">**2.Scaffold Widget**</font>
・基本的に画面構成の際に使用する
・このWidgetの中に他のWidgetを入れて構成を作る

```php
@override
  Widget build(BuildContext context) {
    return Scaffold(
```


## <font color="red">**3.AppBar Widget**</font>
・画面上部のBarの構成を作成する際に使用する
・こちらには記載していないがText内のwidget.title(=Flutter Demo Home Page)は
　デフォルト文のコード内の上部に記載があり名前の変更が可能
```php
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
```

## <font color="Gold">**4.Container Widget（デフォルト文に無し）**</font>
・デフォルト文はbody: Colum()となっている
・Containerは箱という意味
・横幅(width)や高さ(height)などの機能追加も可能
　※double.infinityは最大限広げる方法。通常は数値を入力
・childを使用することでContainerの中にさらに小さな枠組みを作成することができる
```php
      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
            ),
```
・実際に上記を実行すると下記のようにContainer内の画面が赤くなる
<img width="20%" alt="Widget②.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/e67571fd-2637-a3d0-3a07-9260566614ff.png">



## <font color="Blue">**5.Text Widget**</font>
・文字や数値を表示する
・2文目'$_counter'はデフォルト文として記載されており
　ボタンを押すと数字が増える表示をするためにある
・Textの上部にある方が順番を優先される
　※今回はCenter WidgetのためUI内ではTextが真ん中に表示され
 　　You have pushed the button this many times:が上部
  　　カウントアップ（0）が下部に表示される
 　

```php
const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
```

## <font color="Blue">**6.Center Widget**</font>
・配置を真ん中にするWidget
・今回は
　「You have pushed the button this many times:」とカウントアップを
 　真ん中に配置している
```php
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
```

## <font color="Blue">**7.Colum Widget**</font>
・Colum内の複数のWidgetを列（縦）で表示できる
・childrenを使用して多くのWidgetを入れることができる
```php
child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
```
## <font color="Black">**8.Row Widget（デフォルト文に無し）**</font>
・Colum内の複数のWidgetを横に表示できる
・childrenを使用して多くのWidgetを入れることができる
```php
child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
```
実際に上記を実行すると下記のように2つのTextが横並びになる
<img width="20%" alt="Widget③.png" img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3121562/afe19021-3782-0b7d-eeea-ad2e6510c453.png">


## <font color="Green">**9.floatingActionButton Widget**</font>
・ボタンを作成するwidget
・今回はボタンを押した時（onPressed:）
　ボタンにカーソルを合わせた時（tooltip）
　ボタンアイコン（child:const Icon）を記載している
```php    
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}
```

## 参考文献
Flutter大学. 「Flutter超入門2022】①基本的なWidgetの使い方【Flutter3.0】」.　YouTube.　2022/06,https://www.youtube.com/watch?v=4b6DuHGcltI,
（参照 2024-06-18）

## 最後に
どなたか画像を真ん中にするやり方を教えて下さい笑