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プロジェクト作成時のデフォルトアプリである

1.構成

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

2.Scaffold Widget

・基本的に画面構成の際に使用する
・このWidgetの中に他のWidgetを入れて構成を作る

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

3.AppBar Widget

・画面上部のBarの構成を作成する際に使用する
・こちらには記載していないがText内のwidget.title(=Flutter Demo Home Page)は
　デフォルト文のコード内の上部に記載があり名前の変更が可能

      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),

4.Container Widget（デフォルト文に無し）

・デフォルト文はbody: Colum()となっている
・Containerは箱という意味
・横幅(width)や高さ(height)などの機能追加も可能
　※double.infinityは最大限広げる方法。通常は数値を入力
・childを使用することでContainerの中にさらに小さな枠組みを作成することができる

      body: Container(
        color: Colors.red,
        width: double.infinity,
        height: double.infinity,
            ),

・実際に上記を実行すると下記のようにContainer内の画面が赤くなる

5.Text Widget

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

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

6.Center Widget

・配置を真ん中にするWidget
・今回は
　「You have pushed the button this many times:」とカウントアップを
　真ん中に配置している

      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,
            ),
          ],
        ),
      ),

7.Colum Widget

・Colum内の複数のWidgetを列（縦）で表示できる
・childrenを使用して多くのWidgetを入れることができる

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,
            ),
          ],
        ),

8.Row Widget（デフォルト文に無し）

・Colum内の複数のWidgetを横に表示できる
・childrenを使用して多くのWidgetを入れることができる

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が横並びになる

9.floatingActionButton Widget

・ボタンを作成するwidget
・今回はボタンを押した時（onPressed:）
　ボタンにカーソルを合わせた時（tooltip）
　ボタンアイコン（child:const Icon）を記載している

      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）

最後に

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