See how the edges are faded and merged with the color of the button? How do you get something like that in flutter?
I have the button, don't know how to get that effect.
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 30),
child: Column(
children: [
//OUTER CIRCLE (BUTTON INSIDE)
Container(
height: 275,
width: 275,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(150),
border: Border.all(
width: 3,
color: Colors.grey.withOpacity(0.6),
style: BorderStyle.solid,
),
),
child: Padding(
padding: const EdgeInsets.all(40),
//SHADOW (Button inside)
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xfffd194b).withOpacity(0.7),
spreadRadius: 10,
blurRadius: 40,
offset: const Offset(0, 25),
),
],
),
//BUTTON
child: RecordButtonWithText(
buttonText: _buttonText,
startStopRecording: startStopRecording,
),
),
),
),
],
),
);
class RecordButtonWithText extends StatelessWidget {
const RecordButtonWithText({
Key? key,
required String buttonText,
required this.startStopRecording,
}) : _buttonText = buttonText,
super(key: key);
final String _buttonText;
final VoidCallback startStopRecording;
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
startStopRecording();
},
style: ElevatedButton.styleFrom(
elevation: 10,
padding: const EdgeInsets.all(30),
shape: const CircleBorder(),
shadowColor: const Color(0xfffd194b),
primary: const Color(0xfffd194b),
),
child: Text(
_buttonText.toUpperCase(),
style: const TextStyle(fontSize: 22, letterSpacing: 3),
),
);
}
}
CodePudding user response:
If the you don't have to use the "ElevatedButton" widget, you can achieve what you want like that:
class RecordButtonWithText extends StatelessWidget {
final String _buttonText;
final VoidCallback startStopRecording;
final EdgeInsets padding;
final double size;
const RecordButtonWithText({
Key? key,
required String buttonText,
required this.startStopRecording,
this.padding = const EdgeInsets.all(30.0),
this.size = 275.0,
}) : _buttonText = buttonText,
super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: size,
width: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
width: 2,
color: Colors.grey.withOpacity(0.4),
style: BorderStyle.solid,
),
),
child: Padding(
padding: EdgeInsets.all(size * 0.145),
//SHADOW (Button inside)
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: const Color(0xfffd194b).withOpacity(0.7),
spreadRadius: size * 0.03,
blurRadius: size * 0.145,
offset: Offset(0, size * 0.09),
),
],
),
//BUTTON
child: InkWell(
borderRadius: BorderRadius.circular(size / 2),
onTap: () {
startStopRecording();
},
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(size * 0.1),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.black,
gradient: RadialGradient(colors: [
const Color(0xfffd194b),
const Color(0xfffd194b),
const Color(0xfffd194b).withOpacity(0.5),
], stops: const [
0,
0.8,
1
]),
),
child: Text(
_buttonText.toUpperCase(),
style: TextStyle(
color: Colors.white,
fontSize: size * 0.08,
),
),
),
),
),
),
);
}
}