flutter reduces padding SleekCircularSlider and text. It's sowing too much space between bar and text.
my code
SleekCircularSlider(
min: 0,
max: 120.0,
initialValue: 60,
appearance: CircularSliderAppearance(
startAngle: 110,
angleRange: 70,
animationEnabled: true,
infoProperties: InfoProperties(
bottomLabelText: 'kg',
bottomLabelStyle: TextStyle(
fontSize: 20,
),
mainLabelStyle: TextStyle(
fontSize: 25,
fontFamily: 'RalewaySemiBold',
),
modifier: (double value) {
final roundedValue = value.ceil().toInt().toString();
return '$roundedValue ';
},
),
customColors: CustomSliderColors(
hideShadow: true,
trackColor: Color(0xffCFE7FB),
dotColor: Color(0XFFFAFAFA),
progressBarColor: kPrimaryColor,
),
customWidths: CustomSliderWidths(
trackWidth: 4,
progressBarWidth: 12,
handlerSize: 3,
)
),
onChangeEnd: (double weight){
return weight;
},
),
Look like this
I need to reduce the gap between bar and text.
You can use the size parameter on the CircularSliderAppearance to control how much width and height is allotted to your SleekCircularSlider widget.
For example, I added,
appearance: CircularSliderAppearance(
size: 100, // Added this
startAngle: 110,
and the output is this,
Play around and check what size suits you best. :)
Related
Is there a keyboardtype that shows the emojies of the keyboard or is there any package (not the EmojiPicker) that implements such for Flutter? Unfortunately I can't include the EmojiPicker in the normal keyboard. So the package is not an option for me. The best option would be one that calls the normal emoji keyboard. Are there any commands or functions for this?
There are some alternatives to emoji_picker package; https://pub.dev/packages?q=emoji+picker+keyboard but also the package you said it's deprecated and replaced by this one https://pub.dev/packages/emoji_picker_flutter
Just use emoji_picker_flutter: ^1.3.1
EmojiPicker(
onEmojiSelected: (category, emoji) {
// Do something when emoji is tapped (optional)
},
onBackspacePressed: () {
// Do something when the user taps the backspace button (optional)
},
textEditingController: textEditionController, // pass here the same [TextEditingController] that is connected to your input field, usually a [TextFormField]
config: Config(
columns: 7,
emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
verticalSpacing: 0,
horizontalSpacing: 0,
gridPadding: EdgeInsets.zero,
initCategory: Category.RECENT,
bgColor: Color(0xFFF2F2F2),
indicatorColor: Colors.blue,
iconColor: Colors.grey,
iconColorSelected: Colors.blue,
progressIndicatorColor: Colors.blue,
backspaceColor: Colors.blue,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 28,
noRecents: const Text(
'No Recents',
style: TextStyle(fontSize: 20, color: Colors.black26),
textAlign: TextAlign.center,
),
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL,
),
)
i use percent_indicator package. I wrapped CircularPercentIndicator with Gesturedetetor, i increase start parameter every touch onTap function.
Every time I tap to increase the numeric value by one, the CircularPercentIndicator color starts over. For example; My start parameter is 8 and once I touched it, my start parameter is 9, but the CircularPercentIndicator starts from 0 to 9.
int start = 0;
GestureDetector(
child: CircularPercentIndicator(
radius: 100.0,
lineWidth: 13.0,
animation: true,
percent: start.toDouble() / 100,
center: Text(
start.toString(),
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
footer: const Text(
"Sales this week",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),
),
circularStrokeCap: CircularStrokeCap.round,
progressColor: Colors.purple,
),
onTap: () {
start = start + 1;
setState(() {});
print(start.toString());
},
),
If you check the plugin source code, that is how the plugin is developed, it updates the progress, and runs the _animation.forward(), which will make the animation start from 0 - currentProgress.
I found the solution. There is a property like below.
animateFromLastPercent: true
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.
I have a SfCartesianChart which displays a line chart of a list of values from 0 to 100, i.e. percentages. However, when there is a data point, for example, 99%, the upper limit of the y-axis seems like 120% which does not mean anything.
Here is my chart code
SfCartesianChart(
margin: EdgeInsets.all(0),
borderWidth: 0,
plotAreaBorderWidth: 0,
title: ChartTitle(text: 'Mood Tracks', textStyle: TextStyle(fontWeight: FontWeight.bold)),
tooltipBehavior: _tooltipBehavior,
series: <ChartSeries>[
LineSeries<MoodRecord, dynamic>(
name: 'Moods',
color: Colors.green[400],
dataSource: records,
xValueMapper: (MoodRecord record, _) => record.date,
yValueMapper: (MoodRecord record, _) => record.mood.toInt(),
dataLabelSettings: DataLabelSettings(isVisible: false),
enableTooltip: true,
animationDuration: 2000,
markerSettings: MarkerSettings(
isVisible: true,
shape: DataMarkerType.circle,
color: kPrimaryColor
)
)
],
primaryXAxis: CategoryAxis(
labelPlacement: LabelPlacement.onTicks,
labelStyle: TextStyle(fontWeight: FontWeight.bold)
),
primaryYAxis: NumericAxis(
labelFormat: '{value}%',
labelStyle: TextStyle(fontWeight: FontWeight.bold)
),
),
Is there any way to define an upper limit on the y-axis? I do not want my chart to display something like 120% on the y-axis.
If there any better way to display percentages, it would also be appreciated.
We have looked over the question and code and can inform you that the axis range is determined by the data source values. If you don't want values above 100 to be shown, use the maximum property in the axis and manually customize the range. For more details, see the help document. You may also use the numberFormat property to reflect percentage values, as seen in the example below.
https://www.syncfusion.com/kb/11519/how-to-apply-the-currency-format-to-the-axis-labels-sfcartesianchart
For 100 percent stacked charts, refer to the support document, which converts the given data to 100 percent.
SfCartesianChart(
primaryXAxis: CategoryAxis(labelStyle: const TextStyle(
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 10,
)),
primaryYAxis: NumericAxis(
**minimum: 0, maximum: 100, interval: 25,**
labelFormat: '{value}%',
labelStyle: const TextStyle(
color: Colors.white,
fontFamily: 'Roboto',
fontSize: 10,
)),