I'm having an issue while trying to display labels in my RangeSlider.
The problem is the following:
This is my code for the slider:
RangeSlider(
min: 0,
max: 5000000,
labels: RangeLabels(
'R\$ ${rangeValue.start.round()}',
'R\$ ${rangeValue.end.round()}',
),
values: rangeValue,
inactiveColor: Colors.black54,
activeColor: Colors.black,
onChanged: (v) {
setState(() {
rangeValue = v;
});
},
),
And this is the code to show the labels (It's on a theme in MaterialApp in my main file):
sliderTheme: SliderThemeData(
showValueIndicator: ShowValueIndicator.always,
),
For those who are having this issue, this is solved in the flutter master channel and you can follow up the issue here: https://github.com/flutter/flutter/issues/67071
Related
Am trying to filter using price range but can't seem to get Algolia's built in parameters to handle such cases. I've gone through their shallow documentation but couldn't get any. I've tried to find from other languages(Android Kotlin and ruby) and still it was not possible
SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0.0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
// divisions: facets.length,
labels: RangeLabels(
'Ksh ${start.toStringAsFixed(0)}'.replaceAllMapped(reg, mathFunc),
'Ksh ${end.toStringAsFixed(0)}'.replaceAllMapped(reg, mathFunc),
),
values: RangeValues(start, end),
onChanged: (value) {
//innerState((){});
setter(() {
start = value.start;
end = value.end;
_currentRangeValues = value;
// facetPriceList.toggle(end.round().toString());
});
_productsSearcher.applyState((state) => state.copyWith());
},
),
),
I use a slider and I want to change the size of the circle of the slider,
can anyone help me, please?
Slider(
activeColor: MyColors.darkGrey,
inactiveColor: MyColors.lightGreyTxt,
value: position.inSeconds.toDouble(),
divisions: 1000,
min: 0.0,
max: value.total.inSeconds.toDouble() + 1,
onChanged: (double value) async {
var _newPosition = Duration(
seconds: value.toInt(),
);
setState(() {
position = _newPosition;
});
},
),
Wrap your Slider inside SliderTheme and use SliderThemeData like this:
SliderTheme(
data: SliderThemeData(
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 20),
),
child: Slider(),
),
If you have range slider you can use rangeThumbShape:
SliderTheme(
data: SliderThemeData(
rangeThumbShape: RoundRangeSliderThumbShape(enabledThumbRadius: 20),
),
child: RangeSlider(),
),
wrape your Slider with SliderTheme like:
SliderThemeData(
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 40)),
child: yourSlider(),
),
Declared out of Widget build scope:
Rx<RangeValues> values = RangeValues(MIN_USD_AMOUNT, MAX_USD_AMOUNT).obs;
Rx<RangeLabels> labels = RangeLabels(MIN_USD_AMOUNT.toString(), MAX_USD_AMOUNT.toString()).obs;
this is in the Container in Scaffold:
Obx(() => RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
max: MAX_USD_AMOUNT,
min: MIN_USD_AMOUNT,
values: values.value,
labels: labels.value,
onChanged: (value) {
print("START: ${value.start}, End: ${value.end}");
this.values = values;
this.labels = RangeLabels(
"${value.start.toInt().toString()} USD",
"${value.end.toInt().toString()} USD")
.obs;
})),
My problem: when I change the value of slider I can see that is work in console but the view does not update. The slider is not updating at all.
Its probably easier just to update a couple RxStrings inside a regular RangeLabels.
RxString startLabel = MIN_USD_AMOUNT.toString().obs;
RxString endLabel = MAX_USD_AMOUNT.toString().obs;
In the onChanged of the slider just update the strings.
controller.startLabel.value = value.start.toString();
controller.endLabel.value = value.end.toString();
The whole Obx would look like this, assuming you've defined a controller of your GetX class.
Obx(
() => RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.red[300],
min: MIN_USD_AMOUNT,
max: MAX_USD_AMOUNT,
values: controller.values.value,
labels: RangeLabels(
controller.startLabel.value, controller.endLabel.value),
onChanged: (value) {
controller.startLabel.value = value.start.toString();
controller.endLabel.value = value.end.toString();
controller.values.value = value;
},
),
),
That will update the values in the UI.
This is my range slider widget implementation, I want to prevent the user from being able to slide the left thumb slider
RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.grey,
min: 1.0,
max: 10.0,
values: values,
labels: labels,
onChanged: (value) {
state(
() {
values = value;
labels = RangeLabels(
"${value.start.toInt().toString()}km",
"${value.end.toInt().toString()}km",
);
},
);
},
),
Add if (values.start != value.start) return; inside your onChanged, this will prevent updating values which prevent updating the RangeSlider
Comment from #ikerfah which helped was to include if(values.start != value.start) return; inside onChanged callback
RangeSlider(
divisions: 5,
activeColor: Colors.red[700],
inactiveColor: Colors.grey,
min: 1.0,
max: 10.0,
values: values,
labels: labels,
onChanged: (value) {
state(
() {
if (values.start != value.start) return;
values = value;
labels = RangeLabels(
"${value.start.toInt().toString()}km",
"${value.end.toInt().toString()}km",
);
},
);
},
),
I have my checkbox widget all set up and would like to change the tick color to green when selected (currently it is white). So I managed to change the color of the checkbox when it is un-selected to white by adding a theme. I want to change the selected tick color to green, however I cant seem to find the right option under theme to do so.
Code:
Widget buildResultTile(data) {
return Theme(
data: ThemeData(unselectedWidgetColor: white),
child:
CheckboxListTile(
activeColor: transparent,
title: AutoSizeText(
data,
maxLines: 1,
style: TextStyle(
color: white,
),
),
value: _serachSelectList.contains(data),
onChanged: (bool value) {
setState(() {
if (value) {
_serachSelectList.add(data);
} else {
_serachSelectList.remove(data);
}
});
},
secondary: const Icon(Icons.account_box, color: white),
)
);
}
Un-selected:
Selected (I want only the tick to be Colors.green):
To change the fill color of the checkbox in a CheckboxListTile, you can simply set the toggleableActiveColor property in your ThemeData:
ThemeData(
// ... other theme values ...
toggleableActiveColor: Colors.green
)
Changing the color of the tick mark is unfortunately impossible with CheckboxListTile since it doesn't expose the checkColor property of its Checkbox widget, so you are stuck with rolling your own list tile.
You can use the checkColor property of the CheckboxListTile-Widget to set the color of the checkmark:
CheckboxListTile(
checkColor: Colors.black54, //sets checkmark color
// ... other properties ...
)
(see https://github.com/flutter/flutter/pull/37636)
To change the fill color of the checkbox see the answer of Magnus https://stackoverflow.com/a/56941539/702478
You need to ditch the CheckboxListTile and instead use a Row with an icon, text, and a simple Checkbox widget.
Checkbox provides checkColor property - which is responsible for the check/tick color and is white by default. Set the color you desire for that property and it should work.
e.g.
Row(crossAxisAlignment: CrossAxisAlignment.center, children: [
Icon(Icons.account_box, color: Colors.white),
Expanded(
child: AutoSizeText(
data,
maxLines: 1,
style: TextStyle(
color: white,
),
)
),
Checkbox(
value: _serachSelectList.contains(data),
onChanged: (bool value) {
setState(() {
if (value) {
_serachSelectList.add(data);
setState((){ default_color = selected_color });
} else {
_serachSelectList.remove(data);
setState((){ default_color = unselected_color });
}
});
},
checkColor: Colors.green,
activeColor: Colors.transparent,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
]);
I did not test this code - you might encounter size & alignment issues that you would need to solve yourself. Nevertheless, the general idea is valid.
Let me know if this helped.
please try this pesudo code,
Color selected_color = Colors.green;
Color unselected_color = Colors.transparent;
Color default_color = unselected_color ;
Widget buildResultTile(data) {
return Theme(
data: ThemeData(unselectedWidgetColor: white),
child:
CheckboxListTile(
activeColor: default_color,
title: AutoSizeText(
data,
maxLines: 1,
style: TextStyle(
color: white,
),
),
value: _serachSelectList.contains(data),
onChanged: (bool value) {
setState(() {
if (value) {
_serachSelectList.add(data);
setState((){ default_color = selected_color });
} else {
_serachSelectList.remove(data);
setState((){ default_color = unselected_color });
}
});
},
secondary: const Icon(Icons.account_box, color: white),
)
);
}
i hope to help you
it's working code for checkbox color change for flutter
checkColor: Colors.white,
activeColor: Colors.red,
CheckboxListTile(
checkColor: Colors.white,
activeColor: Colors.red,
value: checkedValue,
onChanged: (newValue) {
setState(() {
checkedValue = newValue!;
});
},
controlAffinity:
ListTileControlAffinity.leading, // <-- leading Checkbox
),