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
Related
I had a problem when I slide my slide_to_act widget it works correctly and it push me to another page. but when I use nav.pop ( when I turn back to old page ) my slide_to_act button looks done. I want to reset it.
SlideAction(
height: 70,
sliderRotate: false,
alignment: Alignment.centerRight,
onSubmit: () {
slideAnimated_push(
context,
ConfirmPage(
total: summedPrice.toInt(), slevee: slevee));
},
innerColor: Colors.white,
outerColor: StGreen,
elevation: 1,
text: 'Slide to Confirm',
textStyle: const TextStyle(
fontFamily: 'RaleWay',
fontSize: 20,
color: Colors.white,
),
),[enter image description here][1]
May be you can reset it after going to the other page.
I'm using the fl_chart package to create an interactive Pie Chart for my application. Although the design came out fine, I'm facing the following issues with the functionality:
Tapping on a particular PieChartSectionData doesn't always select it and even tapping repeatedly doesn't help. It's always two out of the three that are tappable. Please note that the functionality works as it should for all the sections but there is no indication suggesting that the section tapped on was clicked. As defined in my code, every tap on a section should increase the radius and it's font size to make it stand out from the rest.
Every time a PieChartSectionData is clicked, it is supposed to navigate to a new page after a delay of 500 milliseconds. Although this works as expected, I cannot seem to come back to the previous page that has the Pie Chart on it using the phone's back button on the very first click. It is only after repeated clicks that it takes me back to the original page.
The chart seems to be clickable even beyond the PieChartSectionData. So like let's say if I tap an inch away from one of the sections, it tends to take me to that other page I need to navigate to. This shouldn't be the case.
Here is my code:
class ToDoListPieState extends State<ToDoListPie> {
int? index;
double? percent;
int? taskCount;
#override
Widget build(BuildContext context) {
final provider = Provider.of<TodaysTaskList>(context).getToDoList;
// TODO: implement build
return Stack(
children: [
PieChart(PieChartData(
borderData: FlBorderData(show: false),
pieTouchData: PieTouchData(
touchCallback: (FlTouchEvent event, pieTouchResponse) {
setState(() {
if (pieTouchResponse == null ||
pieTouchResponse.touchedSection == null) {
index = -1;
}
index = pieTouchResponse!.touchedSection!.touchedSectionIndex;
});
Future.delayed(const Duration(milliseconds: 500), () {
Navigator.of(context).push(MaterialPageRoute(builder: (context) => TaskList())); //This here is the event where clicking on a section should take us to the next page
});
print('Index: $index'); //This prints even if we click away from a section
},
),
sectionsSpace: 5,
centerSpaceRadius: 80,
sections: [
PieChartSectionData(
color: Colors.blue,
title: provider['upcoming'].length.toString(),
value: double.parse(provider['upcoming'].length.toString()),
radius: index == 0 ? 40 : 30,
titleStyle: TextStyle(fontSize: index == 0 ? 25 : 16)),
PieChartSectionData(
color: Colors.amber,
title: provider['today'].length.toString(),
value: double.parse(provider['today'].length.toString()),
radius: index == -1 ? 40 : 30,
titleStyle: TextStyle(fontSize: index == -1 ? 25 : 16)),
PieChartSectionData(
color: Colors.red,
title: provider['previous'].length.toString(),
value: double.parse(provider['previous'].length.toString()),
radius: index == 1 ? 40 : 30,
titleStyle: TextStyle(fontSize: index == 1 ? 25 : 16))
])),
Positioned(
left: 0,
top: SizeVariables.getHeight(context) * 0.18,
right: 0,
bottom: 0,
child: Column(
children: [
FittedBox(
fit: BoxFit.contain,
child: Text(
'${provider['upcoming'].length + provider['today'].length + provider['previous'].length}',
style: Theme.of(context)
.textTheme
.bodyText1!
.copyWith(fontSize: 25),
),
),
Text(
'Tasks',
style: Theme.of(context)
.textTheme
.bodyText1!
.copyWith(fontSize: 18),
)
],
),
)
],
);
}
}
Any help will be appreciated!
I am making a flutter app and I have the next issue. The user needs to add the hour of the time they are open/closed . But when I want to scroll much more I am not able because of the scroll view don't stay intact much more .I will post o video to underwent better - https://imgur.com/a/KyQYRx0
Text(
'End Time: ',
style: TextStyle(
fontWeight: FontWeight.w600, fontSize: 16.0),
),
DirectSelect(
itemExtent: 50.0,
selectedIndex: selectedIndex1,
backgroundColor: Colors.white30,
child: MySelectionItem(
isForList: false,
title: elements3[selectedIndex3],
),
onSelectedItemChanged: (index) {
setState(() {
selectedIndex3 = index;
});
},
items: _buildItems3()),
],
have you tried changing the background colour. Make it opaque and try it once
I am using SfCalender and want to pass one more parameter to a callBack of onTap
SfCalendar(
dataSource: _getDataSource(snapshot.data.data),
view: CalendarView.month,
showNavigationArrow: true,
monthViewSettings: MonthViewSettings(
showAgenda: true,
agendaStyle: AgendaStyle(
backgroundColor: Colors.transparent,
appointmentTextStyle: TextStyle(
color: Colors.white, fontSize: 13, fontStyle: FontStyle.italic),
dateTextStyle: TextStyle(
color: primaryColor, fontSize: 13, fontStyle: FontStyle.italic),
),
),
controller: _calendarController,
onTap: _openForm(array),
)
_openForm(CalendarTapDetails details) {
//code
}
Currently if I dont pass any argument to _openForm, CalenderDetails details have the values but I want to pass one array along with CalenderDetails details. How can I do that?
I don't know the SfCalendar library (and it is closed source), but I think you are trying to do that:
onTap: (details) => _openForm(details, array);
// ...
_openForm(CalendarTapDetails details, List myArray) {
// code
}
I have 10 field on a form and I want have a status tracker similar to the image below..
Basically , I will pass the percent and the widget should be updated
So if 4 items are completed then it will be 40% complete,,
Can you give me some hints on how to create this widget
I think this is somehow weird but may help!
you need a validator
You could make a function called checkProgress() and assign it to the onChanged of the textformfield:
void checkProgress() {
if(textformfieldcontroller.isValid) {
setstate(() {
progressbar = progressbar + 10;
});
} else if (textformfieldcontroller.isNotValid) {
setstate(() {});
}
}
It may work, but if not the concept is using if statements with setstate.
You can use the library percent_indicator
LinearPercentIndicator(animation: true,
lineHeight: 15,
animationDuration: 5000,
percent: 0.4,
backgroundColor: Colors.blue,
progressColor: Colors.orange,
center: Text(
'Text',
style: TextStyle(
color: Theme.of(context).primaryColorDark,
fontSize: 15,
fontWeight: FontWeight.w500),
),
linearStrokeCap: LinearStrokeCap.roundAll,
),
the parameter "percent" shows the progress in the indicator