'how to restrict circular chart from rebuilding using graphics package in flutter
I'm using Graphic package for my circular chart, where chart is build by taking value from user.
Problem is the Bar keep getting rebuild.
Bar max length value 10. Suppose at first user give value
5. So, the bar should go-upto5index length only(Which is not happing , because initially "5" is the highest value. Thats why the length of the bar goes max index length.) Basically, Chart compared with the old one, and chart will rebuild when input values are changed.
Hope I'm able to understand. I also tried to edit the package but no luck!!
- If initially I give the value
10then the chart working fine. Problem arise when user initially give the vlaue >10...
class _MyHomePageState extends State<MyHomePage> {
String selectedValue = "1";
var user_input_chart_value1 = "0";
var user_input_chart_value2 = "0";
var user_input_chart_value3 = "0";
var user_input_chart_value4 = "0";
var user_input_chart_value5 = "0";
var user_input_chart_value6 = "0";
var user_input_chart_value7 = "0";
var user_input_chart_value8 = "0";
var user_input_chart_value9 = "0";
var user_input_chart_value10 = "0";
List<String> allValues = [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Wheel Try 3"),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Select new skills"),
Container(
// width: 163,
height: 40,
decoration: BoxDecoration(
//color: Colors.green,
border: Border.all(
color: Color(0xff8E8E8E),
),
borderRadius: BorderRadius.circular(6),
),
margin: EdgeInsets.only(top: 10),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: DropdownButton<String>(
underline: Container(),
icon: Icon(Icons.keyboard_arrow_down),
iconSize: 24,
isExpanded: true,
onChanged: (value) {
setState(() {
selectedValue = value!;
});
},
value: selectedValue,
items: allValues
.map((state) => DropdownMenuItem(
child: Text(
state,
maxLines: 2,
),
value: state,
))
.toList(),
),
),
),
ElevatedButton(
onPressed: () {
setState(() {
if (user_input_chart_value1 == "0") {
user_input_chart_value1 = selectedValue;
} else if (user_input_chart_value2 == "0" &&
user_input_chart_value1 != "0") {
user_input_chart_value2 = selectedValue;
} else if (user_input_chart_value3 == "0" &&
user_input_chart_value2 != "0") {
user_input_chart_value3 = selectedValue;
} else if (user_input_chart_value4 == "0" &&
user_input_chart_value3 != "0") {
user_input_chart_value4 = selectedValue;
} else if (user_input_chart_value5 == "0" &&
user_input_chart_value4 != "0") {
user_input_chart_value5 = selectedValue;
} else if (user_input_chart_value6 == "0" &&
user_input_chart_value5 != "0") {
user_input_chart_value6 = selectedValue;
} else if (user_input_chart_value7 == "0" &&
user_input_chart_value6 != "0") {
user_input_chart_value7 = selectedValue;
} else if (user_input_chart_value8 == "0" &&
user_input_chart_value7 != "0") {
user_input_chart_value8 = selectedValue;
} else if (user_input_chart_value9 == "0" &&
user_input_chart_value8 != "0") {
user_input_chart_value9 = selectedValue;
} else if (user_input_chart_value10 == "0" &&
user_input_chart_value9 != "0") {
user_input_chart_value10 = selectedValue;
}
});
},
child: Text("Continue")),
Container(
height: 500,
width: double.infinity,
child: Stack(children: [
Positioned(
top: 10,
right: 70,
child: Image.asset(
"assets/images/Wheel.png",
)),
Positioned(
top: 19,
right: 63,
child: Transform(
transform: Matrix4.rotationZ(
0.320000), //===============================Transform to rotated the graph
alignment: FractionalOffset.center,
child: Container(
margin: const EdgeInsets.only(top: 10),
width: 350,
height: 302,
child: Chart(
data: [
{
'value': int.parse(user_input_chart_value1),
'name':
'/' //################################# P R O B L E M
},
{
'value': int.parse(user_input_chart_value2),
'name': '.'
},
{
'value': int.parse(user_input_chart_value3),
'name': '..'
},
{
'value': int.parse(user_input_chart_value4),
'name': '.*'
},
{
'value': int.parse(user_input_chart_value5),
'name': 'o.'
},
{
'value': int.parse(user_input_chart_value6),
'name': ':'
},
{
'value': int.parse(user_input_chart_value7),
'name': '._'
},
{
'value': int.parse(user_input_chart_value8),
'name': '.i'
},
{
'value': int.parse(user_input_chart_value9),
'name': '^'
},
{
'value': int.parse(user_input_chart_value10),
'name': '.~'
},
// {'value': 10, 'name': 'adad'},
],
variables: {
'name': Variable(
accessor: (Map map) => map['name'] as String,
),
'value': Variable(
accessor: (Map map) => map['value'] as num,
scale: LinearScale(min: 0, marginMax: 0.1),
),
},
elements: [
IntervalElement(
label: LabelAttr(
encoder: (tuple) =>
Label(tuple['name'].toString())),
shape: ShapeAttr(
value: RectShape(
borderRadius: const BorderRadius.all(
Radius.circular(1)),
)),
color: ColorAttr(variable: 'name', values: [
Color(0xff5b8ff9).withOpacity(0.3),
Color(0xff5ad8a6).withOpacity(0.3),
Color(0xff5d7092).withOpacity(0.3),
Color(0xfff6bd16).withOpacity(0.3),
Color(0xff6f5ef9).withOpacity(0.3),
Color(0xff6dc8ec).withOpacity(0.3),
Color(0xff945fb9).withOpacity(0.3),
Color(0xffff9845).withOpacity(0.3),
Color(0xff1e9493).withOpacity(0.3),
Color(0xffff99c3).withOpacity(0.3),
//Colors.transparent
]),
elevation: ElevationAttr(value: 0),
)
],
coord: PolarCoord(startRadius: 0.15),
// axes: [
// Defaults.circularAxis,
// Defaults.radialAxis..label = null,
// ],
),
),
)),
]),
),
//===============================================================
],
),
),
],
),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|