Comment on page
Code Expression
A code expression is a piece of code combining the operators, variables, and/or values that returns a result. It can be used to perform arithmetic and logical operations, and more. Examples of code expressions include mathematical operations (e.g., price * quantity, price + tax) and logical operations (e.g., score > 30).
This simplifies and speeds up the process by allowing you to add any Dart expression without creating an entirely new custom function.
Code expressions for math operations follow typical precedence (e.g., multiplication/division before addition/subtraction), but parentheses can change the order.
Let's see how to add a code expression on a checkout page that calculates the total amount. Here's how it looks:
Code expression to calculate the total price
To add a code expression:
- 1.Select a widget property or a condition action that allows you to set from a variable.
- 2.Select Set from Variable or Add Conditional (while adding actions) and select source as Code Expression.
- 3.Arguments are the inputs to your code expression. You might need to pass them to process the data. To do so, click + Add argument.
- 1.Open the first argument section (i.e., var1).
- 2.Here you can Name it, set its Type, and choose whether it will be List or Nullable.
- 3.To pass the value, click UNSET and select the source for the input.
- 4.In the Return Type section, you can set the output Type of the result and choose whether it will be a List. In some cases, you might want to set a different type, for example, taking input in numbers and returning the result in a string.
- 5.In the Expression field, enter your code expression. To access the arguments, simply use their names (e.g., var1 + var2).
- 6.Check Errors to verify the expression's correctness and receive error hints, if any.
- 7.Enter the Default Variable Value.
Adding code expression
Let's see some more examples of using code expression to solidify understanding and use it in real-world scenarios.
You can use code expressions to validate user inputs. For example, you might have a form with a text field where the user enters the age. You can use a code expression to check if it meets certain age criteria (e.g., it must be at least 18) and then let them know via any action (e.g., snackbar) or a simple text message.
Code expression on Text widget
Using code expression to decide next action
To let users know about their eligibility as they type, you can use the Text widget with a code expression and set the TextField to Update Page On Change. Here's how you do it:
Code expression to check user age
To use the code expression in an action editor, choose the Condition Action, and then in the Set Condition for Action, choose the Code Expression. Here's how you do it:
Using code expression in a action editor
Code expression to check user age
You can use code expressions to dynamically render parts of your UI based on conditions. For example, you might want to show or hide a certain widget or its properties based on whether a certain condition is true or false.
Using code expression to change container's color
Code expression to set container's color
You can use code expressions to search or filter the data. For example, filter a list of products based on certain criteria such as price or category.
Here's an example of using the code expression to search for an employee.
Searching with employee name
Code expression: show found employee(s) count
Code expression: If employee is not found, show all employees