flutter-ui-patterns

Flutter UI パターン

状態を明確に反映し、テストしやすさを保つウィジェットツリーで、宣言的なインターフェースを構築します。

視覚的な階層、トークンの選択、タイポグラフィ、色、サーフェス、デザインの方向性は flutter-ui-design が担当します。このスキルでは、それらの決定を保守しやすいウィジェットで実装します。

コンポジション

• ウィジェットは、ファイルの長さではなく、まとまりのある UI の概念、再利用、状態の分離、またはテストのしやすさを基準に切り出します。
• 有効な場合は、不変のウィジェット設定と const コンストラクターを優先します。
• build 内に副作用を置かず、ライフサイクルに安全なコントローラー、状態オブジェクト、または明示的なコールバックから実行します。
• 散在するリテラルのスタイルではなく、プロジェクトのテーマとセマンティックなデザイントークンを使用します。
• Material と Cupertino で動作を変えるべき場合は、プラットフォームの慣習を保ちます。
• フォームには、明確な検証、フォーカス、送信、エラーの動作を設定します。
• キーは安定していて目的が明確なものにします。再ビルドを強制するために、ランダムなキーや変化するキーを使わないでください。

状態の境界

コントローラー、フォーカスノード、アニメーションコントローラーは、それらを生成するライフサイクル内で管理し、同じ場所で破棄します。別のコンポーネントとの調整が必要な場合に限り、状態を上位に引き上げます。

条件に応じたリファレンスの読み込み

• 検証、フォーカス移動、自動入力、非同期の送信、またはフィールドのエラー動作を実装する場合は、フォームと入力を読みます。
• Flutter Widget Previewer のアノテーションやフィクスチャを追加または修正する場合は、ウィジェットプレビューを読みます。

検証

意味のある表示状態と操作をテストします。テキストの拡大、対応している場合はキーボード入力、ライト／ダークテーマ、および想定するフォームファクターの最小と最大をそれぞれ確認します。

参考資料

• Flutter UI
• ウィジェットカタログ
• Flutter フォームクックブック
• Flutter Widget Previewer