Your First Flutter App: Polishing the App

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

First we have a container that will contain our slider and labels. We’ve used text labels to designate a minimum value and a maximum value. Then We have a track. The track contains both an active track and an inactive track. We also have a thumb which we can customize as well.

In our case, we’re going to be setting the active track and inactive track to red. Then we’ll make the track shape a rounded rectangle. We’ll add our thumb image and then set the overlay. This is the shape of the entire slider. We’ll make this a rounded rectangle shape.

We customize our slider by using a SliderTheme. We take the SliderTheme, copy it, and then make our alterations much like we did with our TextStyle. Let’s do this now.

Start by opening your project in progress or download the starter project for this episode. Open up control.dart.

Select the Slider widget and right click on it. Select the refactor option and from it, select the Wrap with Container option. Change it to a SliderTheme. Next, set the data to the following. We’re going to copy the Slider Theme now.

data: SliderTheme.of(context).copyWith(

),

Next we’ll set the active track color and inactive track color.

activeTrackColor: Colors.red[700],
inactiveTrackColor: Colors.red[700],

Then we’ll set the track shape.

trackShape: const RoundedRectSliderTrackShape(),

We’ll set the track height to 8.

trackHeight: 8.0,

Now, comes the thumb color and thumb shape. For the thumb shape we’ll use our SliderThumbImage widget.

thumbColor: Colors.redAccent,

Lastly we’ll set the overlay color and the overlay shape.

overlayColor: Colors.red.withAlpha(32),
overlayShape: const RoundSliderOverlayShape(overlayRadius: 28.0),

And that’s it. We have a newly customized slider. Build and run or hot reload the app. And look at that our slider looks good. Unfortunately, we’re getting a lot of blue in our logs. This indicates that a portion of our user interface is getting cut off since Flutter is having a difficult time calculating our layout. To fix this, return to score.dart. Select the Padding that contains the Score text widget. Right click. Select refactor and choose wrap with container. Then change the container to an Expanded.

Expanded(
    child: Padding(
    padding: const EdgeInsets.only(left: 32.0, right: 32.0),
    child: Column(
        children: <Widget>[
        Text(
            'SCORE',

Now the column will expand with certain devices. Build and run and the problem goes away. Okay, that solves the rendering issue, we just need to add a little padding.

Back in the project, open main.dart if it isn’t already open. Look for the Prompt widget. Select and right click. Choose the refactor option and choose wrap with padding. Update the insets to the following.

Padding(
    padding: const EdgeInsets.only(top: 48.0, bottom: 32.0),
    child: Prompt(targetValue: _model.target),
),

Now we’ll do the same with the HitMe button except we will set the insets to top at 16 points.

Padding(
    padding: const EdgeInsets.only(top: 16.0),
    child: HitMeButton(
        text: "HIT ME",
        onPressed: () {
        _showAlert(context);
        },
    ),
),

Also update the padding around the score widget.

Padding(
    padding: const EdgeInsets.all(20.0),
    child: Score(
        totalScore: _model.totalScore,
        round: _model.round,
        onStartOver: _startNewGame,
    ),
),

And that’s it - now return back to the app and it looks great. Now we just need to level the slider’s thumb and we’ll do that in the next episode.