I have a custom a PreferredSize widget which functions as an application bar and I would want to align the edge of the rightmost action button to the right as if it is cropped by its bounding box. Right know I have this:

What I want to achieve is basically this (note the position of the three dots):

My code looks like this:

class MaterialIconButton extends StatelessWidget {
  final Icon icon;

  const MaterialIconButton({
    Key? key,
    required this.icon
  }): super(key: key);

  @override
  Widget build(BuildContext context) {
    return  ClipOval(
      child: 
      Material(
        color: Colors.transparent,
        child: Padding(
          padding: const EdgeInsets.all(0),
          child: IconButton(
            onPressed: () {}, 
            icon: icon,
            iconSize: 36,
            padding: EdgeInsets.zero,
            splashColor: Colors.black.withAlpha(40),
            highlightColor: Colors.black.withAlpha(20),
          )
        ),
      ),
    );
  }
}

class HomeHeader extends StatelessWidget {
  const HomeHeader({Key? key}): super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.indigo[100]
      ),
      padding: const EdgeInsets.fromLTRB(16, 32, 16, 16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          RichText(
            text: TextSpan(
              children: [
                TextSpan(
                  text: "Example",
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    color: Colors.blueGrey[800]
                  )
                ),
              ]    
            )
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: const [
              MaterialIconButton(
                icon: Icon(
                  Icons.settings
                )
              ),
              MaterialIconButton(
                icon: Icon(
                  Icons.more_vert
                )
              )
            ],
          )
        ]
      )
    );
  }
}

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const PreferredSize(
        child: HomeHeader(),
        preferredSize: Size.fromHeight(120),
      ),
      body: (...)
    );
  }
}

Is there any way to achieve this using only built-in Flutter SVG Icons? Note that in general I can't know the exact size of icon's bounding box in advance.

CodePudding user response：

Try using overflowBox or use this package

Before passing 0 fromLTRB(16, 32, 16, 16),