I am trying to create a custom vertical slider with 4 in a row and I am using Syncfusion package, however, when I create a customer widget, onchanged parameter does not accept the Function variable when passed.
SfSliderTheme(
data: SfSliderThemeData(
thumbColor: Colors.blue[200],
activeTrackHeight: kactive_slider_height,
inactiveTrackHeight: kinactive_slider_height,
activeTrackColor: kactive_slider_track_color,
inactiveTrackColor: Colors.black,
trackCornerRadius: -1.0,
),
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (value) {},
),
),
This is my code and I am using multiple times, I want to create a custom widget but onChanged: does not take void Function onPressed. Is there a way?
While interacting with the slider, we will get the new value in the onChanged method. So that we can update the slider thumb with the new value. The new value is the type of dynamic, because the slider supports numeric and date time types.
double value = 50.0;
SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (dynamic newValue) {
setState(() {
value = newValue;
});
},
)
It looks like SfSlider.vertical does take in a ValueChanged function but I think you're seeing an error because there is not enough type information? Based on the documentation it looks like there is no generic associated with SfSlider so the callback you should use would use dynamic e.g (dynamic value) { ... }
child: SfSlider.vertical(
min: 0.0,
max: 100.0,
value: value,
onChanged: (dynamic value) {},
),
Related
I have a list of colors
const bgcolor = ['Colors.red','Colors.green','Colors.blue','Colors.purple'];
I want to change the color as I slide forward. I can print the color but I want to set it in a container as color:...
The value means double _value = 0;
child: Slider(
value: _value,
label: _emojis[_value.toInt()],
min: 0.0,
max: 3.0,
divisions: 3,
onChangeStart: (double value) {},
onChangeEnd: (double value) {
print('${bgcolor[_value.toInt()]}');
},
onChanged: (double value) {
setState(() {
_value = value;
});
You will need to create another variable that holds the selected color or set the color property of your container to bgcolor[_value].
Container(
color: bgcolor[_value],
child: Slider(
...
),
),
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.
It's worth noting that I am quite new to flutter so a lot of work done is based on tutorials or videos...
Apologies if the question seems obvious.
//Build Length Box.
Widget buildLength() => buildHeader(
header: 'House Length: ',
child: Row(
children: [
// I want to be able to get user input(has to be an integer value for calculations further in the program)
// from this child: Text(), At the moment I am only able to get the input from the slider...
//I want to be able to use the slider or the text next to it.
//The first child widget should preferably work with the same onChangedLength method the slider uses...
Expanded(
flex: 1,
child: Text(
length.toString(),
style: TextStyle(color: Colors.white),
),
),
Expanded(
flex: 9,
child: Slider( //TODO: Decide on the correct parameters for the slider, min/max/etc...
label: length.toString(),
value: (length ?? 0).toDouble(),
min: 0,
max: 100,
divisions: 100,
onChanged: (length) => onChangedLength(length.toInt()),
),
),
],
),
);
The onChanged Method was mentioned here as well.
onChangedLength: (length) => setState(() => this.editLength = length),
The tutorial I am busy with uses the onChanged, however if this wont work I am open to other methods I can use.
You are setting the changed value of the length into editLength.
yet you using length.toString() to display,
if your declared variable is int editLength
editLength.toString() // Text Widget
label: length.toString(), // Slider Widget
value: (editLength ?? 0).toDouble() // Slider Widget
or
if your declared variable is int length
onChanged: (newLength) => onChangedLength(newLength.toInt()), // Slider widget
onChangedLength(newLength) => setState(() => this.length = newLength); // onChangedLength function
DropdownButton value is not updating after selecting values from DropdownItems. How to update default value with _selectedLocation?
The variables i use:
String? stateToCountry;
List? stateID;
List? cityJson;
Position? _position;
String? currentAddress;
Placemark? place;
DropdownButton(
hint:_selectedLocation==null ? Text('Dropdown') : Text(
_selectedLocation.toString(),
style: TextStyle(color: Colors.black),
),
isExpanded: true,
iconSize: 30,
elevation: 16,
underline: Container(
height: 2,
color: Colors.deepPurpleAccent,
),
style: TextStyle(color: Colors.deepPurple, fontSize: 20.0),
itemHeight: 50,
items: countrylist!.map((location){
return DropdownMenuItem(
value: location,
child: new Text(location["name"].toString()),
);
}).toList(),
onChanged: (newValue){
setState(() {
_selectedLocation=newValue as String?;
});
},
),
Dropdownbutton works as follows:
T represent a generic type, so you can pass a bool, String, double, YourCustomModel etc.
The Dropdownbutton needs 3 things:
The value T
A List<T> with the options,
The onChanged Function, which pass you the T value you select.
The widget, know which value is selected according as his instance,
each object has an hashCode property which identify it from other objects,
When you select an option, you must keep that instance.
That instance should be in your list, for example
final list=<String>[
'Hello', /// hashCode 1
'good bye', /// hashCode 2
'bye bye' /// hashCode 3
];
When you select one, this is pass through the onChanged, let's say you select the first option:
onChanged:(value){
print(value.hashCode); /// output value: 1
// you must keep that instance with the same type `T`
_selectedValue=value;
}
So now, your _selectedValue will be:
print(_selectedValue.hashCode);/// /// output value: 1
print(_selectedValue); /// output value: 'Hello'
You need to set the value property,
DropdownButton(
value: _selectedLocation,
onChanged:(newValue){
setState(() {
_selectedLocation=newValue;
});
}
I have a separate class which lays out radio buttons on the homepage in a separate class.
Radio Class:
Below is from TYPE enum which contains two values regular and nonregular:
TYPE _dtype = TYPE.regular;
Container(
child: Row(
children: <Widget>[
Container(
width: 180.0,
child: RadioListTile<TYPE>(
title: Text(
'Regular' ,
style: TextStyle(
fontSize: 20.0,
),
),
value: TYPE.regular,
groupValue: _dtype,
onChanged: (TYPE value) { setState(() { _dtype = value; }); },
),
),
Container(
width: 186.0,
child:RadioListTile<TYPE>(
title: const Text('Non Regular',
style: TextStyle(
fontSize: 20.0,
),
),
value: TYPE.nonregular,
groupValue: _dtype,
onChanged: (TYPE value) { setState(() { _dtype = value; }); },
),
),
],
),
)
i have couple of questions:
Is it possible to autosize the radio w.r.t. text in it? As without supplying width property, radio doesnot appear on screen.
Once one of the radio is selected, I want to pass the value..._dtype to homepage class to do some work. How can I do that?
Replace your Container with Expanded and remove the width attribute. This will automatically set each child of the row to occupy an equal amount of space.
To explain why this is necessary, RadioListTile will expand to take as much space as is available, and Container will be as big as its child if no size is specified. Since Row has infinite width and there's no width constraint between it and your RadioListTile, it's trying to expand to take up an infinite amount of width, so it won't render. Expanded automatically calculates and applies a width here, so it'll fix the issue and work well no matter the screen size.
Pass a callback function to your new widget. Flutter generally prefers sending data down the tree than up, so sending a callback function down to your button is a bit easier than sending the data up for your parent widget to handle, and it'll wind up having the same effect.
class YourRadioGrid extends StatelessWidget {
void Function(TYPE) doSomething = (t) {};
YourRadioGrid({this.doSomething});
...
onPressed: (TYPE value) {
doSomething(value);
}
}
// Then wherever in your homepage's build method this gets added:
YourRadioGrid(doSomething: (value) { /*handle the new value*/ })