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