❔

Card Widgetの色が白にできない???

2024/02/05に公開

Flutter

Dart

tech

💡Tips

Flutterで白色を使いたくて指定してできないことがあった🤔

16進数を指定したのに?

color: const Color(0xFFFFFFFF),

Cardウィジェットの色が白にならない理由は、CardウィジェットがThemeDataのcardColorプロパティを使用している可能性があります。ThemeDataのcardColorプロパティは、アプリケーション全体のカードのデフォルトの背景色を設定します。

Cardウィジェットのcolorプロパティを使用して背景色を設定しても、ThemeDataのcardColorプロパティが設定されている場合、cardColorプロパティの値が優先されます。

したがって、Cardウィジェットの背景色を白に設定するには、ThemeDataのcardColorプロパティを白に設定するか、Materialウィジェットを使用してCardウィジェットの背景色を上書きすることができます。

以下に、Materialウィジェットを使用してCardウィジェットの背景色を白に設定する例を示します：

Card(
  child: Material(
    color: const Color(0xFFFFFFFF),
    child: // ここにCardの子ウィジェットを配置します
  ),
)

この例では、Materialウィジェットのcolorプロパティを使用して背景色を白に設定しています。これにより、Cardウィジェットの背景色が白になります。

Materialウィジェットを使ってない場合:

Materialウィジェットを使った場合:

まとめ

Material classとは?

素材の一部。

マテリアルウィジェットは次の役割を果たします。

クリッピング:clipBehavior が Clip.none でない場合、マテリアルはそのウィジェットのサブツリーを、shape、type、borderRadius で指定された形状にクリップします。デフォルトでは、パフォーマンスを考慮して、clipBehavior は Clip.none です。これがインクウィジェットのクリッピングにどのような影響を与えるかについては、「インク」を参照してください。
Elevation: マテリアルは、ウィジェットのサブツリーを Z 軸上で標高ピクセル分上昇させ、適切なシャドウを描画します。
インクエフェクト: マテリアルは、その子の下にある InkSplash や InkHighlight などの InkFeature によって実装されたインクエフェクトを示します。

The Material Metaphor

マテリアルはマテリアルデザインの中心的なメタファーです。マテリアルの各部分は特定の高度に存在し、これは、そのマテリアルが他のマテリアルとどのように視覚的に関連するか、またそのマテリアルがどのように影を落とすかに影響します。

ほとんどのユーザーインターフェイス要素は、概念的に 1 枚の素材に印刷されるか、それ自体が素材で作られます。マテリアルは、InkSplash および InkHighlight エフェクトを使用してユーザー入力に反応します。マテリアル上で反応をトリガーするには、Material.of 経由で取得した MaterialInkController を使用します。

一般に、マテリアルの特徴は時間の経過とともに変化してはなりません (たとえば、マテリアルはその色、shadowColor、またはタイプを変更すべきではありません)。 Elevation、shadowColor、surfaceTintColor への変更は、animationDuration でアニメーション化されます。タイプが MaterialType.transparency ではなく、前と次の形状値の間の ShapeBorder.lerp がサポートされている場合、形状への変更はアニメーション化されます。形状の変化も、animationDuration でアニメーション化されます。

なんだが分かりにくい言葉ですね。普段はツリーがどうとか全く意識してなくて、完成させることを優先なので、深掘りはしてないです。

サブツリーってのが、Materialウィジェットを使用してCardウィジェットをラップしたものなら、このように上書きしてあげる必要があるんでしょうね。

ThemeDataのcardColorプロパティを白に設定するか、Materialウィジェットを使用してCardウィジェットの背景色を上書きする

💡Tips

まとめ

Material classとは?

The Material Metaphor

Discussion