Dart programming language overview in Flutter - Mini App: Build & Ship

Build: Dart Overview

This screen shows a simple introduction to the Dart programming language with key features listed.

Target UI

-------------------------
| Dart Programming       |
| --------------------- |
| - Easy to learn       |
| - Optimized for UI    |
| - Supports async code |
| - Strong typing       |
|                       |
| [Close]               |
-------------------------

Display a title 'Dart Programming'

Show a vertical list of 4 bullet points describing Dart features

Add a Close button at the bottom that closes the screen

Starter Code

Flutter

import 'package:flutter/material.dart';

class DartOverviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dart Programming'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add bullet points here
            Spacer(),
            ElevatedButton(
              onPressed: () {
                // TODO: Close screen
              },
              child: Text('Close'),
            ),
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class DartOverviewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dart Programming'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('• Easy to learn', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Optimized for UI', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Supports async code', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('• Strong typing', style: TextStyle(fontSize: 18)),
            Spacer(),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: Text('Close'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a Scaffold with an AppBar titled 'Dart Programming'. The body has padding and a vertical column aligned to the start. Four bullet points are shown as Text widgets with a bullet character '•' and spacing between them. A Spacer pushes the Close button to the bottom. The Close button uses Navigator.pop() to close the screen when tapped.

This simple layout introduces Dart's key features in a clean, readable way.

Final Result

Completed Screen

-------------------------
| Dart Programming       |
| --------------------- |
| • Easy to learn       |
| • Optimized for UI    |
| • Supports async code |
| • Strong typing       |
|                       |
|         [Close]       |
-------------------------

Tapping the Close button closes the Dart Overview screen and returns to the previous screen.

Stretch Goal

Add a dark mode toggle switch that changes the screen background and text colors.

💡 Hint

Use a StatefulWidget and Theme.of(context).brightness to toggle colors. Wrap text and background colors with conditional checks.

Practice

1. What is Dart primarily used for in Flutter development?

easy

A. Writing the app's code and logic

B. Designing the app's images

C. Creating database schemas

D. Managing app deployment

Solution

1. Step 1: Understand Dart's role

   Dart is the programming language used to write Flutter apps.

2. Step 2: Identify what Dart does in Flutter

   Dart handles the app's code and logic, not images or deployment.

3. Final Answer:

   Writing the app's code and logic -> Option A

4. Quick Check:

   Dart = app code language [OK]

Hint: Dart is the language, not design or deployment [OK]

Common Mistakes:

• Confusing Dart with design tools
• Thinking Dart manages deployment
• Mixing Dart with database design

2. Which of the following is the correct way to declare a variable in Dart?

easy

A. string name = 'Flutter';

B. let name = 'Flutter';

C. var name = 'Flutter';

D. dim name = 'Flutter';

Solution

1. Step 1: Recall Dart variable syntax

   Dart uses 'var' to declare variables with inferred types.

2. Step 2: Check each option

   'let' is JavaScript, 'string' lowercase is invalid, 'dim' is VB syntax.

3. Final Answer:

   var name = 'Flutter'; -> Option C

4. Quick Check:

   Use 'var' for variables in Dart [OK]

Hint: Dart uses 'var' for variables, not 'let' or 'dim' [OK]

Common Mistakes:

• Using JavaScript 'let'
• Using lowercase 'string'
• Using VB 'dim'

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

void main() {
  var list = [1, 2, 3];
  print(list.map((x) => x * 2).toList());
}

medium

A. [1, 2, 3]

B. Error: map is not a function

C. [3, 6, 9]

D. [2, 4, 6]

Solution

1. Step 1: Understand the map function

   map applies the function (x * 2) to each element in the list.

2. Step 2: Calculate the mapped list

   1*2=2, 2*2=4, 3*2=6, so the new list is [2, 4, 6].

3. Final Answer:

   [2, 4, 6] -> Option D

4. Quick Check:

   map doubles each element = [2,4,6] [OK]

Hint: map applies function to each list item [OK]

Common Mistakes:

• Confusing map with filter
• Expecting original list
• Thinking map causes error

4. Identify the error in this Dart code snippet:

void main() {
  int number = '5';
  print(number);
}

medium

A. Missing semicolon after print statement

B. Cannot assign a String to an int variable

C. Variable 'number' is not declared

D. print() function is undefined

Solution

1. Step 1: Check variable assignment types

   Variable 'number' is declared as int but assigned a String '5'.

2. Step 2: Understand Dart type safety

   Dart does not allow assigning a String to an int variable without conversion.

3. Final Answer:

   Cannot assign a String to an int variable -> Option B

4. Quick Check:

   Type mismatch error = Cannot assign a String to an int variable [OK]

Hint: Check variable types match assigned values [OK]

Common Mistakes:

• Ignoring type mismatch
• Thinking semicolon missing
• Assuming print undefined

5. How can you create a Dart function that returns the sum of two numbers only if both are positive, otherwise returns zero?

hard

A. int sum(int a, int b) => (a > 0 && b > 0) ? a + b : 0;

B. int sum(int a, int b) { if (a > 0 || b > 0) return a + b; else return 0; }

C. int sum(int a, int b) => a + b;

D. int sum(int a, int b) { return a > 0 && b > 0 ? a - b : 0; }

Solution

1. Step 1: Understand the condition

   Sum only if both a and b are positive (greater than 0).

2. Step 2: Check each option's logic

   int sum(int a, int b) => (a > 0 && b > 0) ? a + b : 0; uses correct '&&' and returns sum or 0. Others use '||' (wrong condition), always sum, or subtract instead of add.

3. Final Answer:

   int sum(int a, int b) => (a > 0 && b > 0) ? a + b : 0; -> Option A

4. Quick Check:

   Use '&&' for both positive check [OK]

Hint: Use '&&' to check both positive before summing [OK]

Common Mistakes:

• Using '||' instead of '&&'
• Always summing without condition
• Subtracting instead of adding