Applying container box decoration to button inside it-CodePudding

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!

CodePudding user response：

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.

CodePudding user response：

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.