Slider widget in Flutter - Mini App: Build & Ship

Build: Simple Slider Screen

A screen with a slider that lets the user pick a value from 0 to 100. The selected value is shown above the slider.

Target UI

-------------------------
|       Slider Value     |
|          50           |
|                       |
|  [----------O-------]  |
|                       |
-------------------------

Add a Slider widget with range from 0 to 100

Show the current slider value as a number above the slider

Update the displayed value as the slider moves

Starter Code

Flutter

import 'package:flutter/material.dart';

class SimpleSliderScreen extends StatefulWidget {
  @override
  State<SimpleSliderScreen> createState() => _SimpleSliderScreenState();
}

class _SimpleSliderScreenState extends State<SimpleSliderScreen> {
  double _sliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Slider Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            // TODO: Show slider value here
            // TODO: Add Slider widget here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleSliderScreen extends StatefulWidget {
  @override
  State<SimpleSliderScreen> createState() => _SimpleSliderScreenState();
}

class _SimpleSliderScreenState extends State<SimpleSliderScreen> {
  double _sliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Slider Screen')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Slider Value: ${_sliderValue.round()}', style: TextStyle(fontSize: 24)),
            Slider(
              min: 0,
              max: 100,
              value: _sliderValue,
              onChanged: (newValue) {
                setState(() {
                  _sliderValue = newValue;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a StatefulWidget to keep track of the slider's current value in _sliderValue. The Text widget above the slider shows the value rounded to the nearest whole number. The Slider widget has a range from 0 to 100 and updates _sliderValue inside its onChanged callback. Calling setState tells Flutter to redraw the UI with the new value, so the number updates as the slider moves.

Final Result

Completed Screen

-------------------------
|       Slider Value     |
|          75           |
|                       |
|  [-------------O-----] |
|                       |
-------------------------

User drags the slider thumb left or right

The number above updates in real time to show the current slider value

Stretch Goal

Add labels at the start and end of the slider showing '0' and '100'

💡 Hint

Use the Slider's 'label' property or add Text widgets in a Row below the slider

Practice

1. What is the main purpose of the Slider widget in Flutter?

easy

A. To display a list of items vertically

B. To let users select a value by sliding a thumb along a line

C. To create a button that changes color when pressed

D. To show an image with zoom controls

Solution

1. Step 1: Understand the Slider widget function

   The Slider widget allows users to pick a numeric value by moving a thumb along a horizontal line.

2. Step 2: Compare with other widget purposes

   Other options describe different widgets: lists, buttons, images, which are unrelated to Slider.

3. Final Answer:

   To let users select a value by sliding a thumb along a line -> Option B

4. Quick Check:

   Slider = select value by sliding [OK]

Hint: Slider is for picking values by sliding [OK]

Common Mistakes:

• Confusing Slider with ListView or Button widgets
• Thinking Slider is for displaying images
• Assuming Slider is a static display widget

2. Which of the following is the correct way to create a basic Slider with a value of 0.5, minimum 0, maximum 1, and a simple onChanged callback?

easy

A. Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v))

B. Slider(value: 0.5, minimum: 0, maximum: 1, onChange: (v) => print(v))

C. Slider(val: 0.5, min: 0, max: 1, onChanged: (v) => print(v))

D. Slider(value: 0.5, min: 0, max: 1)

Solution

1. Step 1: Check property names

   The Slider widget uses value, min, max, and onChanged properties exactly as in Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)).

2. Step 2: Validate callback presence

   Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) includes a valid onChanged callback. Slider(value: 0.5, min: 0, max: 1) misses it, causing an error.

3. Final Answer:

   Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) -> Option A

4. Quick Check:

   Correct property names and onChanged callback = Slider(value: 0.5, min: 0, max: 1, onChanged: (v) => print(v)) [OK]

Hint: Use exact property names: value, min, max, onChanged [OK]

Common Mistakes:

• Using wrong property names like minimum or onChange
• Omitting onChanged callback causing errors
• Using val instead of value

3. What will be printed when the user moves the slider thumb to the middle position in this code?

double sliderValue = 0.0;
Slider(
  value: sliderValue,
  min: 0,
  max: 10,
  divisions: 10,
  label: (value) => value.round().toString(),
  onChanged: (double value) {
    print(value);
  },
)

medium

A. 5.0

B. 0.5

C. 10.0

D. 1.0

Solution

1. Step 1: Understand slider range and divisions

   The slider ranges from 0 to 10 with 10 divisions, so each step is 1 unit.

2. Step 2: Calculate middle position value

   The middle position is halfway, so value = (max + min) / 2 = (10 + 0) / 2 = 5.0.

3. Final Answer:

   5.0 -> Option A

4. Quick Check:

   Middle of 0 to 10 with 10 steps = 5.0 [OK]

Hint: Middle value = (min + max) / 2 with divisions [OK]

Common Mistakes:

• Confusing divisions with decimal steps
• Using 0.5 instead of 5.0 for middle
• Ignoring divisions and assuming continuous values

4. Identify the error in this Slider code snippet:

Slider(
  value: 5,
  min: 0,
  max: 10,
  onChanged: null,
)

medium

A. min must be greater than max

B. value must be a string, not a number

C. onChanged is null, making the slider non-interactive

D. Slider requires a label property

Solution

1. Step 1: Check onChanged property requirement

   The Slider widget requires a non-null onChanged callback to be interactive. Setting it to null disables the slider.

2. Step 2: Validate other properties

   Value is correctly a number within min and max. Label is optional.

3. Final Answer:

   onChanged is null, making the slider non-interactive -> Option C

4. Quick Check:

   onChanged null = disabled slider [OK]

Hint: Always provide a non-null onChanged callback [OK]

Common Mistakes:

• Setting onChanged to null disables slider
• Confusing value type as string
• Thinking label is mandatory

5. You want a Slider that lets users pick only whole numbers from 1 to 5 and shows the current value as a label. Which code snippet correctly implements this?

hard

A. Slider(value: 3, min: 1, max: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

B. Slider(value: 3, min: 1, max: 5, divisions: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

C. Slider(value: 3, min: 0, max: 5, divisions: 5, label: (v) => v.round().toString(), onChanged: (v) => print(v))

D. Slider(value: 3, min: 1, max: 5, divisions: 4, label: (v) => v.round().toString(), onChanged: (v) => print(v))

Solution

1. Step 1: Set min, max, and divisions for whole numbers

   To allow whole numbers from 1 to 5, min=1, max=5, and divisions=4 (steps between 1 and 5) are correct.

2. Step 2: Include label and onChanged callback

   Label shows current value, and onChanged is required for interactivity.

3. Final Answer:

   Slider(value: 3, min: 1, max: 5, divisions: 4, label: (v) => v.round().toString(), onChanged: (v) => print(v)) -> Option D

4. Quick Check:

   Divisions = max - min = 4 for whole steps [OK]

Hint: Divisions = max - min for whole number steps [OK]

Common Mistakes:

• Setting divisions equal to max instead of max-min
• Omitting divisions for discrete steps
• Setting min to 0 when range starts at 1