Search code examples
flutterdartbuttonframeshadow

How can I add shadow and frame to button


My button looks like this,

enter image description here

How can I convert it to this?

enter image description here

My Code:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    IconButton(
      onPressed: () {},
      icon: const Icon(Icons.bubble_chart_rounded),
    ),
    const Text('Rear Camera')
  ],
),

Solution

  • This might be the most simplest way to achieve what you're trying to do here.

    Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Card( // The widget that is providing that shadow with elevation perameter.
                  elevation: 8, // Controls the shadow you're wanting to get.
                    shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(80), // To achieve the circular shape around your button. 
                    ),
                  child: Padding(
                  padding: EdgeInsets.all(10),
                    child: IconButton(
                  onPressed: () {},
                  icon: Icon(Icons.bubble_chart_rounded),
                ),
                  ),  
                  ),
                const Text('Rear Camera')
              ],
            ),