1. レイアウト構築ウィジェット
行・列ウィジェット
-
Row: 子ウィジェットを横方向に並べる。 -
Column: 子ウィジェットを縦方向に並べる。 -
主なプロパティ:
-
mainAxisAlignment: 主軸方向の整列。 -
crossAxisAlignment: 副軸方向の整列。
-
スタックウィジェット
-
Stack: ウィジェットを重ねる。 -
Positioned:Stack内でウィジェットを特定の位置に配置。
グリッドウィジェット
-
GridView: 格子状のレイアウトを作成。 -
SliverGrid: カスタマイズ可能なグリッド。
2. サイズ調整ウィジェット
-
Container: サイズ、色、余白、装飾などを設定可能。 -
SizedBox: 固定のサイズを指定。 -
FractionallySizedBox: 親ウィジェットに対する相対的なサイズを指定。
3. 整列用ウィジェット
-
Align: 子ウィジェットを親ウィジェット内で整列。 -
Center: 子ウィジェットを中央に配置。 -
Baseline: 子ウィジェットの基準線に沿って配置。 -
Spacer:RowやColumnでスペースを均等に分割。
4. 余白・パディング
-
Padding: 子ウィジェットに内側の余白を設定。 -
Margin（Container内のmarginプロパティ）: 外側の余白を設定。
5. フレキシブルなサイズ管理
-
Expanded:RowやColumn内で利用し、空きスペースを埋める。 -
Flexible: 子ウィジェットを柔軟にサイズ調整。
6. リスト表示ウィジェット
-
ListView: スクロール可能なリスト。 -
CustomScrollView: スクロールビューのカスタマイズ。 -
SliverList: パフォーマンスを考慮したリスト表示。
7. レスポンシブ対応
-
MediaQuery: 画面サイズやデバイスの情報を取得して動的にレイアウトを調整。 -
LayoutBuilder: 親ウィジェットの制約に基づいてレイアウトを構築。
8. デコレーション・スタイル
-
Containerのdecorationプロパティ:- 背景色、枠線、影、角丸などを設定可能。
-
BoxDecoration:- 線形グラデーションや円形背景などを追加。
9. フロー系レイアウト
-
Wrap: 子ウィジェットを行や列にラップして表示。 -
Flow: 高度なカスタマイズが可能なフロー型レイアウト。
10. カスタムレイアウト
-
CustomMultiChildLayout: 独自のレイアウトロジックを構築。 -
Stack+ カスタムPositioned: 自由な配置。
11. アニメーション付きレイアウト
-
AnimatedContainer: サイズやスタイルの変化をアニメーション化。 -
AnimatedAlign: 整列位置をアニメーションで変更。
12. マルチプラットフォーム対応
-
FittedBox: 子ウィジェットを親ウィジェット内にフィットさせる。 -
AspectRatio: 特定のアスペクト比でサイズを制御。