step 1: Create a state variable
Add a state variable:
In FlutterFlow, go to the "Variables" section.
Add a new boolean state variable and name it isButtonClicked. Set its initial value to false.
Step 2: Configure the button
Add a button:
On your screen, add a "Button" widget.
Customize the button's text and basic style as desired.
Add action to button:
Select the button.
Go to the "Actions" tab.
Add an "On Tap" action.
Choose the "Update Variable" action.
Select the isButtonClicked variable.
Configure the action to invert (toggle) the value of isButtonClicked. To do this, choose !isButtonClicked.
Step 3: Change button color based on state
Configure the button color conditionally:
Select the button.
Go to the "Properties" tab and find the "Background Color" setting.
Click on the background color and select "Conditional".
Configure the condition:
Condition: isButtonClicked == true
Color: Choose the desired color when the button is clicked (e.g. green).
Otherwise: Choose the button's original color (e.g. blue).
Step 4: Test the interaction
View the application:
Run your app in FlutterFlow preview mode.
Click the button and watch the color change.
Summary of Simplified Steps
Add a state variable:
Name: isButtonClicked
Type: boolean
Initial value: false
Add and configure button:
Button text: "Click me"
Initial background color: Blue
"On Tap" action to invert isButtonClicked (toggle).
Configure the button color conditionally:
Background color (conditional):
Condition: isButtonClicked == true
Green color
Otherwise: Blue