Flutter-architecture-application
Flutter-アーキテクチャアプリケーション
この章では、Flutterフレームワークのアーキテクチャについて説明します。
ウィジェット
Flutterフレームワークのコアコンセプトは* Flutterでは、すべてがウィジェットです*。 ウィジェットは基本的に、アプリケーションのユーザーインターフェイスを作成するために使用されるユーザーインターフェイスコンポーネントです。
_Flutter_では、アプリケーション自体がウィジェットです。 アプリケーションはトップレベルのウィジェットであり、そのUIは1つ以上の子（ウィジェット）を使用して構築され、子は再び子ウィジェットを使用して構築されます。 この composability 機能は、複雑なユーザーインターフェイスを作成するのに役立ちます。
たとえば、hello worldアプリケーション（前の章で作成）のウィジェット階層は、次の図で指定されています-
ここで、次の点は注目に値します-
- _MyApp_はユーザーが作成したウィジェットで、Flutterネイティブウィジェット_MaterialApp_を使用してビルドされます。
- _MaterialApp_には、ホームページのユーザーインターフェイスを指定するhomeプロパティがあります。これは、ユーザーが作成したウィジェット_MyHomePage_です。
- _MyHomePage_は、別のフラッターネイティブウィジェット_Scaffold_を使用して構築されます
- _Scaffold_には、_body_と_appBar_の2つのプロパティがあります
- _body_はメインユーザーインターフェイスを指定するために使用され、_appBar_はヘッダーユーザーインターフェイスを指定するために使用されます
- _Header UI_はフラッターネイティブウィジェットを使用してビルドされ、_AppBar_および_Body UI_は_Center_ウィジェットを使用してビルドされます。
- _Center_ウィジェットには、実際のコンテンツを参照するプロパティ_Child_があり、_Text_ウィジェットを使用して構築されます
ジェスチャー
Flutterウィジェットは、特別なウィジェット_GestureDetector_を介した対話をサポートします。 _GestureDetector_は、子ウィジェットのタップ、ドラッグなどのユーザーインタラクションをキャプチャする機能を持つ非表示のウィジェットです。 Flutterの多くのネイティブウィジェットは、_GestureDetector_の使用による相互作用をサポートしています。 _GestureDetector_ウィジェットで構成することにより、既存のウィジェットにインタラクティブ機能を組み込むこともできます。 ジェスチャーについては、今後の章で個別に学習します。
状態の概念
Flutterウィジェットは、_StatefulWidget_という特別なウィジェットを提供することにより、_State maintenance_をサポートします。 ウィジェットは、状態の維持をサポートするために_StatefulWidget_ウィジェットから派生する必要があり、他のすべてのウィジェットは_StatefulWidget_から派生する必要があります。 Flutterウィジェットはネイティブでは*リアクティブ*です。 これはreactjsに似ており、_StatefulWidget_は内部状態が変更されるたびに自動的に再レンダリングされます。 再レンダリングは、古いウィジェットと新しいウィジェットのUIの違いを見つけて、必要な変更のみをレンダリングすることにより最適化されます
レイヤー
Flutterフレームワークの最も重要な概念は、フレームワークが複雑さの観点から複数のカテゴリにグループ化され、複雑さが減少する層に明確に配置されることです。 レイヤーは、そのすぐ次のレベルのレイヤーを使用して構築されます。 最上位のレイヤーは、_Android_および_iOS_に固有のウィジェットです。 次のレイヤーには、すべてのフラッターネイティブウィジェットがあります。 次のレイヤーは_Rendering layer_です。これは低レベルのレンダラーコンポーネントであり、フラッターアプリですべてをレンダリングします。 レイヤーはコアプラットフォーム固有のコードになります
Flutterのレイヤーの一般的な概要は、以下の図に指定されています-
次のポイントは、フラッターのアーキテクチャをまとめています-
- Flutterでは、すべてがウィジェットであり、複雑なウィジェットは既存のウィジェットで構成されています。
- _GestureDetector_ウィジェットを使用すると、必要に応じてインタラクティブ機能を組み込むことができます。
- ウィジェットの状態は、_StatefulWidget_ウィジェットを使用して必要なときにいつでも維持できます。
- Flutterはレイヤー化されたデザインを提供しているため、タスクの複雑さに応じて任意のレイヤーをプログラムできます。
これらすべての概念については、今後の章で詳しく説明します。
