I am trying to align the icon to the very left edge of the blue container.
The red container is just there for reference (I am using ScreenUtil).
How can I align the icon perfectly to the left edge of the blue container? So that there is no gap, not even one pixel?
In this snippet I used FaIcons, however I have the same problem with the standard material icons.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50.w,
color: Colors.blue,
margin: EdgeInsets.only(left: 35.w),
child: IconButton(
iconSize: 25.w,
onPressed: () {},
icon: const FaIcon(FontAwesomeIcons.bars),
),
),
Container(
margin: EdgeInsets.only(left: 35.w),
color: Colors.red,
width: 20.w,
height: 20.w,
)
],
),
),
);}}
remove the padding from iconbutton and set constraints.
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
left: false,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 50,
color: Colors.blue,
margin: EdgeInsets.only(left: 35),
padding: EdgeInsets.zero,
alignment: Alignment.centerLeft,
child: IconButton(
iconSize: 25,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {},
icon: const Icon(Icons.person,),
),
),
Container(
margin: EdgeInsets.only(left: 35),
color: Colors.red,
width: 20,
height: 20,
)
],
),
),
);
}