# 【解決済み】条件によってスタイルを変更する方法

**URL:** <https://www.nocode-faq.com/t/topic/3662>\
**Category:** flutterflow\
**Tags:** フロントエンド\
**Created:** [2023 年 6 月 7 日午前 5:53 UTC](https://www.nocode-faq.com/t/topic/3662 "2023-06-07T05:53:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2023 年 6 月 7 日午前 5:53 UTC](https://www.nocode-faq.com/t/topic/3662/1 "2023-06-07T05:53:13Z")

</div>

## やりたいこと

データ条件によって背景色を変更したい

## 現状

Containerを複数並べて、Conditional Visibilityにて非表示設定にしている。

## 困りごと

widgetが増えて管理が難しくなりそうなので  
例えば、  
１であれば赤色  
２であれば青色のように一つのWidget Containerで設定変更することは可能でしょうか。

## 試したこと

ChatGPTに質問してみましたが、Conditionalオプションが見当たりませんでした。  
ここは動的な値を設定するところなので、他のところ？？  
もしくは、Action Flow Editorから条件つけて変更などでしょうか。。

 ![スクリーンショット 2023-06-07 14.50.45](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/51b6aac4840ec3efe79374da7dbc70dd5c310ca8.png)

> FlutterFlowでは、Containerの背景色を複数の条件に基づいて動的に変更する方法があります。以下に手順を示します。
> 
> 1. FlutterFlowのデザイナーツールを開き、背景色を設定したいContainerウィジェットを選択します。
> 2. プロパティパネルで、背景色のプロパティを見つけます。通常、`color`や`background color`といった名前が使われます。
> 3. 背景色プロパティをクリックして、設定を開きます。
> 4. プロパティの値を動的に変更するために、`Conditional`オプションを選択します。
> 5. `Add Condition`ボタンをクリックして、条件を追加します。
> 6. 条件ごとに、背景色を設定するための手順を繰り返します：
> 
> - 条件のフィールドをデータフィールド（例：データプロバイダーからのデータフィールド）に設定します。
> - 演算子を選択します。例えば、データが1の場合は`==`（等しい）、データが2の場合は`==`（等しい）など、適切な演算子を選択します。
> - 条件の値を設定します。例えば、1または2など、背景色を変更したいデータの値を設定します。
> 
> 1. 各条件に対して、適切な背景色を設定します。例えば、条件が満たされた場合は赤色、それ以外の場合は青色などです。
> 2. 設定を保存して、FlutterFlowのコードを生成します。
> 
> 上記の手順に従って複数の条件を設定することで、データに基づいてContainerの背景色を変更することができます。条件ごとに異なる背景色を設定することで、より柔軟なデザインを実現できます。

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2023 年 6 月 7 日午前 11:49 UTC](https://www.nocode-faq.com/t/topic/3662/2 "2023-06-07T11:49:18Z")

</div>

６月７日のもくもく会にて解決しました！  
Fill colorにif文が選択できたので、ここで複数の条件を作ることができました。

 ![スクリーンショット 2023-06-07 20.48.26](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/56d342beecd093aa29487f75a873949e8d4c6187.jpeg)