導入
roadmap.shのFlutterの4本目です。
次はStyled Widgetsという項目です。
正直あまり意識したことがなかった範囲なのですが、本文にあるとおり、デザイン関連の内容になります。
Styled Widgetsとは
Styled Widgetsとは、色、フォント、形状などのカスタムスタイルで装飾されたFlutterウィジェットのことです。これらは、既存のウィジェットをContainer、Theme、BoxDecorationなどの他のウィジェットでラップすることによって作成することができます。
Styled Widgetsを利用することでFlutterアプリの外観と感触を簡単にカスタマイズし、一貫したビジュアルスタイルを作成することができます。
例
- Containerウィジェット
- 固定の幅、高さ、パディング、およびマージンを設定できます。
- Themeウィジェット
- アプリ全体またはその一部のカラースキームとタイポグラフィを指定できます。
- BoxDecoration
- ウィジェットにボーダー、背景色、およびボーダー半径を追加できます。
Styled Widgets詳細内容
MediaQuery
メディアクエリとは、デバイスに合わせて最適な画面サイズになるようにスタイル・レイアウトを調整するものです。
MediaQuery.sizeOfやMediaQuery.paddingOfなどの特定のメソッドを使用して現在のメディアの情報を取得する場合、そのプロパティが変更されるたびにウィジェットが自動的に再構築されます。
MediaQuery.ofを使用して情報を取得すると、MediaQueryDataの任意のフィールドが変更されるたびにウィジェットが自動的に再構築されます。
したがって、MediaQuery.sizeOfやMediaQuery.paddingOfを使用する方が効率的ですのでおすすめです。
範囲内にMediaQueryがない場合、MediaQuery.ofやMediaQuery.sizeOfのような"...Of"メソッドは例外をスローします。
代わりに、範囲内にMediaQueryがない場合に例外をスローする代わりにnullを返す「maybe-」バリアントメソッドを使用することができます。
Padding
Paddingは、子ウィジェットを指定されたパディングで挿入するウィジェットです。
レイアウト制約を子ウィジェットに渡す際に、指定された分だけ制約を縮小し、子ウィジェットが小さいサイズでレイアウトされるように調整します。
その後、パディングが子ウィジェットのサイズに合わせて自身のサイズを調整し、子ウィジェットの周りに空白を作り出します。
以下は、各方向に16ピクセルのパディングを持つCard内に「Hello World!」というテキストを表示する例です。
const Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Text('Hello World!'),
)
デザインの議論
Paddingウィジェットを使うのと、ContainerウィジェットのContainer.paddingプロパティを使うのとでは大きな違いはありません。
Container.paddingを利用すると、Containerは自動的にPaddingウィジェットを構築します。
Containerは、複数のシンプルなウィジェットを組み合わせて便利なパッケージにまとめてくれています。
- 例
- Container.paddingプロパティはPaddingウィジェットを構築
- Container.decorationプロパティはDecoratedBoxウィジェットを構築
Containerが不便だと感じるなら、シンプルなウィジェットを必要に応じて組み合わせて使用すれば良いでしょう。
Theme
Themeは子孫ウィジェットにテーマを適用します。
テーマとは、アプリケーションの色やタイポグラフィの選択を表すものです。
子孫ウィジェットは、現在のテーマのThemeDataオブジェクトをTheme.ofを使って取得します。ウィジェットがTheme.ofを使用すると、後でテーマが変更された場合に自動的に再構築されます。
終わりに
この記事では、Flutterアプリのカスタマイズとスタイリングに役立つStyled Widgets、MediaQuery、Padding、Themeについて詳しく説明しました。
MediaQueryを使うことでデバイスに応じたレイアウトの最適化が可能になり、PaddingとThemeを利用することでウィジェットの配置やテーマを柔軟に管理することができます。
これが誰かの役に立てばと思います。