Question 78296 in Flutter Question posted in
The official Flutter documentation can be found here.

Need help shaping a floating action button – Flutter

Here is my expected design:

Expected design

Here is how it currently looks with the code below:

Current result

Current code:

Current code

I have tried this code with radius circle:

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:

Result of using code with radius circle

Tags:

2

Answers


  1. 0

    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'),
  ),
),
    Login or Signup to reply.
  2. 0

    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:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search