Variables and type inference in Flutter - UI Render Trace

Component - Variables and type inference

This Flutter component shows how to declare variables using explicit types and type inference. It displays two texts: one with a variable declared with a type, and one with a variable where the type is inferred by the compiler.

Widget Tree

Scaffold
├── AppBar
│   └── Text
└── Center
    └── Column
        ├── Text
        └── Text

The Scaffold provides the basic app structure with an AppBar at the top showing a title. The body centers a Column that stacks two Text widgets vertically. The first Text shows a variable declared with an explicit type, and the second Text shows a variable declared with type inference.

Render Trace - 6 Steps

Step 1: Scaffold

Step 2: AppBar

Step 3: Center

Step 4: Column

Step 5: Text (first)

Step 6: Text (second)

State Change - Re-render

Trigger:No state change occurs in this static example.

Before

Initial display of two text lines showing variable declarations.

→

After

No change; UI remains the same.

Re-renders:No re-render triggered as no state changes.

UI Quiz - 3 Questions

What does the 'var' keyword do in the second Text widget?

A It declares a variable that can change its type later.

B It tells the compiler to infer the variable's type automatically.

C It declares a constant variable that cannot change.

D It is a special Flutter widget.

Key Insight

Using explicit types helps make your code clear, but type inference with 'var' lets the compiler figure out the type for you, making code shorter and easier to read. Flutter widgets like Scaffold and Center help organize your UI visually in a simple and understandable way.

Practice

1. What does the var keyword do in Dart when declaring a variable?

easy

A. It lets Dart guess the variable type from the assigned value.

B. It declares a variable without assigning any value.

C. It forces the variable to be of type String.

D. It creates a constant variable that cannot change.

Solution

1. Step 1: Understand var usage

   The var keyword tells Dart to infer the type based on the value assigned.

2. Step 2: Check other options

   Options B, C, and D describe different behaviors not related to var.

3. Final Answer:

   It lets Dart guess the variable type from the assigned value. -> Option A

4. Quick Check:

   Type inference = It lets Dart guess the variable type from the assigned value. [OK]

Hint: Remember: var means Dart guesses the type from the value [OK]

Common Mistakes:

• Thinking var declares a variable without a value
• Confusing var with const or final
• Assuming var always means String type

2. Which of the following is the correct way to declare an integer variable with explicit type in Dart?

easy

A. integer count = 10;

B. int count = 10;

C. var int count = 10;

D. count int = 10;

Solution

1. Step 1: Recall Dart syntax for typed variables

   In Dart, the type comes first, then the variable name, then the value.

2. Step 2: Check each option

   int count = 10; follows correct syntax: int count = 10;. Others are invalid syntax.

3. Final Answer:

   int count = 10; -> Option B

4. Quick Check:

   Explicit type declaration = int count = 10; [OK]

Hint: Type then name then value: int count = 10; [OK]

Common Mistakes:

• Putting var and type together
• Using 'integer' instead of 'int'
• Swapping variable name and type

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

var name = 'Alice';
var age = 30;
print('$name is $age years old');

medium

A. Alice is 30 years old

B. name is age years old

C. 30 is Alice years old

D. Error: Cannot print variables like this

Solution

1. Step 1: Understand string interpolation

   The \$ syntax inserts variable values inside strings in Dart.

2. Step 2: Substitute variables in the print statement

   Variables name and age are replaced by 'Alice' and 30 respectively.

3. Final Answer:

   Alice is 30 years old -> Option A

4. Quick Check:

   String interpolation = Alice is 30 years old [OK]

Hint: Use \$variable to insert values in strings [OK]

Common Mistakes:

• Printing variable names instead of values
• Forgetting to escape $ in strings
• Assuming print shows variable types

4. Identify the error in this Dart code:

var number;
number = 5;
number = 'five';

medium

A. Error: Variable must be declared with final

B. Error: Cannot assign a String to a variable inferred as int

C. No error, Dart allows changing types with var

D. Error: Missing semicolon after first line

Solution

1. Step 1: Understand type inference with var and no initial value

   When declared without initial value, var number; defaults to dynamic type.

2. Step 2: Check assignments

   Assigning 5 (int) then 'five' (String) is allowed only if type is dynamic. But Dart infers type on first assignment if declared with var and initialized immediately. Here, no initial value means dynamic, so no error.

3. Final Answer:

   No error, Dart allows changing types with var -> Option C

4. Quick Check:

   Uninitialized var = dynamic type = No error, Dart allows changing types with var [OK]

Hint: Uninitialized var is dynamic, so type can change [OK]

Common Mistakes:

• Assuming var always fixes type on declaration
• Thinking missing semicolon causes error here
• Confusing final with var

5. Given this Dart code, what is the type of result?

var a = 10;
var b = 3.5;
var result = a + b;

hard

A. int

B. String

C. num

D. double

Solution

1. Step 1: Identify types of variables a and b

   a is int (10), b is double (3.5).

2. Step 2: Understand type inference of arithmetic operations

   Adding int and double results in a double in Dart.

3. Final Answer:

   double -> Option D

4. Quick Check:

   int + double = double [OK]

Hint: int plus double results in double type [OK]

Common Mistakes:

• Assuming result is int because a is int
• Choosing num instead of double
• Thinking result is String due to concatenation