📕 Flutter初学者による勉強メモ 🖊️

今までの業務ではJavaScriptを用いてバック〜フロントまでやっていたのですが、今回の案件から初めてFlutterでアプリ開発を行うことになったので備忘録も兼ねて

Flutterの Widget とは？

Flutterにおける Widget とは、UIを構成する基本的な要素です。画面上のすべての要素は Widget でできている と考えてください。

例えば、ボタン・テキスト・画像・レイアウト など、FlutterアプリのUI要素はすべて Widget で表現されます。

フロントで言うComponentという概念と同じかなと考えております

Widgetの種類

① StatelessWidget（ステートレスウィジェット）
　状態（State）を持たない Widget
　表示が 一度決まると変化しない
　build メソッド内で UI を返すだけ

② StatefulWidget（ステートフルウィジェット）
　状態（State）を持つ Widget
　状態の変化に応じて 再描画される
　State クラスと組み合わせて使う

大きく分けてこの2つがある様子

Widgetの階層構造

ここが僕の中では聞きなれないのですが、FlutterのUIは ツリー構造（Widgetツリー） になっているとのこと
イメージとしては関数の中に子要素を書いていく・・・
そんな感じ

MaterialApp(
 home: Scaffold(
   appBar: AppBar(title: Text('Widget Tree')),
   body: Center(
     child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
         Text('Hello, World!'),
         ElevatedButton(onPressed: () {}, child: Text('Click Me'))
       ],
     ),
   ),
 ),
)

今日はひとまずここまで
Flutterのお作法を守って書く必要があり、まだまだ慣れないです。