Search code examples
flutterdartflutter-layout

Flutter: perfectly align Icons to the edge


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.

Here you can see the result of my code

 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,
        )
      ],
    ),
  ),
);}}

Solution

  • 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,
            )
          ],
        ),
      ),
    );
    }
    

    here is the result