Make Extended FAB(FloatingActionButton) fluid-width with flutter

Question

Is there a way to make an Extended FAB fluid-width like described in the Material 3 specification with flutter?

Try with a fitted box:

    return Container(
      width: double.infinity,
      color: Colors.red,
      child: FittedBox(
        child: FloatingActionButton.extended(
            onPressed: () {},
            label: const Text('My button'),
            icon: const Icon(Icons.add),
        ),
      ),
    );

The result, the button has a height proportional to width, so the button becomes huge:

Try to restrict height:

    return Container(
      width: double.infinity,
      color: Colors.red,
      height: 88,
      child: FittedBox(
        child: FloatingActionButton.extended(
            onPressed: () {},
            label: const Text('My button'),
            icon: const Icon(Icons.add),
        ),
      ),
    );

Result: the button is resized and doesn't take all space in the red container:

How to make it like this?: (A fluid-width container is defined by its relationship to the dimensions of the screen, such as screen width or layout grid.)

Related topics

• flutter - How to change the size of FloatingActionButton? - Stack Overflow
• Full width floatingactionbutton in flutter? - Stack Overflow
• user interface - How to set size to FloatingActionButton - Flutter - Stack Overflow

Answer 1

Just remove FittedBox as below code, It will work

return Container(
      width: double.infinity,
      color: Colors.red,
      child: FloatingActionButton.extended(
        onPressed: () {},
        label: const Text('My button'),
        icon: const Icon(Icons.add),
      ),
    ),