I have a widget showing the data when the user hovers its grid(GithubStatus widget). If I hover any widgets like the above widget, InkWell, button…etc. the blendmode(softLight) in the parent(Container) and other widgets around it having the blendmode property turn black and back to normal.
See image https://i.sstatic.net/TM0B7RmJ.png.
But when I open the sidebar everything is fine. Please take a look at the image below.
https://i.sstatic.net/EDBXHGYZ.png
This is my GithubStatus widget:
class GitHubStatus extends StatefulWidget {
const GitHubStatus({super.key});
@override
State<StatefulWidget> createState() => GitHubStatusState();
}
class GitHubStatusState extends State<GitHubStatus> {
List<int> years = [2021, 2022, 2023, 2024];
int _selectedYear = 0;
@override
Widget build(BuildContext context) {
return Container(
width: 600,
height: 190,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.shade900,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Expanded(
child: Column(children: [
Expanded(child: GitHubStatusLayout(data: [1, 2, 3])),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Text("Learn more about Github API"),
),
StatusInfo(
data: [],
),
],
),
])),
YearSelectList(
years: years,
onSelected: (value) => setState(() {
_selectedYear = value;
}))
],
));
}
}
StaBox widget:
class StateBox extends StatelessWidget {
const StateBox({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(1),
child: Container(
width: 12,
height: 12,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
color: Colors.purple.shade300,
),
child: GestureDetector(
onTap: () {},
child: const Tooltip(
message: "commit data",
),
)));
}
}
Parent widgets:
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final int _pageIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.centerLeft,
fit: StackFit.expand,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(250, 10, 0, 100),
Colors.black,
],
begin: Alignment.topLeft,
end: Alignment.centerRight,
stops: [0.0, 1.0],
tileMode: TileMode.clamp,
),
image: DecorationImage(
image: AssetImage('assets/images/bg1.jpg'), fit: BoxFit.fill),
),
),
Row(
children: [
const Sidebar(maxWidth: 200),
Expanded(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
const Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
StatusBox(
label: "Projects",
value: "10",
iconData: Icons.folder),
StatusBox(
label: "Line of code",
value: "100832",
iconData: Icons.code,
),
StatusBox(
label: "Hour of work",
value: "102",
iconData: Icons.hourglass_full),
UserBox(
name: "Ọp ti mớt pờ rai",
avatarPath:
"0")
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 600,
height: 300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.softLight,
borderRadius: BorderRadius.circular(10)),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"180921 commit in the last year",
),
GitHubStatus(),
]),
),
const Lamb(),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(
width: 600,
height: 300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.softLight,
borderRadius: BorderRadius.circular(10)),
child: const Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
"Daily Report",
),
Expanded(child: CircleAudioVisualizer(angleStep: 360 / 120, numBar: 120, barWidth: 10, barHeight: 10))
])),
Container(
width: 600,
height: 300,
padding: const EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.softLight,
borderRadius: BorderRadius.circular(10)),
child: const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Weekly Report",
)
]),
)
],
),
],
)))
],
)
],
) // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
I tried to fix it again and again but it still happened(Sorry for my bad English, tks).