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(),
),
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());
},
),
),
So I have this showModalBottomSheet() and in it I have a couple widgets that require state, so I wrapped with StatefulBuilder(). Even though the other widgets are updating their data and UI as expected but the RangeSlider() does not update the UI(slide), it only updates the data.
I've tried wrapping the RangeSlider() with StatefulBuilder() but still it does not work(slide). I've also tried other solutions like this
How can I solve this issue.
Here is my code snippet
showModalBottomSheet(
context: context,
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(
top: Radius.circular(12.0),)),
builder:(_){
return StatefulBuilder(builder: (BuildContext context, StateSetter setter){
return SafeArea(
child: Column(
children:[
...
Wrap(
children: List.generate(1, (index) {
final selectable = facets[index];
final facet = selectable.item;
RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));
return SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
labels: RangeLabels(
_currentRangeValues.start.round().toString().replaceAllMapped(reg, mathFunc),
_currentRangeValues.end.round().toString().replaceAllMapped(reg, mathFunc),
),
values: _currentRangeValues,
onChanged: (value) {
setState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
},
),
);
}),
) ...
]
)
);
}
}
)
And here is the screenshots
Because you are calling setState and this will update the main class, if you want to update inside StatefulBuilder you need to call StatefulBuilder's setState, first change your StatefulBuilder to this:
StatefulBuilder(builder: (context, innerSetState) {
...
}
then instead of setState call innerSetState in RangeSlider's onChanged:
innerSetState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
also your main issue is you are define _currentRangeValues inside build method. Every time you update _currentRangeValues its getting reset and define again. because you only want the first item in facets you don't need list. generate remove it, and put the variable before return StatefulBuilder like this:
final selectable = facets[0];
final facet = selectable.item;
RangeValues _currentRangeValues = RangeValues(0, double.parse(facets.last.item.value));
return StatefulBuilder(builder: (context, innerSetState) {
return ....
}
then change your wrap widget to this:
Wrap(
children: [
SliderTheme(
data: SliderTheme.of(context).copyWith(
showValueIndicator: ShowValueIndicator.always,
thumbShape:
const RoundSliderThumbShape(enabledThumbRadius: 15),
),
child: RangeSlider(
min: 0,
max: double.parse(facets.last.item.value),
activeColor: AppColors.secondaryThemeColor,
inactiveColor: AppColors.fontHeaderColor,
labels: RangeLabels(
_currentRangeValues.start
.round()
.toString()
.replaceAllMapped(reg, mathFunc),
_currentRangeValues.end
.round()
.toString()
.replaceAllMapped(reg, mathFunc),
),
values: _currentRangeValues,
onChanged: (value) {
innerSetState(() {
sVal = value.start.round();
sFal = value.end.round();
_currentRangeValues = value;
facetPriceList.toggle(facet.value);
});
},
),
),
],
)
I wanted to make a progressbar in a music player like YoutubeMusic.
I customized Slider and made an okay result on Android, but on iOS simulator it doesn't show any customized design.
expected design:
what it actually looks like on iOS simulator:
and the code looks like this:
SizedBox(
width: Get.width,
height: 1,
child: SliderTheme(
data: SliderThemeData(
overlayShape: SliderComponentShape.noOverlay,
trackShape: const RectangularSliderTrackShape(),
trackHeight: 1,
thumbShape: SliderComponentShape.noThumb,
thumbColor: Colors.white,
activeTrackColor: const Color(0xffE1FD2E),
inactiveTrackColor: Colors.grey[600],
overlayColor: Colors.transparent
),
child: Slider.adaptive(
value: realtimePlayingInfos.currentPosition.inSeconds.toDouble(),
max: realtimePlayingInfos.duration.inSeconds.toDouble() + 3,
min: -3,
onChanged: (value) {}
)
)
)
is it impossible to customize SliderTheme on iOS or am I doing it in a wrong way?
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
Current code :
SliderTheme(
data: SliderThemeData(
trackHeight: 50,
activeTrackColor: Colors.white,
inactiveTrackColor: Colors.white54,
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 0,
disabledThumbRadius: 0
),
thumbColor: Colors.white,
),
child: Slider(
min: 0.0,
max: (duration!=null)
? duration.inMilliseconds.toDouble()
: 0.0,
divisions: (duration != null && !(duration.inMilliseconds==0))
? duration.inMilliseconds
: 1,// division cannot be zero, and null
value: (this.mounted && position!=null )
? position.inMilliseconds.toDouble()
: 0.0,
onChanged: (index){
audioPlayer.seek(Duration(
milliseconds: index.toInt()
)).then((x){});
}
),
),
Output:
value = min
value = max
Issues
At min value there is a white layer before the track.
At max value the slider is not filling all the way to the edge.
Desired Output
No white layer at min value and fill the value till the edge.