Data types (int, double, String, bool) in Flutter - Mini App: Build & Ship

Build: Data Types Demo

This screen shows examples of different basic data types in Flutter: int, double, String, and bool. It displays their values and a simple message using these types.

Target UI

-------------------------
|   Data Types Demo      |
|-----------------------|
| Integer value: 42     |
| Double value: 3.14    |
| String value: Hello!  |
| Boolean value: true   |
|                       |
| [Show Message]        |
-------------------------

Display four Text widgets showing values of int, double, String, and bool variables.

Add a button labeled 'Show Message' at the bottom.

When the button is pressed, show a SnackBar with a message combining all values.

Starter Code

Flutter

import 'package:flutter/material.dart';

class DataTypesDemo extends StatefulWidget {
  @override
  State<DataTypesDemo> createState() => _DataTypesDemoState();
}

class _DataTypesDemoState extends State<DataTypesDemo> {
  // TODO: Declare variables for int, double, String, bool

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Data Types Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add Text widgets to show variable values
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  // TODO: Show SnackBar with combined message
                },
                child: Text('Show Message'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class DataTypesDemo extends StatefulWidget {
  @override
  State<DataTypesDemo> createState() => _DataTypesDemoState();
}

class _DataTypesDemoState extends State<DataTypesDemo> {
  int myInt = 42;
  double myDouble = 3.14;
  String myString = 'Hello!';
  bool myBool = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Data Types Demo')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Integer value: $myInt', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('Double value: $myDouble', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('String value: $myString', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('Boolean value: $myBool', style: TextStyle(fontSize: 18)),
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  final message = 'Int: $myInt, Double: $myDouble, String: "$myString", Bool: $myBool';
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text(message)),
                  );
                },
                child: Text('Show Message'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

We declared four variables of types int, double, String, and bool with example values. Then we displayed each value in a Text widget with a label. The button at the bottom shows a SnackBar combining all values into one message. This helps beginners see how these basic data types look and work in Flutter.

Final Result

Completed Screen

-------------------------
|   Data Types Demo      |
|-----------------------|
| Integer value: 42     |
| Double value: 3.14    |
| String value: Hello!  |
| Boolean value: true   |
|                       |
| [Show Message]        |
-------------------------

Tapping 'Show Message' button displays a SnackBar at the bottom with text: 'Int: 42, Double: 3.14, String: "Hello!", Bool: true'.

Stretch Goal

Add a toggle switch to change the boolean value and update the displayed text accordingly.

💡 Hint

Use a Switch widget and setState to update the bool variable and refresh the UI.

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