Applying container box decoration to button inside it

Question

Can the container box decoration be applied to button inside it. For example I am trying to have circular border in an elevated button. It is not applying in this case.

  Container(
    height: 100,
    width: 100,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(40),
    ),
    child: ElevatedButton(
      style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 15)),
      onPressed: ()  async { navigateToBasketPage(context);
      },
      child: const Text('My basket'),
    ),
  ),

Thanks!

Answer 1

you can style your button directly. but if you want to apply Container border to its child. just add clipBehavior: Clip.hardEdge property to your Container.

Answer 2

To add decoration to your ElevatedButton you can use style property of ElevatedButton and and in that property you can apply decoration in two ways

First :

ElevatedButton(
          onPressed: () {},
          child: Text(""),
          style: ElevatedButton.styleFrom(),
        )

Second :

ElevatedButton(
          onPressed: () {},
          child: Text(""),
          style: ButtonStyle(),
        )

In second method you have to pass values to the fields using MaterialStatePropety where in First method you can pass the value in normal way.