Flutter初心者なので、コードリーディングしてみた!
2024-05-27
azblob://2024/05/27/eyecatch/2024-05-27-flutterCodeReading-000.png

私は業務で使用するFlutterについて知識がありません。初見です。

なので、

基礎学習としてサンプルプログラムのコードリーディングをしました!

===========================================================================

今回使用したサンプルプログラム 

https://github.com/flutter/samples.git のsimple_shader/lib/main.dart

コード全体については上記のURLを参照してください。

以下では、各項目について解説しています。

◇main関数

エントリーポイント。runApp関数はWidgetツリーのルートを指定してWidgetを画面に反映する。今回はMyAppをWidgetツリーのルートに指定している。

- Widgetツリーとは? -

Widgetツリーは、Widgetを構成している木構造のこと。Widget_Aの子供にWidget_B、その子供にWidget_Cと親子関係を作り上げることで、1つのWidgetを構成する。

◇MyAppクラス

  1. StatelessWidgetを継承したMyAppクラスを宣言
  2. MyAppクラスのコンストラクタ。StatelessWidgetクラスのキーを指定している
  3. StatelessWidgetクラスのbuild関数を再定義。返値は表示するWidget。引数には表示するWidgetのBuildContextを指定する。今回は、タイトル、テーマ、最初に表示されるページを指定したMaterialAppを返している。

- StatelessWidgetとStatefulWidgetの違い - 

StatelessWidgetとStatefulWidgetはともにWidgetという抽象クラスを継承しています。Widgetクラスは状態を持たないのでStateless/fulWidgetはともに状態を持つことはできません。
しかし、StatefulWidgetは状態を保持するクラスである、”Stateクラス”を生成するCreateState関数を包含しています。StatefulWidgetは生成したStateクラスを介し状態を保持しています。

◇MyHomePageクラス

  1. Scaffoldはアプリケーションの標準的な画面構造やレイアウトを提供するWidget。ボタンやアプリケーションバーなどのUI要素を包含している。
  2. appBarはアプリケーションバーを構成している。今回はバーの中にSimple Shader Demoというタイトルを記入している。
  3. bodyはアプリケーションのメインコンテンツを構成している。今回は中央にサークル表示された、色付きの矩形を表示している。ここでもWidgetツリーがみられる。

◇ShaderPainterクラス

  1. shaderを使用して描画。今回はフラグメントシェーダーを指定している。
  2. 画面に描画する関数第一引数にキャンバス、第二引数にキャンバスサイズを指定する。
  3. 色情報などの属性を持っている。その中のshader属性にShaderPainterクラスのshader変数を当てている。
  4. 矩形を描画する関数。Rectには左端、上端、幅、高さを指定している。色などの情報はpaint変数を介して渡している。
  5. 再塗装用の関数。第一引数にCustomPainter(描画に使う情報)を指定する。

以上が今回コードリーディングした結果です。まだまだ勉強は必要ですが、Flutterについて詳しくなることができました!