Here is my expected design:

Here is how it currently looks with the code below:

Current code:

I have tried this code with radius circle:

Using Radius.circular but this still doesn't result in the expected outcome, it instead shows up as not correct icon still cornered:

CodePudding user response：

Try the following code:

FloatingActionButton(
  onPressed: () {},
  backgroundColor: const Color.fromRGBO(238, 0, 0, 1),
  shape: const RoundedRectangleBorder( // <= Change BeveledRectangleBorder to RoundedRectangularBorder
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(30.0),
      topRight: Radius.circular(10.0),
      bottomLeft: Radius.circular(30.0),
      bottomRight: Radius.circular(30.0),
    ),
  ),
  child: const Image(
    width: 40,
    height: 40,
    image: AssetImage('images/chatbot-icon.png'),
  ),
),

CodePudding user response：

Change BeveledRectangleBorder to RoundedRectangularBorder

Use the following code:

return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: const Color.fromRGBO(238, 0, 0, 1),
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                topRight: Radius.circular(20),
                bottomLeft: Radius.circular(100),
                bottomRight: Radius.circular(100),
                topLeft: Radius.circular(100))),
      ),
    );

Output: