Variables and type inference in Flutter - Mini App: Build & Ship

Build: Variable Demo Screen

This screen shows how to declare variables with and without type inference in Flutter. It displays two texts: one showing a variable declared with explicit type and another with inferred type.

Target UI

-------------------------
| Variable Demo Screen   |
|-----------------------|
| Explicit type: 42     |
| Inferred type: Hello  |
|                       |
|-----------------------|

Display a Scaffold with an AppBar titled 'Variable Demo Screen'.

Show two Text widgets in a Column centered vertically and horizontally.

First Text shows an integer variable declared with explicit type.

Second Text shows a string variable declared with type inference (var).

Starter Code

Flutter

import 'package:flutter/material.dart';

class VariableDemoScreen extends StatelessWidget {
  const VariableDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    // TODO: Declare variables and build UI
    return Scaffold(
      appBar: AppBar(
        title: const Text('Variable Demo Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // TODO: Add Text widgets here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class VariableDemoScreen extends StatelessWidget {
  const VariableDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    int explicitNumber = 42;
    var inferredString = 'Hello';

    return Scaffold(
      appBar: AppBar(
        title: const Text('Variable Demo Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Explicit type: $explicitNumber'),
            Text('Inferred type: $inferredString'),
          ],
        ),
      ),
    );
  }
}

We declared explicitNumber with the type int explicitly. This means we tell Flutter this variable will hold an integer.

We declared inferredString with var, so Flutter figures out the type automatically from the assigned value, which is a string.

Both variables are then shown in two Text widgets inside a centered Column. This helps beginners see how type declaration and inference work in Flutter.

Final Result

Completed Screen

-------------------------
| Variable Demo Screen   |
|-----------------------|
| Explicit type: 42     |
| Inferred type: Hello  |
|                       |
|-----------------------|

The screen shows two lines of text centered vertically and horizontally.

No user interaction is needed; this is a static display.

Stretch Goal

Add a FloatingActionButton that changes the inferred string to 'Hi Flutter!' when pressed.

💡 Hint

Use a StatefulWidget and setState to update the variable and refresh the UI.

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