Home > Software engineering >  Flutter: perfectly align Icons to the edge
Flutter: perfectly align Icons to the edge

Time:10-07

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

CodePudding user response:

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

CodePudding user response:

I think it's fine

Container(
          width: 50.w,
          color: Colors.blue,
          padding: EdgeInsets.zero,
          margin: EdgeInsets.only(left: 35.w),
          child: IconButton(
            iconSize: 25.w,
            alignment: Alignment.centerLeft,
            padding: EdgeInsets.zero,
            onPressed: () {},
            icon: Icon(Icons.menu),
           ),
        ),
  • Related