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.