Data types (int, double, String, bool) in Flutter - UI Render Trace

Component - Data types (int, double, String, bool)

This Flutter widget shows examples of the four basic data types: int (whole numbers), double (decimal numbers), String (text), and bool (true or false). It displays their values on the screen in a simple list.

Widget Tree

Scaffold
├─ AppBar
│  └─ Text
└─ Body
   └─ Padding
      └─ Column
         ├─ Text (int value)
         ├─ Text (double value)
         ├─ Text (String value)
         └─ Text (bool value)

The Scaffold provides the basic page structure with an AppBar at the top showing a title. The body has padding around a Column that stacks four Text widgets vertically. Each Text widget shows one data type's value.

Render Trace - 8 Steps

Step 1: Scaffold

Step 2: AppBar

Step 3: Padding

Step 4: Column

Step 5: Text (int value)

Step 6: Text (double value)

Step 7: Text (String value)

Step 8: Text (bool value)

State Change - Re-render

Trigger:No state change in this static example

Before

Initial display of data type values

→

After

No change, values remain the same

Re-renders:None, widget is stateless and static

UI Quiz - 3 Questions

Which widget shows the decimal number in this UI?

A AppBar widget

B Text widget showing 'int value: 42'

C Text widget showing 'double value: 3.14'

D Padding widget

Key Insight

Using simple Text widgets inside a Column is an easy way to display multiple data values clearly. Padding helps keep the content readable by adding space around it. This layout is common for showing lists or examples in mobile apps.

Practice

1. Which data type in Flutter is used to store true or false values?

easy

A. bool

B. int

C. String

D. double

Solution

1. Step 1: Understand the bool data type

   The bool data type stores only two values: true or false.

2. Step 2: Compare with other data types

   int stores whole numbers, double stores decimals, and String stores text, so they do not fit true/false values.

3. Final Answer:

   bool -> Option A

4. Quick Check:

   bool = true or false [OK]

Hint: Remember: bool means true or false only [OK]

Common Mistakes:

• Confusing bool with int
• Thinking String can store true/false
• Using double for true/false

2. Which of the following is the correct way to declare a double variable named price with value 9.99 in Flutter?

easy

A. double price = 9,99;

B. double price = 9.99;

C. int price = 9.99;

D. String price = 9.99;

Solution

1. Step 1: Check the syntax for double declaration

   In Flutter, double values use a dot (.) as decimal separator, so 9.99 is correct.

2. Step 2: Verify variable type and value match

   double price = 9.99; is correct. double price = 9,99; uses comma which is invalid. int price = 9.99; uses int for decimal value. String price = 9.99; uses String but value is numeric.

3. Final Answer:

   double price = 9.99; -> Option B

4. Quick Check:

   double uses dot for decimals [OK]

Hint: Use dot (.) for decimals in double, not comma [OK]

Common Mistakes:

• Using comma instead of dot
• Assigning decimal to int
• Assigning number to String without quotes

3. What will be the output of this Flutter code?

int a = 5;
double b = 2.0;
print(a + b);

medium

A. 7.0

B. 7.00

C. 7

D. Error

Solution

1. Step 1: Understand type promotion in addition

   Adding int and double results in a double value in Flutter.

2. Step 2: Calculate the sum

   5 + 2.0 = 7.0 as a double, so print outputs 7.0.

3. Final Answer:

   7.0 -> Option A

4. Quick Check:

   int + double = double [OK]

Hint: int + double results in double output [OK]

Common Mistakes:

• Expecting int output
• Thinking print shows 7.00
• Assuming syntax error

4. Identify the error in this Flutter code snippet:

bool isActive = "true";

medium

A. Variable name is invalid

B. Missing semicolon

C. bool cannot store text in quotes

D. No error, code is correct

Solution

1. Step 1: Check bool assignment rules

   bool variables must be assigned true or false without quotes.

2. Step 2: Analyze the code

   "true" is a String, not a bool, so this causes a type error.

3. Final Answer:

   bool cannot store text in quotes -> Option C

4. Quick Check:

   bool = true or false without quotes [OK]

Hint: Assign bool without quotes, quotes mean String [OK]

Common Mistakes:

• Using quotes around true/false
• Ignoring type mismatch errors
• Assuming variable name causes error

5. You want to store a user's age, height in meters, name, and whether they are a student. Which Flutter data types should you use for age, height, name, and isStudent respectively?

hard

A. bool, String, double, int

B. double, int, bool, String

C. String, double, int, bool

D. int, double, String, bool

Solution

1. Step 1: Match each variable to its data type

   Age is a whole number -> int; height is decimal -> double; name is text -> String; isStudent is true/false -> bool.

2. Step 2: Verify option matches all types correctly

   int, double, String, bool matches int, double, String, bool in order for age, height, name, isStudent.

3. Final Answer:

   int, double, String, bool -> Option D

4. Quick Check:

   Whole number, decimal, text, true/false [OK]

Hint: Match data type to real-world meaning: number, decimal, text, true/false [OK]

Common Mistakes:

• Mixing int and double
• Using bool for text
• Confusing order of types