The method 'toDouble' was called on null when I call distance

Question

I am getting my data from model class and when I switch from any other Tab screen to this screen it takes second or two to get away from this error:-

    The method 'toDouble' was called on null.
    Receiver: null
    Tried calling: toDouble().

What is the reason for that and how can I get away from this? This is where I am displaying it and commented the line next to where link mentioned in console takes me to when clicked on error:-

           Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Card(
                      color: themeProvider.isDarkMode? black :white,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ListTile(
                          title: Text(
                            "Maximum distance",
                            style: TextStyle(
                                fontSize: 18,
                                color: mRed,
                                fontWeight: FontWeight.w500),
                          ),
                          trailing: Text(
                            "$distance Km.",
                            style: TextStyle(fontSize: 16),
                          ),
                          subtitle: Slider(
                              value: distance.toDouble(),/// Error takes me to this line.
                              inactiveColor: Colors.blueGrey,
                              min: 1.0,
                              max: 500,
                              activeColor: mRed,
                              onChanged: (val) {
                                changeValues
                                    .addAll({'maximum_distance': val.round()});
                                setState(() {
                                  distance = val.round();
                                });
                              }),
                        ),
                      ),
                    ),
                  ),

This is another Error in same screen:-

     The getter 'start' was called on null.
     Receiver: null
     Tried calling: start


     Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Card(
                      color: themeProvider.isDarkMode? black :white,
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: ListTile(
                          title: Text(
                            "Age range",
                            style: TextStyle(
                                fontSize: 18,
                                color: mRed,
                                fontWeight: FontWeight.w500),
                          ),
                          trailing: Text(
            "${ageRange.start.round()}- // Error take me here ${ageRange.end.round()}",
                            style: TextStyle(fontSize: 16),
                          ),
                          subtitle: RangeSlider(
                              inactiveColor: Colors.blueGrey,
                              values: ageRange,
                              min: 18.0,
                              max: 100.0,
                              divisions: 25,
                              activeColor: mRed,
                              labels: RangeLabels('${ageRange.start.round()}',
                                  '${ageRange.end.round()}'),
                              onChanged: (val) {
                                changeValues.addAll({
                                  'age_range': {
                                    'min': '${val.start.truncate()}',
                                    'max': '${val.end.truncate()}'
                                  }
                                });
                                setState(() {
                                  ageRange = val;
                                });
                              }),
                        ),
                      ),
                    ),
                  ),

Answer 1

If you distance is null, you won't be able to use it properties like distance.toDouble().

One way to avoid the error would be to conditionally assign the value like this,

value: distance != null ? distance.toDouble() : 1.0,

Now, if distance is ever null you will be assigning a default 1.0 instead.

Text(ageRange != null ? "${ageRange.start.round()} - ${ageRange.end.round()}" : "invalid",
  style: TextStyle(fontSize: 16),
),