I'm pretty new to MaterilUI and I recently upgraded my materialUI from V4 to V5. While building the react project, npm run build, I get a warning message that my adaptV4theme is being deprecated. To be honest, I don't know what that means. Would someone be able to help me get rid of this warning.
The code:
import { adaptV4Theme, createTheme } from "#mui/material/styles";
export const defaultTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#006565",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#99CBCB",
foreground: "#FFFFFF",
highlight: "#006565",
midground: "#DBEDED",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const lightTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#006565",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#ebebeb",
foreground: "#FFFFFF",
highlight: "#ffffff",
midground: "#e0e0e0",
textColor: "#000000",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const darkTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#171717",
},
secondary: {
main: "#171717",
},
},
colors: {
background: "#424242",
foreground: "#FFFFFF",
highlight: "#212121",
midground: "#e3e3e3",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#lightgray",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const greyTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#6c757d",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#8f9ba6",
foreground: "#FFFFFF",
highlight: "#6c757d",
midground: "#dadfe3",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const redTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#dc3545",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#e07e87",
foreground: "#FFFFFF",
highlight: "#dc3545",
midground: "#e3c1c4",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const orangeTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#ff6200",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#ffc380",
foreground: "#FFFFFF",
highlight: "#ff8400",
midground: "#ffdab3",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const blueTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#0059ff",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#75a1ff",
foreground: "#FFFFFF",
highlight: "#2f7beb",
midground: "#c7dcff",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
export const skyBlueTheme = createTheme(
adaptV4Theme({
palette: {
primary: {
main: "#0096ed",
},
secondary: {
main: "#99CBCB",
},
},
colors: {
background: "#81d5e6",
foreground: "#FFFFFF",
highlight: "#0dcaf0",
midground: "#daeaed",
textColor: "#ffffff",
passColor: "#3bc55f",
skipColor: "#D3D3D3",
failColor: "#fd4747",
pendingColor: "#fec540",
lightPassColor: "rgb(212, 237, 218)",
lightPendingColor: "rgb(255, 243, 205)",
lightFailColor: "rgb(248, 215, 218)",
},
})
);
Warning:
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
MUI: adaptV4Theme() is deprecated.
Follow the upgrade guide on https://mui.com/r/migration-v4#theme.
just remove adaptV4Theme and you are good to go
export const defaultTheme = createTheme({
palette: {
primary: {
main: '#006565'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#99CBCB',
foreground: '#FFFFFF',
highlight: '#006565',
midground: '#DBEDED',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const lightTheme = createTheme({
palette: {
primary: {
main: '#006565'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#ebebeb',
foreground: '#FFFFFF',
highlight: '#ffffff',
midground: '#e0e0e0',
textColor: '#000000',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const darkTheme = createTheme({
palette: {
primary: {
main: '#171717'
},
secondary: {
main: '#171717'
}
},
colors: {
background: '#424242',
foreground: '#FFFFFF',
highlight: '#212121',
midground: '#e3e3e3',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#lightgray',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const greyTheme = createTheme({
palette: {
primary: {
main: '#6c757d'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#8f9ba6',
foreground: '#FFFFFF',
highlight: '#6c757d',
midground: '#dadfe3',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const redTheme = createTheme({
palette: {
primary: {
main: '#dc3545'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#e07e87',
foreground: '#FFFFFF',
highlight: '#dc3545',
midground: '#e3c1c4',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const orangeTheme = createTheme({
palette: {
primary: {
main: '#ff6200'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#ffc380',
foreground: '#FFFFFF',
highlight: '#ff8400',
midground: '#ffdab3',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const blueTheme = createTheme({
palette: {
primary: {
main: '#0059ff'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#75a1ff',
foreground: '#FFFFFF',
highlight: '#2f7beb',
midground: '#c7dcff',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
export const skyBlueTheme = createTheme({
palette: {
primary: {
main: '#0096ed'
},
secondary: {
main: '#99CBCB'
}
},
colors: {
background: '#81d5e6',
foreground: '#FFFFFF',
highlight: '#0dcaf0',
midground: '#daeaed',
textColor: '#ffffff',
passColor: '#3bc55f',
skipColor: '#D3D3D3',
failColor: '#fd4747',
pendingColor: '#fec540',
lightPassColor: 'rgb(212, 237, 218)',
lightPendingColor: 'rgb(255, 243, 205)',
lightFailColor: 'rgb(248, 215, 218)'
}
})
Related
An example here demonstrates a very sophisticated label:
Label seems to be rendered by a formatter prop with some very rich styles:
label: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
I would like to create a similarly styled legend. Is it possible somehow? According to the docs legend accepts only one placeholder - name.
I do not know what you want to do exactly, but yes, you can reproduce this rich label in a legend:
const ROOT_PATH = 'https://echarts.apache.org/examples';
const weatherIcons = {
Sunny: ROOT_PATH + '/data/asset/img/weather/sunny_128.png',
Cloudy: ROOT_PATH + '/data/asset/img/weather/cloudy_128.png',
Showers: ROOT_PATH + '/data/asset/img/weather/showers_128.png'
};
let option = {
title: {
text: 'Weather Statistics',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
// ========================= HERE =========================
legend: {
data: ['CityA', 'CityB', 'CityD', 'CityC', 'CityE'],
orient: 'vertical',
left: 0,
formatter: [
'{title|{name}}{abg|}',
' {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
textStyle: {
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
},
// ==================================================
series: [
{
type: 'pie',
radius: '65%',
center: ['50%', '50%'],
selectedMode: 'single',
data: [
{
value: 1548,
name: 'CityE',
label: {
formatter: [
'{title|{b}}{abg|}',
' {weatherHead|Weather}{valueHead|Days}{rateHead|Percent}',
'{hr|}',
' {Sunny|}{value|202}{rate|55.3%}',
' {Cloudy|}{value|142}{rate|38.9%}',
' {Showers|}{value|21}{rate|5.8%}'
].join('\n'),
backgroundColor: '#eee',
borderColor: '#777',
borderWidth: 1,
borderRadius: 4,
rich: {
title: {
color: '#eee',
align: 'center'
},
abg: {
backgroundColor: '#333',
width: '100%',
align: 'right',
height: 25,
borderRadius: [4, 4, 0, 0]
},
Sunny: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Sunny
}
},
Cloudy: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Cloudy
}
},
Showers: {
height: 30,
align: 'left',
backgroundColor: {
image: weatherIcons.Showers
}
},
weatherHead: {
color: '#333',
height: 24,
align: 'left'
},
hr: {
borderColor: '#777',
width: '100%',
borderWidth: 0.5,
height: 0
},
value: {
width: 20,
padding: [0, 20, 0, 30],
align: 'left'
},
valueHead: {
color: '#333',
width: 20,
padding: [0, 20, 0, 30],
align: 'center'
},
rate: {
width: 40,
align: 'right',
padding: [0, 10, 0, 0]
},
rateHead: {
color: '#333',
width: 40,
align: 'center',
padding: [0, 10, 0, 0]
}
}
}
},
{ value: 735, name: 'CityC' },
{ value: 510, name: 'CityD' },
{ value: 434, name: 'CityB' },
{ value: 335, name: 'CityA' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
let myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);
#main {
width: 1200px;
height: 800px;
}
<script src="https://cdn.jsdelivr.net/npm/echarts#5.4.1/dist/echarts.min.js"></script>
<div id="main"></div>
I used the sample code from the github and only changed 1 variable: the handleBuiltInTouches to true, I expect it to have the tooltip pop up when I hold it, but it popped up for a splitsecond before disappearing.
also when I set handleBuiltInTouches to true, even when showingtooltipIndicators has selected all spots, none of the spots have the tooltip popup.
class ScatterChartSample2 extends StatefulWidget {
const ScatterChartSample2({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _ScatterChartSample2State();
}
class _ScatterChartSample2State extends State {
int touchedIndex = -1;
Color greyColor = Colors.grey;
List<int> selectedSpots = [];
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Card(
color: const Color(0xff222222),
child: fl.ScatterChart(
fl.ScatterChartData(
scatterSpots: [
fl.ScatterSpot(
4,
4,
color: selectedSpots.contains(0) ? Colors.green : greyColor,
),
fl.ScatterSpot(
2,
5,
color: selectedSpots.contains(1) ? Colors.yellow : greyColor,
radius: 12,
),
fl.ScatterSpot(
4,
5,
color:
selectedSpots.contains(2) ? Colors.purpleAccent : greyColor,
radius: 8,
),
fl.ScatterSpot(
8,
6,
color: selectedSpots.contains(3) ? Colors.orange : greyColor,
radius: 20,
),
fl.ScatterSpot(
5,
7,
color: selectedSpots.contains(4) ? Colors.brown : greyColor,
radius: 14,
),
fl.ScatterSpot(
7,
2,
color: selectedSpots.contains(5)
? Colors.lightGreenAccent
: greyColor,
radius: 18,
),
fl.ScatterSpot(
3,
2,
color: selectedSpots.contains(6) ? Colors.red : greyColor,
radius: 36,
),
fl.ScatterSpot(
2,
8,
color:
selectedSpots.contains(7) ? Colors.tealAccent : greyColor,
radius: 22,
),
],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: fl.FlBorderData(
show: false,
),
gridData: fl.FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: fl.FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: fl.ScatterTouchData(
enabled: true,
handleBuiltInTouches: true,
touchTooltipData: fl.ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
getTooltipItems: (fl.ScatterSpot touchedBarSpot) {
return fl.ScatterTooltipItem(
'X: ',
textStyle: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
bottomMargin: 10,
children: [
TextSpan(
text: '${touchedBarSpot.x.toInt()} \n',
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: 'Y: ',
style: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
),
TextSpan(
text: touchedBarSpot.y.toInt().toString(),
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
],
);
},
),
touchCallback: (fl.FlTouchEvent event,
fl.ScatterTouchResponse? touchResponse) {
if (touchResponse == null ||
touchResponse.touchedSpot == null) {
return;
}
if (event is fl.FlTapUpEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
if (selectedSpots.contains(sectionIndex)) {
selectedSpots.remove(sectionIndex);
} else {
selectedSpots.add(sectionIndex);
}
});
}
},
),
),
),
),
);
}
}
The fl will give the return fl.FlTapDownEvent and fl.FlLongPressEnd if you give long press.
Set fl condition like this:
// Show tooltip if tap down detected
if (event is fl.FlTapDownEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
selectedSpots.add(sectionIndex);
});
// Hide/clear tooltip if long press was ended or tap up detected
}else if(event is fl.FlLongPressEnd || event is fl.FlTapUpEvent){
setState(() {
selectedSpots.clear();
});
}
Don't forget to choose and set one between 1-3 condition
I found that you can show the tooltip if inside scatterTouchData:
enable:false and handleBuiltInTouches: false
enable:false and handleBuiltInTouches: true
enable:true and handleBuiltInTouches: false
but not for enable:true and handleBuiltInTouches: true
Who knows why this happened? I'll updated if I found the answer or you can comment to complete the answer.
Full code
class ScatterChartSample2 extends StatefulWidget {
const ScatterChartSample2({Key? key}) : super(key: key);
#override
State<StatefulWidget> createState() => _ScatterChartSample2State();
}
class _ScatterChartSample2State extends State {
int touchedIndex = -1;
Color greyColor = Colors.grey;
List<int> selectedSpots = [];
#override
Widget build(BuildContext context) {
return AspectRatio(
aspectRatio: 1,
child: Card(
color: const Color(0xff222222),
child: fl.ScatterChart(
fl.ScatterChartData(
scatterSpots: [
fl.ScatterSpot(
4,
4,
color: selectedSpots.contains(0) ? Colors.green : greyColor,
),
fl.ScatterSpot(
2,
5,
color: selectedSpots.contains(1) ? Colors.yellow : greyColor,
radius: 12,
),
fl.ScatterSpot(
4,
5,
color:
selectedSpots.contains(2) ? Colors.purpleAccent : greyColor,
radius: 8,
),
fl.ScatterSpot(
8,
6,
color: selectedSpots.contains(3) ? Colors.orange : greyColor,
radius: 20,
),
fl.ScatterSpot(
5,
7,
color: selectedSpots.contains(4) ? Colors.brown : greyColor,
radius: 14,
),
fl.ScatterSpot(
7,
2,
color: selectedSpots.contains(5)
? Colors.lightGreenAccent
: greyColor,
radius: 18,
),
fl.ScatterSpot(
3,
2,
color: selectedSpots.contains(6) ? Colors.red : greyColor,
radius: 36,
),
fl.ScatterSpot(
2,
8,
color:
selectedSpots.contains(7) ? Colors.tealAccent : greyColor,
radius: 22,
),
],
minX: 0,
maxX: 10,
minY: 0,
maxY: 10,
borderData: fl.FlBorderData(
show: false,
),
gridData: fl.FlGridData(
show: true,
drawHorizontalLine: true,
checkToShowHorizontalLine: (value) => true,
getDrawingHorizontalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
drawVerticalLine: true,
checkToShowVerticalLine: (value) => true,
getDrawingVerticalLine: (value) =>
fl.FlLine(color: Colors.white.withOpacity(0.1)),
),
titlesData: fl.FlTitlesData(
show: false,
),
showingTooltipIndicators: selectedSpots,
scatterTouchData: fl.ScatterTouchData(
// ====================== Set this false =================================
enabled: false,
handleBuiltInTouches: true,
touchTooltipData: fl.ScatterTouchTooltipData(
tooltipBgColor: Colors.black,
getTooltipItems: (fl.ScatterSpot touchedBarSpot) {
return fl.ScatterTooltipItem(
'X: ',
textStyle: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
bottomMargin: 10,
children: [
TextSpan(
text: '${touchedBarSpot.x.toInt()} \n',
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
TextSpan(
text: 'Y: ',
style: TextStyle(
height: 1.2,
color: Colors.grey[100],
fontStyle: FontStyle.italic,
),
),
TextSpan(
text: touchedBarSpot.y.toInt().toString(),
style: const TextStyle(
color: Colors.white,
fontStyle: FontStyle.normal,
fontWeight: FontWeight.bold,
),
),
],
);
},
),
touchCallback: (fl.FlTouchEvent event,
fl.ScatterTouchResponse? touchResponse) {
if (touchResponse == null ||
touchResponse.touchedSpot == null) {
return;
}
// Show tooltip if tap down detected
if (event is fl.FlTapDownEvent) {
final sectionIndex = touchResponse.touchedSpot!.spotIndex;
setState(() {
selectedSpots.add(sectionIndex);
});
// Hide/clear tooltip if long press was ended or tap up detected
}else if(event is fl.FlLongPressEnd || event is fl.FlTapUpEvent){
setState(() {
selectedSpots.clear();
});
}
},
),
),
),
),
);
}
}
I'm using SVG images in my BottomNavigationBar, but when I set selectedItemColor and unselectedItemColor doesn't work.
I'm trying using icons from Flutter framework and It's work. The problem is with SVG images.
I can manage the state for item selected, but I want to know if there is a clean solution using SVG images in my BottomNavigationBar.
I'm using flutter_svg_provider packages for use SVG images in my app.
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: const Color.fromRGBO(
27,
58,
44,
1,
),
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Image(
width: 30,
height: 30,
image: const Svg('assets/home.svg'),
color: _selectedIndex == 0
? Colors.white
: const Color.fromRGBO(
131,
247,
126,
1,
),
),
label: 'Home',
),
BottomNavigationBarItem(
icon: Image(
width: 30,
height: 30,
image: const Svg('assets/notifications.svg'),
color: _selectedIndex == 1
? Colors.white
: const Color.fromRGBO(
131,
247,
126,
1,
),
),
label: 'Notifications',
),
],
showSelectedLabels: false,
showUnselectedLabels: false,
currentIndex: _selectedIndex,
unselectedItemColor: const Color.fromRGBO(
131,
247,
126,
1,
),
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
first time was working normal.i was reload chart SfRangeSelector start with wrong.i will check the values with help of debugger the values also correct.help me solve this bug .i add error screenshot in below.i have added code snippet for reference.
SfRangeSelectorTheme(
data: SfRangeSelectorThemeData(),
child:SfRangeSelector(
min: _min0,
max: _max0,
interval:15,
showLabels: true,
showTicks: false,
enableDeferredUpdate: false,
deferredUpdateDelay: 1000,
enableIntervalSelection: true,
dateFormat:DateFormat.Hm(),
dateIntervalType:DateIntervalType.minutes,
dragMode: SliderDragMode.both,
startThumbIcon: const Icon(
Icons.arrow_back_ios,
color: Colors.blue,
size: 20.0),
endThumbIcon: const Icon(
Icons.arrow_forward_ios,
color: Colors.blue,
size: 20.0),
// inactiveColor: Color.fromARGB(255,5, 90, 194),
activeColor: Color.fromARGB(255, 126, 184, 253),
labelPlacement: LabelPlacement.betweenTicks,
initialValues: _values0,
controller: _rangeController0,
onChanged: (SfRangeValues values) {
setState(() { });
},
child: Container(
color: Colors.blue[200],
height: 40,
padding: EdgeInsets.zero,
margin: EdgeInsets.zero,
child: SfCartesianChart(
primaryXAxis: DateTimeAxis(
minimum: _min0,
maximum: _max0,
intervalType:DateTimeIntervalType.minutes,
isVisible: false,
),
primaryYAxis: NumericAxis(
isVisible: false),
plotAreaBorderWidth: 0,
series: <SplineSeries<Data, DateTime>>[
SplineSeries<Data, DateTime>(
// borderColor: const Color.fromRGBO(0, 193, 187, 1),
color: Colors.blue,
dataSource:chartData,
xValueMapper: (Data sales, _) => sales.x ,
yValueMapper: (Data sales, _) => sales.y)
],
),
),
)
I have a fl_chart (pub), which is displayed below in the gifs. When transitioning data the painter paints outside of the chart's bounds. How could I add a clipper (or some other fix) to the chart below, so this bug does not occur? There is some code at the bottom & some images. fl_chart uses a CustomPainter to draw the charts, so maybe I could override something in the source code?
My quick fix (I removed the transition animation, but I'd like to use the animation):
Ignore the label bug on the y axis (on the left)
(If you don't see the bug look close on the right side)
I would like to use a transition like this, but without the chart going outside the boundaries:
Here is the code:
LineChartData mainData() {
return LineChartData(
lineTouchData: LineTouchData(
touchTooltipData: LineTouchTooltipData(
fitInsideHorizontally: true,
tooltipBgColor: Colors.white,
getTooltipItems: (List<LineBarSpot> touchedBarSpots) {
return touchedBarSpots.map((barSpot) {
return LineTooltipItem(
'${barSpot.y.toInt()}',
TextStyle(
fontFamily: 'Jost*',
fontSize: 15,
color: Colors.black,
),
);
}).toList();
}
),
getTouchedSpotIndicator: (LineChartBarData barData, List<int> spotIndexes) {
return spotIndexes.map((spotIndex) {
return TouchedSpotIndicatorData(
FlLine(
color: const Color.fromARGB(255, 77, 77, 77),
strokeWidth: 1,
dashArray: [4,4],
),
FlDotData(
getDotPainter: (spot, percent, barData, index) {
return FlDotCirclePainter(
radius: 5.5,
color: gradientColors[0],
strokeWidth: 2,
strokeColor: Colors.white,
);
},
),
);
}).toList();
}
),
gridData: FlGridData(
show: true,
getDrawingHorizontalLine: (value) {
return FlLine(
color: const Color.fromARGB(255, 98, 95, 161),
strokeWidth: 1,
dashArray: [4,4]
);
},
),
titlesData: FlTitlesData(
show: true,
bottomTitles: SideTitles(
showTitles: true,
reservedSize: 14,
textStyle:
const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 13,
),
getTitles: (value) {
return _labels[widget.timeType][value.toInt()] ?? '';
},
),
leftTitles: SideTitles(
showTitles: true,
textStyle: const TextStyle(
color: Color.fromARGB(255, 181, 181, 181),
fontWeight: FontWeight.w300,
fontFamily: 'Jost*',
fontSize: 16,
),
getTitles: (value) {
return (value.toInt()).toString();
},
reservedSize: 28,
margin: 12,
),
),
borderData:
FlBorderData(
show: true,
border: Border.symmetric(
horizontal: BorderSide(
color: const Color.fromARGB(255, 170, 170, 170),
width: 1.2
),
),
),
minX: 0,
maxX: _data[widget.timeType].length.toDouble()-1, //length of data set
minY: _data[widget.timeType].reduce(min).toDouble() - 1, //set to lowest v
maxY: _data[widget.timeType].reduce(max).toDouble() + 1, //set to highest v
lineBarsData: [
LineChartBarData(
spots: [
for (int i = 0; i < _data[widget.timeType].length; i++)
FlSpot(i.toDouble(), _data[widget.timeType][i].toDouble())
],
//FlSpot(2.6, 4),
isCurved: true,
colors: [
gradientColors[0],
],
barWidth: 2,
isStrokeCapRound: true,
dotData: FlDotData(
show: false,
),
belowBarData: BarAreaData(
show: true,
colors: gradientColors,
gradientColorStops: [0, 0.5, 1.0],
gradientFrom: const Offset(0, 0),
gradientTo: const Offset(0, 1),
),
),
],
);
}
there is a clipData property in the LinechartData
try to set it as FlClipData.all().