I need SfRangeSlider to display the tooltip below the slider instead of the top. As per here discussion here able to display the tooltip below the slider. It is displayed only when we change the slider. I need to display the tooltip below the slider all the time.
Widget _buildThumbIcon(TextEditingController controller) {
return Transform.translate(
// Here 20 is thumb diameter and 5 is spacing between thumb and text.
offset: const Offset(0, 25),
child: OverflowBox(
maxWidth: 150,
child: TextField(
textAlign: TextAlign.center,
decoration:
const InputDecoration(border: InputBorder.none, isDense: true),
controller: controller,
),
),
);
}
SfRangeSlider(
activeColor: primary,
inactiveColor: grey_e1,
min: 1.0,
max: 12.0,
showTicks: true,
showLabels: false,
stepSize: 1,
// interval: 1,
//minorTicksPerInterval: 1,
startThumbIcon: _buildThumbIcon(_rangeStartController),
endThumbIcon: _buildThumbIcon(_rangeEndController),
values: _values,
onChangeStart: (SfRangeValues newValues) {
_rangeStartController.text = _getFormattedText(newValues.start);
_rangeEndController.text = _getFormattedText(newValues.end);
},
onChanged: (SfRangeValues newValues) {
setState(() {
_rangeStartController.text = _getFormattedText(newValues.start);
_rangeEndController.text = _getFormattedText(newValues.end);
_values = newValues;
});
},
onChangeEnd: (SfRangeValues newValues) {
_rangeStartController.text = "";
_rangeEndController.text = "";
},
)
Related
How to make default flutter ratingbar non clickable ?
I have to disable rating option once user give feedback. How do I do it.
RatingBar(
itemSize: 35,
initialRating: 0,
glowColor: Colors.transparent,
direction: Axis.horizontal,
allowHalfRating: false,
tapOnlyMode: false,
itemCount: 5,
itemPadding: const EdgeInsets.symmetric(horizontal: 0.0),
ratingWidget: RatingWidget(
full: Image.asset(img_star_rating_fill, width: 25.w, height: 25.h),
// full: const Icon(Icons.star, color:yellow_FFC800),
half: Image.asset(img_star_rating_fill, width: 25.w, height: 25.h),
// half: const Icon(Icons.star_half, color:yellow_FFC800,),
empty:
Image.asset(img_star_rating_empty, width: 25.w, height: 25.h),
),
// empty: const Icon(Icons.star_outline, color:gray_868590,)),
onRatingUpdate: (value) {
setState(() {
_ratingValue = value;
printData(
'Rating to consultation booking ID', _ratingValue.toString());
controller
.callRateConsultationAPI(
widget.i,
controller.pastBookingList[widget.i].id.toString(),
value.toString())
.then((value) {
setState(() {
// ratingBar.setFocusable(false);
});
});
});
})
You can set ignoreGestures to true, like this:
RatingBar(
ignoreGestures: true, // <---- add this
itemSize: 35,
initialRating:0,
glowColor: Colors.transparent,
direction: Axis.horizontal,
allowHalfRating: false,
...
)
IgnorePointer(child:RatingWidget)
I'm using the Sleek_circular_Slider and was wondering if there is a way of changing the value/position of the slider from an external button press? I cant seem to see the value that it would be setting to change it.
Code:
Widget controlIndicator() {
return SleekCircularSlider(
min: 0,
max: 100,
initialValue: 4,
innerWidget: (value) {
return sliderCenterWidget();
},
appearance: CircularSliderAppearance(
spinnerMode: false,
animationEnabled: true,
size: 250,
customColors: CustomSliderColors(
dotColor: dark_grey,
shadowColor: dark_grey,
shadowMaxOpacity: 0.2,
shadowStep: 5,
progressBarColor: red,
trackColor: grey),
customWidths: CustomSliderWidths(
trackWidth: 7, progressBarWidth: 12, handlerSize: 8)),
onChange: (value) {
slider_value = value.round();
print(value);
});
}
did you try to set the initialValue as a variable? then change this var value on button press
I'm implementing line chart in flutter i have draw the line chart but i need to show horizontal lines in different colors. Is there any way to get that?
Here is the attached image what i want to achieve.
LineChartData(
minX: 0,
maxX: 11,
minY: 0,
maxY: 6,
titlesData: LineTitles.getTitleData(),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: Colors.grey,
strokeWidth: 1,
);
},
drawVerticalLine: true,
getDrawingVerticalLine: (value) {
return FlLine(
color: Colors.grey,
strokeWidth: 1,
);
},
),
borderData: FlBorderData(
show: true,
border: Border.all(color: Colors.grey, width: 1),
),
lineBarsData: [
LineChartBarData(
spots: [
FlSpot(4.9, 5),
FlSpot(6.8, 2.5),
FlSpot(8, 4),
FlSpot(9.5, 3),
FlSpot(11, 4),
],
isCurved: true,
barWidth: 3,
),
],
),[![I need to show the orange and red horizontal lines][1]][1]
Yes you can check gridline colors in fl_chart. You've already used function with which you can modify these colors which is getDrawingHorizontalLine().
getDrawingHorizontalLine: (value) {
if(value == 1) {
return FlLine(
color: Colors.red,
strokeWidth: 2,
);
} else if (value == 2 ) {
return FlLine(
color: Colors.yellow,
strokeWidth: 2,
);
} else {
return FlLine(
color: Colors.grey,
strokeWidth: 2,
);
}
}
Now here as you can see I've added condition that if values are 1 or 2 then gridline colors should be red & yellow respectively. Now this is the ugly way to put condition to change color but you can do it dynamically yourself.
If you want to change vertical gridlines then you should use getDrawingVerticalLine() to change color values.
You can see my screenshot for output below.
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",
);
},
);
},
),
There is no cursor while entering OTP, How can add Cursor in pinFieldAutoFill. I am using the sms_autofill: ^1.2.5 package.
PinFieldAutoFill(
autofocus: true,
keyboardType: TextInputType.number,
decoration: UnderlineDecoration(
textStyle: TextStyle(
fontSize: 44.sp,
fontWeight: FontWeight.bold,
color: kDarkBlue),
colorBuilder: FixedColorBuilder(
Colors.grey),
),
currentCode: authService
.loginMobileOTP, // prefill with a code
onCodeSubmitted: (_) async {
authService.login(
context, _scaffoldKey);
},
onCodeChanged: (value) {
authService.loginMobileOTP =
value;
},
codeLength:
6 //code length, default 6
),
Please enable cursor option in "sms_autofill" package, class constructer "PinInputTextField".
Sharing reference code
return PinInputTextField(
pinLength: widget.codeLength,
decoration: widget.decoration,
cursor: Cursor(
width: 2,
height: 40,
color: Colors.red,
radius: Radius.circular(1),
enabled: true,
),