Pie chart issues in flutter - flutter

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!

Related

Reset State of Slide_to_act widget in flutter

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.

flutter - percent indicator progressColor

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

How to make a container as a radio button in Flutter and make sure it doesn't deselect

I have used a package group_button 4.2.1 but once i select the textfields the radio buttons deselect and i have to select again, i have tried using the controller property of the Widget but i didn't get it to work.
I was thinking if i can make a container from scratch that is a radio button and can retain the value once i finish filling the form to be submitted to my firestore database.
You can use List of button text and keep tract of selectedIndex.
Run on dartPad
int? _selectedValueIndex;
List<String> buttonText = ["ForSale", "For rent"];
Widget button({required String text, required int index}) {
return InkWell(
splashColor: Colors.cyanAccent,
onTap: () {
setState(() {
_selectedValueIndex = index;
});
},
child: Container(
padding: const EdgeInsets.all(12),
color: index == _selectedValueIndex ? Colors.blue : Colors.white,
child: Text(
text,
style: TextStyle(
color: index == _selectedValueIndex ? Colors.white : Colors.black,
),
),
),
);
}
Inside build method to use this,
Row(
children: [
...List.generate(
buttonText.length,
(index) => button(
index: index,
text: buttonText[index],
),
)
],
),

How can I show the text of Text Button when I make it's onPressed function return Null ?(in dark mode)

I have been trying to create an Onboarding view with the next and previous Text Button() where when the user is in the first index of the Onboarding the previous button should be unclickable.
I already did it by making onPressed: function return Null when the onboarding current index = 0 but the problem is the previous's text doesn't appear when I use dark mode. I hope someone can help me.
Previou's TextButton code:
TextButton(
onPressed: cubit.currentIndex != 0
? () {
cubit.decrement();
boardController.previousPage(
duration:
const Duration(milliseconds: 300),
curve: Curves.fastLinearToSlowEaseIn,
);
}
: null,
child: const Text(
'Previous',
style: TextStyle(
fontSize: 18,
)),
Here in the light mode everything is okay I wanna show this in dark mode
use Brigthness for color
style: TextStyle(
fontSize: 18,
color: Theme.of(context).brightness == Brightness.dark
? Colors.green
: null,
)),
if you don't want to use Previous text on first onboarding screen then use following structure :
child: FlatButton(
child: Text(
currentIndex == slides.length - 1 ? "": "Previous"),)
Or if you don't want to use Previous Button on first onboarding screen then use following structure :
child:
currentIndex == slides.length - 1 ? null :
FlatButton(
child: Text(
"Previous"),)

want to get an animated container small again to initial size with a click. It expands perfectly but I can't close it again

want to get an animated container small again to initial size with a click. It expands perfectly but I can't close it again.............................................................................................................................
child: AnimatedContainer(
duration: Duration(milliseconds: 200),
width: isTextOpen ? 200 : 95,
height: 50,
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(3)),
border: isTextOpen
? Border.all(
color: Colors.deepOrangeAccent,
width: 1.0,
)
: null,
),
child: isTextOpen
? TextField()
: GestureDetector(
onTap: () {
setState(() {
isTextOpen = true;
kapaac = 1;
});
},
child: Text(
"User_007",
style: TextStyle(
color: Colors.deepOrangeAccent,
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
),
),
),
You are not setting it back to false.
setState(() => isTextOpen = !isTextOpen);
Once the user clicks the textbox if you want to get the textBox size to the initial size then you need to define a double variable with the expanded size then once the user clicks the text box for entering the text you need to reset the variable
double animatedContainerSize = 200;
After that set your AnimatedContainer widget width with the variable
width: isTextOpen ? animatedContainerSize : 95,
Then in your text box onTap function change the size to initial size with setState
isTextOpen
? TextField(
onTap: () {
setState(() {
animatedContainerSize = 95;
});
},
)