Your First Flutter App: Polishing the App

Apr 12 2022 Dart 2.14.1, Flutter 2.5, Visual Studio Code

Part 3: Style the App

24. Style the Slider

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 23. Style Buttons Next episode: 25. Style the Slider Thumb

This video was last updated on Apr 12 2022

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

For our next task, we’re going to style our slider. Sliders come with a lot of different configuration aspects.

data: SliderTheme.of(context).copyWith(

),
activeTrackColor: Colors.red[700],
inactiveTrackColor: Colors.red[700],
trackShape: const RoundedRectSliderTrackShape(),
trackHeight: 8.0,
thumbColor: Colors.redAccent,
overlayColor: Colors.red.withAlpha(32),
overlayShape: const RoundSliderOverlayShape(overlayRadius: 28.0),
Expanded(
    child: Padding(
    padding: const EdgeInsets.only(left: 32.0, right: 32.0),
    child: Column(
        children: <Widget>[
        Text(
            'SCORE',
Padding(
    padding: const EdgeInsets.only(top: 48.0, bottom: 32.0),
    child: Prompt(targetValue: _model.target),
),
Padding(
    padding: const EdgeInsets.only(top: 16.0),
    child: HitMeButton(
        text: "HIT ME",
        onPressed: () {
        _showAlert(context);
        },
    ),
),
Padding(
    padding: const EdgeInsets.all(20.0),
    child: Score(
        totalScore: _model.totalScore,
        round: _model.round,
        onStartOver: _startNewGame,
    ),
),