How can I add shadow and frame to button-CodePudding

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')
  ],
),

CodePudding user response：

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')
          ],
        ),