Question posted in 
i want to display the tic icon inside the image in the center how ever it is not showing properly in the center of checkbox
Widget build(BuildContext context) {
final TaskController taskController = Get.find();
return Scaffold(
key: drawerKey,
appBar: _appBar(context),
drawer: MyDrawer(),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(17.0),
child: Row(
children: [],
),
),
Expanded(
child: Obx(() {
if (taskController.isTaskSelected.length <
taskController.taskList.length) {
taskController.isTaskSelected.addAll(
List.generate(
taskController.taskList.length -
taskController.isTaskSelected.length,
(_) => false,
),
);
}
return ListView.separated(
itemCount: taskController.taskList.length,
separatorBuilder: (context, index) => SizedBox(height: 16),
itemBuilder: (context, index) {
return Dismissible(
key: ValueKey(taskController.taskList[index]),
background: Container(
color: Colors.blue.shade300,
child: Icon(Icons.delete_outline,
size: 35, color: Colors.white),
alignment: Alignment.centerRight,
padding: EdgeInsets.symmetric(horizontal: 20),
),
direction: DismissDirection.endToStart,
onDismissed: (direction) {
taskController.deleteTask(index);
},
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
height: 60,
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
Get.to(TaskScreen(
taskName: taskController.taskList[index],
isTaskChecked: true,
index: index,
));
},
child: Container(
padding: EdgeInsets.all(15.0),
constraints: BoxConstraints(
maxWidth:
MediaQuery.of(context).size.width *
0.85,
),
decoration: BoxDecoration(
color: Theme.of(context).brightness ==
Brightness.light
? Color(
0xFFF5F5FA) // Light theme background color
: Color(
0xFF2E2E2E), // Dark theme background color
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Theme.of(context).brightness ==
Brightness.light
? Color(
0xFFE0E0E0) // Light shadow for depth in light theme
: Color(
0xFF1E1E1E), // Dark shadow for depth in dark theme
offset: Offset(6, 6), blurRadius: 12,
),
BoxShadow(
color: Theme.of(context).brightness ==
Brightness.light
? Color(0xFFFFFFFF).withOpacity(
0.4) // Light shadow for an embedded effect in light theme
: Color(
0xFF3E3E3E), // Light shadow for an embedded effect in dark theme
offset: Offset(-6, -6),
blurRadius: 12,
),
],
),
child: Padding(
padding: EdgeInsets.only(
left: 10.0), // Shift text to the right
child: Text(
taskController.taskList[index],
style: titleStyle(context),
// TextStyle(
// color: Theme.of(context).brightness == Brightness.light ? Colors.black // Text color is black in light theme
// : Colors
// .white, // Text color is white in dark theme
// fontSize: 18,
// ),
),
),
),
),
),
SizedBox(width: 10),
GestureDetector(
onTap: () {
taskController.toggleTaskSelection(
index,
!taskController.isTaskSelected[index],
);
},
child: Container(
// You can add padding, margin, or other styles if needed
// decoration: BoxDecoration(
// color: Colors.transparent, // Set a transparent background if desired
// borderRadius: BorderRadius.circular(3), // Optional border radius
// boxShadow: getCurrentThemeBoxShadows(context), // Add shadows if needed
// ),
child: Stack(
alignment: Alignment
.center, // Center the items within the Stack
children: [
Image.asset(
Theme.of(context).brightness ==
Brightness.light
? 'assets/images/lightbox.png' // Light theme image
: 'assets/images/darknox.png', // Dark theme image
height: 70,
width: 70,
fit: BoxFit.cover,
),
Align(
alignment: Alignment.center,
child: Icon(
Icons.check,
color: taskController
.isTaskSelected[index]
? (Theme.of(context).brightness ==
Brightness.light
? Colors.black
: Colors.white)
: Colors.transparent,
size: 22,
),
),
],
),
),
),
],
),
),
),
);
},
);
}),
),
],
),
);
}
i did tried it wrapping with column removing the stack but the image still keeps displaying at the bottom of the screen i want it to display in the center of the checkbox images ,i want the tic will show in the center of checkbox image i am not using checkbox icon because i want to give neumorphic effect to the app so i used the image but the tic icon is not displaying at center and keeps changing its position in dark and light theme both,so what i tried the answers that were suggested on thispost i did tried them but they did not worked ,however it seems affecting the container length of the task as well i am not able to figure it out even i provide the separate height and width to the conatiner it will impact the space difference between the taskcontainer and checkbox both but not the checkbox image size changed neither the tic is displayed at the center
2
Answers
Remove the unnecessary align widget, The stack alignment property takes care of the centering and change the image fit to
fit: BoxFit.containto ensure the entire image is visible without cropping.